Import modules into next js

Question

Actually i have a project which i need to include in Next JS as a module. So basically i am trying to use it via npm link, I am successfully able to add that module into my next JS repo as a component. But it is breaking because of webpack loaders. Should i need to add all the loaders necessary in next JS? what is better way to achieve this ?

Answer 1

By default Next.js doesn't compiles dependencies located at node_modules.

You should use next-transpile-modules in order to instruct it to compile specific libs.

// next.config.js
const withTM = require('next-transpile-modules')(['somemodule', 'and-another']);

module.exports = withTM({
  ...regular next config
});

Answer 2

With the new update of Next, js supports ES Modules and URL Imports.

Starting with Next.js 11.1, we added experimental support for ES modules being prioritized over CommonJS modules. In Next.js 12, this is now the default. Importing NPM modules that only provide CommonJS is still supported.

https://nextjs.org/blog/next-12#es-modules-support-and-url-imports