How To Use Webpack 5 Configs In Next.js?

I am trying to add experiments to the webpack config but am unable to determine what I am doing wrong. my environment: yarn@1.22.5 node@12.13.0 I created a brand new next app wit

Solution 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 herewebpack5: false,
}

Solution 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;
    }
};

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

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

Features