CODEWITHSUNDEEP
javascriptwebpacknext.js
Peter W
Peter W

Reputation: 1494

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:

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.

Upvotes: 17

Views: 74913

Answers (3)

Danila
Danila

Reputation: 18486

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) {
    console.log(options.webpack.version); // Should be webpack v5 now
    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,
}

Upvotes: 34

juliomalves
juliomalves

Reputation: 50278

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

Upvotes: 24

Joshua Poddoku
Joshua Poddoku

Reputation: 119

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

Features of webpack 5 as mentioned in Official Docs

Upvotes: 6

Related Questions