nextjs - 💡(How to fix) Fix External modules not supported in subpath imports [1 participants]

1. You will get the error Module not found: Can't resolve '#image'

Fix Plan

To resolve the issue with subpath imports, we need to configure Next.js to properly handle the imports field in package.json.

Here are the steps:

• Update next.config.js to include the experimental.resolver option.
• Use the resolve function from enhanced-resolve to customize the resolution of modules.

Example Code

// next.config.js
const { resolve } = require('enhanced-resolve');

module.exports = {
  //... other configurations ...
  experimental: {
    resolver: async (options) => {
      const { resolver } = options;
      return {
        ...resolver,
        resolve: async (ctx, opts) => {
          const imports = ctx.packageJSON.imports;
          if (imports && opts.path in imports) {
            opts.path = imports[opts.path];
          }
          return resolver.resolve(ctx, opts);
        },
      };
    },
  },
};

Verification

After applying the fix, run next dev and verify that the application starts without errors. The Module not found: Can't resolve '#image' error should be resolved.

Extra Tips

• Make sure to update next and react to the latest versions to ensure compatibility with the experimental.resolver option.
• If you're using a custom webpack configuration, you may need to modify it to work with the experimental.resolver option.