ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. Next.js

Question

I used create-next-app to create my next.js project boiler plate. But as soon i run npm run dev i get the error:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].node should be one of these:
   false | object { __dirname?, __filename?, global? }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration[0].node has an unknown property 'fs'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
    * configuration[0].node has an unknown property 'devServer'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
 - configuration[1].node should be one of these:
   false | object { __dirname?, __filename?, global? }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration[1].node has an unknown property 'fs'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
    * configuration[1].node has an unknown property 'devServer'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
    at validate (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\compiled\schema-utils3\index.js:1:153657)
    at validateSchema (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\compiled\webpack\bundle5.js:137945:2)
    at create (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\compiled\webpack\bundle5.js:141384:24)
    at webpack (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\compiled\webpack\bundle5.js:141426:32)
    at f (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\compiled\webpack\bundle5.js:98978:16)
    at HotReloader.start (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\server\hot-reloader.js:18:415)
    at async DevServer.prepare (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\server\next-dev-server.js:16:453)
    at async C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\cli\next-dev.js:22:1 {
  errors: [
    {
      keyword: 'anyOf',
      dataPath: '[0].node',
      schemaPath: '#/anyOf',
      params: {},
      message: 'should match some schema in anyOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Object],
      children: [Array]
.....

My next.config.js looks as follows.

module.exports = {
  webpack: (config) => {
    config.node = {
      fs: 'empty'
    }
    return config
  }
};

Nothing has changed yet. This is the default. May you please explain to me why am i getting this error.

Any help input will be appreciated.

Answer 1

Can you check any of the dependecies on Nextjs 11 need to be updated. In my case updating next-transpile-modules to Version: ^8.0.0 resolved the issue.

Answer 2

You are running webpack 5, which only supports __dirname, __filename and global.

Your config assumes webpack 4, which supports many more properties including Node core libraries.

You need to pick which version of webpack you want to run and make sure that your config matches.

Answer 3

Next.js has now webpack-5 enabled by default.

If you don't wanna switch back to webpack-4 (for obvious reasons), your configuration should look something like this:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) config.resolve.fallback.fs = false;
    return config;
  }
};

I saw the answer you posted, there you are configuring path and url also. But you actually don't need to manually configure them as Next.js handles it for you.

For dns, you may do something like this:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      const fallback = config.resolve.fallback;
      fallback.fs = false;

      fallback.dns = function () {
        if (!arguments.length) return;
        const callback = arguments[arguments.length - 1];
        if (callback && typeof callback === 'function') callback(null, '0.0.0.0');
      };
      // or after installing `node-libs-browser`
      // fallback.dns = require.resolve('node-libs-browser/dns');
    }
    return config;
  },
};

Refs:

• To v5 from v4 | webpack

• Automatic Node.js Polyfills Removed

• resolve.fallback

• next/build/webpack-config.ts

• Webpack 5 Adoption

Answer 4

After JDB's answer i had a clear hint. I configured my next.js app to use webpack4 after reading this. Here is my new next.cofig.js:

module.exports = {
  webpack5: false,
  webpack: (config) => {
    config.node = {
      dns: "mock",
      fs: "empty",
      path: true,
      url: false,
    };
    return config;
  },
};

Answer 5

Just update the Node version. I was receiving this error also when I tried to create a new next.js app. I had node version 14.16 installed but it seems Next needs ^14.17.0. After updating to 14.18.0 I created a new next app and it ran fine with the default next.config file.