Next.js Discord

Discord Forum

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

Answered
Griffon Nivernais posted this in #help-forum
Open in Discord
Griffon NivernaisOP
Getting this error when importing handlebars in a module that a route handler uses, this wasn't an issue in Next 13 so I'm assuming it's an app router issue. How can I circumvent this? It's not like I'm trying to import .hbs files, just the library itself.
require.extensions is not supported by webpack. Use a loader instead.

Import trace for requested module:
./node_modules/handlebars/lib/index.js
./src/server/templates/index.ts
./src/app/api/submit/route.tsx
Answered by Ray
ok this work
// next.config.mjs
import withBundleAnalyzer from "@next/bundle-analyzer";
import path from "path";

// /** @type {import('next').NextConfig} */
const nextConfig = {
  // NGinx is configured to automatically compress contents to GZip
  compress: false,
  experimental: {
    missingSuspenseWithCSRBailout: false,
    webpackBuildWorker: true,
    serverComponentsExternalPackages: ["handlebars"],
  },
  reactStrictMode: true,
  // // TODO: Revert this when you're done converting to TS
  webpack: (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        "@": path.resolve("./src"),
        "~": path.resolve("./"),
      },
    },
  }),
};

export default withBundleAnalyzer()(nextConfig);
View full answer

10 Replies

@Ray add this to your `next.config.mjs` ts /** @type {import('next').NextConfig} */ const nextConfig = { experimental: { serverComponentsExternalPackages: ["handlebars"], }, }; export default nextConfig;
Griffon NivernaisOP
No dice, ended up with this:
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.                                                                                                     
 - configuration[0].experiments has an unknown property 'serverComponentsExternalPackages'. These properties are valid:                                                                                                                          
   object { asyncWebAssembly?, backCompat?, buildHttp?, cacheUnaffected?, css?, futureDefaults?, layers?, lazyCompilation?, outputModule?, syncWebAssembly?, topLevelAwait? }                                                                    
   -> Enables/Disables experiments (experimental features with relax SemVer compatibility).                                                                                                                                                      
 - configuration[1].experiments has an unknown property 'serverComponentsExternalPackages'. These properties are valid:                                                                                                                          
   object { asyncWebAssembly?, backCompat?, buildHttp?, cacheUnaffected?, css?, futureDefaults?, layers?, lazyCompilation?, outputModule?, syncWebAssembly?, topLevelAwait? }                                                                    
   -> Enables/Disables experiments (experimental features with relax SemVer compatibility).                                                                                                                                                      
 - configuration[2].experiments has an unknown property
Here's my config:
/**
 * @type {import('next').NextConfig}
 **/
export default withBundleAnalyzer({
    // NGinx is configured to automatically compress contents to GZip
    compress: false,
    experimental: {
        missingSuspenseWithCSRBailout: false,
        webpackBuildWorker: true,
    },
    reactStrictMode: true,
    // // TODO: Revert this when you're done converting to TS
    webpack: config => ({
        ...config,
        experiments: {
            ...config.experiments,
            serverComponentsExternalPackages: ["handlebars"],
        },
        resolve: {
            ...config.resolve,
            alias: {
                ...config.resolve.alias,
                "@": path.resolve("./src"),
                "~": path.resolve("./"),
            },
        },
    }),
});
@Griffon Nivernais Here's my config: js /** * @type {import('next').NextConfig} **/ export default withBundleAnalyzer({ // NGinx is configured to automatically compress contents to GZip compress: false, experimental: { missingSuspenseWithCSRBailout: false, webpackBuildWorker: true, }, reactStrictMode: true, // // TODO: Revert this when you're done converting to TS webpack: config => ({ ...config, experiments: { ...config.experiments, serverComponentsExternalPackages: ["handlebars"], }, resolve: { ...config.resolve, alias: { ...config.resolve.alias, "@": path.resolve("./src"), "~": path.resolve("./"), }, }, }), });
Ray
not sure why but I need to convert the config file to js file to work with the bundle analyzer
// next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({});
const path = require("path");

// /** @type {import('next').NextConfig} */
const nextConfig = {
  // NGinx is configured to automatically compress contents to GZip
  compress: false,
  experimental: {
    missingSuspenseWithCSRBailout: false,
    webpackBuildWorker: true,
    serverComponentsExternalPackages: ["handlebars"],
  },
  reactStrictMode: true,
  // // TODO: Revert this when you're done converting to TS
  webpack: (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        "@": path.resolve("./src"),
        "~": path.resolve("./"),
      },
    },
  }),
};

module.exports = withBundleAnalyzer(nextConfig);
Ray
ok this work
// next.config.mjs
import withBundleAnalyzer from "@next/bundle-analyzer";
import path from "path";

// /** @type {import('next').NextConfig} */
const nextConfig = {
  // NGinx is configured to automatically compress contents to GZip
  compress: false,
  experimental: {
    missingSuspenseWithCSRBailout: false,
    webpackBuildWorker: true,
    serverComponentsExternalPackages: ["handlebars"],
  },
  reactStrictMode: true,
  // // TODO: Revert this when you're done converting to TS
  webpack: (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        "@": path.resolve("./src"),
        "~": path.resolve("./"),
      },
    },
  }),
};

export default withBundleAnalyzer()(nextConfig);
Answer
Griffon NivernaisOP
Oh I see where I went wrong, let me give it a try.
Also my bad for not responding, was in a meeting lol
@Griffon Nivernais Oh I see where I went wrong, let me give it a try.
Ray
withBundleAnalyzer() return a function that receive the nextConfig
Griffon NivernaisOP
It doesn't come up with the error now so I presume that's fixed my issue, thank you so much! 💞