javascript - How to use webpack 5 configs in Next.js?

Question

I am trying to add experiments to the webpack config but am unable to determine what I am doing wrong.

my environment:

• [email protected]
• [email protected]

I created a brand new next app with npx create-next-app blog

Based on what I have read I need to add a resolutions property to the package.json like so:

"dependencies": {
    "next": "10.0.6",
    "react": "17.0.1",
    "react-dom": "17.0.1"
},
"resolutions": {
  "webpack": "5.21.2"
}

And then in next.config.js I have the following:

const webpack = require("webpack");
console.log(webpack.version); // 5.21.2
module.exports = {
  webpack: function (config, options) {
    console.log(options.webpack.version); // 4.44.1
    config.experiments = {};
    return config;
  },
};

and when I yarn dev I get the following error:

- configuration[0] has an unknown property 'experiments'.

If you notice the required module webpack version is 5.21.2 but the version being used inside the config settings is 4.44.1.

Answer 1

Starting from Next.js v11 Webpack 5 is now the default for all Next.js applications:

Webpack 5 is now the default for all Next.js applications. If you did not have custom webpack configuration your application is already using webpack 5. If you do have custom webpack configuration you can refer to the Next.js webpack 5 documentation for upgrading guidance.

For prior versions of Next.js you need to set a flag for it in next.config.js:

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: function (config, options) {
    config.experiments = {};
    return config;
  },
};

And you can still use webpack 4 while upgrading to the latest version of Next.js by adding the webpack5: false flag

module.exports = {
  // Note: no `future` key here
  webpack5: false,
}