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,
}

Answer 2

Since Next.js 11 webpack 5 is now used by default, with no extra configuration.

You can still use webpack 4 by setting the webpack5 to false in next.config.js.

module.exports = {
    webpack5: false
}

---

Prior to Next.js 11, there's a future flag that can be enabled for Webpack 5 in next.config.js.

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

Answer 3

Official Docs: https://nextjs.org/docs/messages/webpack5

Goto next.config.js

Add the snippet below with future flag

  future: {
    webpack5: true,
  }

My next.config.js

const path = require("path");

module.exports = {
  trailingSlash: true,
  webpackDevMiddleware: (config) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    };

    return config;
  },
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
  future: {
    webpack5: true,
  },
};

Features