require.extensions is not supported by webpack. Use a loader instead.

[arnelamo]

Summary

I use a library called nodemailer-express-handlebars to generate HTML templates, and all though everything seems to work just fine - the HTML templates is generated as expected - i get this warning in the terminal when I build, and when I call the api endpoint in dev mode:

`Import trace for requested module:
./node_modules/handlebars/lib/index.js
./node_modules/express-handlebars/dist/express-handlebars.js
./node_modules/express-handlebars/dist/index.js
./node_modules/nodemailer-express-handlebars/lib/generator.js
./node_modules/nodemailer-express-handlebars/lib/index.js
./node_modules/nodemailer-express-handlebars/index.js
./app/api/contactForm/route.ts

./node_modules/handlebars/lib/index.js
require.extensions is not supported by webpack. Use a loader instead.`

This image shows how I import the package in my app/api/contactForm/route.ts file:

This image shows my package.json:

I've tried to look for solutions, and found things like this:

However, I'm not sure this is possible and even the right way of doing it. I had to add the express-handlebars to make the this work at all, and everything seems to work just fine. The warning however is bugging me, and I would like to know if this is possible to solve. I tried to look into the docs but still can't figure out if I can or should try to configure an 'alias' somehow in the next.config.js.

All input is highly appreciated.

Additional information

No response

Example

No response

[icyJoseph]

I think this is the kind of thing that happens when you have several layers of abstraction over a package, not saying it is inherently bad, but the problem seems to be that webpack is trying to compile the underlying handlebars code.

• Using Handlebars with webpack warning require.extentions not supported handlebars-lang/handlebars.js#953 (comment)

This comment has a webpack object you could try to replicate

• Using Handlebars with webpack warning require.extentions not supported handlebars-lang/handlebars.js#953 (comment)

The last link is the same but updated, I think you can just paste that int the next.js config webpack key.

[arnelamo]

Awesome, I will try that.

I did however try to change my next.config.js like this, just by copying the last 'import trace' from the log. You can see the changes I've made highlighted in green here.

Now, the warning is actually gone. Would you by any chance like to comment on my "home made" solution?

[icyJoseph]

Just switch var path for const path hehe, but otherwise, it looks alright.

Now sure though if telling Wepback to load express-handlebars whenever it finds require("handlebars") is a good idea 😅 it might just work now, but if a feature actually requires handlebars code, it'll most likely break.

The "problem" is that require loads the entire module synchronously, and with it, all of its required code, and so on... even if the code is unused.

[softmarshmallow]

what about for turbopack?

below wont' work

  turbopack: {
    resolveAlias: {
      handlebars: "handlebars/dist/handlebars.js",
    },
  },

[monokaijs]

Try add this to next.config.js:

  webpack: (config, context) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          handlebars: "handlebars/dist/handlebars.js",
        }
      }
    };
  },