Next.js: Webpack 5 support

[timneutkens]

Follow-up of https://github.com/zeit/next.js/issues/9426, opening this as the overarching issue on what to solve:

• [x] Get rid of buildId and use content hashes for page files
• [x] Simplify on-demand-entries
• [x] Make custom webpack plugins compatible with webpack 5
• [x] Make resolutions to webpack 5 use the webpack 5 implementation initially (to allow canary testing / canary to keep being released without any breaking changes)
• [x] Make React Refresh tests pass
• [ ] Make sure there are no deprecation warnings
  
  
  
  • [ ] https://github.com/webpack-contrib/terser-webpack-plugin/pull/283
  
  
  • [ ] https://github.com/webpack-contrib/mini-css-extract-plugin (most warnings come from this plugin)
  
  
  • [ ] Next.js internal webpack plugins warnings
  
  
  • [x] https://github.com/vercel/next.js/pull/15797
  
  
  • [x] https://github.com/vercel/next.js/pull/15806
  
  
• [ ] Provide polyfills that were removed in webpack 5 like process and Buffer. We'll likely show a warning when a built-in Node.js module is used where it was not intended, this would ensure backwards compat and significantly less breakage in existing applications.
  
  
  
  • [x] Add process and buffer: https://github.com/vercel/next.js/pull/15499
  
  

[todortotev]

@timneutkens If there is anything you would let a non-maintainer help with, I'd be glad to assist.

[arzafran]

Having the following error, but probably it's related to Theme-UI and they should support Webpack 5

error - ./node_modules/@theme-ui/core/dist/index.esm.js
Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)

It should be a fairly simple fix, but I think it may trigger a chain of fixes needed on other dependencies. we would have to manually change all these from:

import { version } from './package.json';   
export default version; 

to

import packageInfo from './package.json';
export default packageInfo.version;

right?

[dvakatsiienko]

Having the following error, but probably it's related to Theme-UI and they should support Webpack 5

error - ./node_modules/@theme-ui/core/dist/index.esm.js
Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)

It should be a fairly simple fix, but I think it may trigger a chain of fixes needed on other dependencies. we would have to manually change all these from:

import { version } from './package.json'; 
export default version;   

to

import packageInfo from './package.json';
export default packageInfo.version;

right?

Same error happens to AWS-amplify library.

[imagentleman]

Having issues in ie11.

Was able to reproduce with a brand new app created with create-next-app.

Error:

I get a blank page showing this on the console:

Steps to reproduce:

1. Install yarn 1.22.4 and node v12.14.1 on MacOS 10.15.6
2. Run yarn create next-app as shown on https://nextjs.org/docs
3. Run yarn dev
4. Open localhost:3000 (or 10.0.2.2:3000) in ie11 (v11.1339.17763.0) with a win10 image running on virtual box 6.1.12 r139181

Notes:
Doesn't seem to happen with next.js 9.4.0, next.js 9.4.4 or next.js 9.5.0 in production mode (after running yarn build and yarn start).

Didn't add { "resolutions": { "webpack": "^5.0.0-beta.22" } } to enable webpack 5. But it also happens with it.
On a real windows device (with similar software installed: win10, ie11, yarn, etc) i'm only getting the first colon error, but everything seems to work (initial page load, fast refresh, etc) unlike with the mac and vm combo. 🤷‍♂️

[timneutkens]

Didn't add { "resolutions": { "webpack": "^5.0.0-beta.22" } } to enable webpack 5

Then this is off topic, please create a new issue.

[valse]

Hi, I'm trying to add the webpack 5 beta too but I have this error on compilation:

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema
configuration[0].module.rules[2].issuer has an unknown property 'test'. These properties are valid

I have no custom webpack config and I'm using styled-jsx with styled-jsx-plugin-sass too

[timneutkens]

Hi, I'm trying to add the webpack 5 beta too but I have this error on compilation:

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema
configuration[0].module.rules[2].issuer has an unknown property 'test'. These properties are valid

I have no custom webpack config and I'm using styled-jsx with styled-jsx-plugin-sass too

Are you sure you don't have anything in next.config.js, it's practically impossible for this error to occur if you do not have custom webpack configuration, this could be through added plugins.

[valse]

Hi, I'm trying to add the webpack 5 beta too but I have this error on compilation:
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema
configuration[0].module.rules[2].issuer has an unknown property 'test'. These properties are valid
I have no custom webpack config and I'm using styled-jsx with styled-jsx-plugin-sass too

Are you sure you don't have anything in next.config.js, it's practically impossible for this error to occur if you do not have custom webpack configuration, this could be through added plugins.

Hi @timneutkens, this is my next.config.js and you're right I'm using the 'next-images' plugin:

const withImages = require("next-images")

module.exports = withImages({
  esModule: true,
  trailingSlash: false,
  env: {
    ...
  },
})

[timneutkens]

So that likely edits the webpack config in a wrong way which is a bug in that library.

[valse]

So that likely edits the webpack config in a wrong way which is a bug in that library.

Yes it is: switching to the next-optimized-images plugin all works as expected... I open an issue for the next-images plugin. Thanks!

[Utwo]

How can I test this with npm instead of yarn?

[timneutkens]

How can I test this with npm instead of yarn?

You can't currently because npm does not support resolutions afaik.

[zburk]

Running webpack 5, everything still works for me with the following deprecation warnings. Creating a new nextjs app, I get the same deprecation warnings.

(node:85371) [DEP_WEBPACK_EXTERNALS_FUNCTION_PARAMETERS] DeprecationWarning: The externals-function should be defined like ({context, request}, cb) => { ... }
(node:85371) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(node:85371) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning: Compilation.chunks was changed from Array to Set (using Array method 'find' is deprecated)
(node:85371) [DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API
(node:85371) [DEP_WEBPACK_MODULE_ID] DeprecationWarning: Module.id: Use new ChunkGraph API

"dependencies": {
    "fs-extra": "^9.0.1",
    "lodash": "^4.17.19",
    "next": "9.5.0",
    "next-pwa": "^3.1.1",
    "react": "16.13.1",
    "react-burger-menu": "^2.7.0",
    "react-dom": "16.13.1",
    "react-notifications-component": "^2.4.0",
    "react-redux": "^7.2.1",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "socket.io-client": "^2.3.0",
    "styled-components": "^5.1.1",
    "swr": "^0.2.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "@types/lodash": "^4.14.158",
    "@types/node": "^14.0.26",
    "@types/react": "^16.9.43",
    "@types/react-burger-menu": "^2.6.1",
    "@types/react-notifications-component": "^2.4.0",
    "@types/react-redux": "^7.1.9",
    "@types/socket.io-client": "^1.4.33",
    "@types/styled-components": "^5.1.1",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-styled-components": "^1.10.7",
    "eslint": "^7.5.0",
    "eslint-plugin-react": "^7.20.5",
    "postcss-preset-env": "^6.7.0",
    "redux-devtools": "^3.5.0",
    "tailwindcss": "^1.5.2",
    "typescript": "^3.9.7"
  },

[timneutkens]

@zburk note the todo list on the issue:

Make sure there are no deprecation warnings

So your application works fine?

[zburk]

@zburk note the todo list on the issue:

Make sure there are no deprecation warnings

So your application works fine?

Right! The deprecation warnings were the only "errors" I got. Testing the application, I found no issues with anything that weren't already present.

Let me know if there's any other info I can provide.

[Kinbaum]

I'm using Yarn 2 and I have a Next.js application within a monorepo alongside some other Webpack 5 applications. I have set the resolutions at the root package.json level to resolve to Webpack 5. What I've found is that by doing that, it actually breaks my jsconfig.json and absolute imports.

I am receiving the following error message in my terminal:

Module not found: Your application tried to access apollo, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

apollo is a folder at the root of my Next.js project. Here is my jsconfig.json

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "."
    }
}

Do you have any guidance on how to resolve this issue? This works fine if I don't add the Webpack 5 resolution

[nicholaschiang]

Just added this and got the following warning from Yarn v2:

➤ YN0060: │ next@npm:9.5.1 [b17e5] provides webpack@npm:5.0.0-beta.22 with version 5.0.0-beta.22 which doesn't satisfy ^4.4.0 requested by mini-css-extract-plugin@npm:0.8.0

[nicholaschiang]

Also, got the following errors when running next dev:

ready - started server on http://0.0.0.0:3000
info  - Loaded env from /home/nchiang/repos/tutorbook/.env
(node:30375) [DEP_WEBPACK_EXTERNALS_FUNCTION_PARAMETERS] DeprecationWarning: The externals-function should be defined like ({context, request}, cb) => { ... }
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:30375) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning: Compilation.chunks was changed from Array to Set (using Array method 'find' is deprecated)
error - ./.yarn/$$virtual/next-virtual-bd6fa6b147/0/cache/next-npm-9.5.1-e14f31e6e9-effa9056b8.zip/node_modules/next/dist/client/index.js
Module not found: next tried to access querystring, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: querystring (via "querystring")
Required by: next@virtual:b17e57c34ee4c6b233df1a3a139589ec11bfb014df22a34b79dcedd26a7fe182a25be10f2f1c79bfbe9a486560a139af8e03aca7d0382eefce37c81348d30b88#npm:9.5.1 (via /home/nchiang/repos/tutorbook/.yarn/$$virtual/next-virtual-bd6fa6b147/0/cache/next-npm-9.5.1-e14f31e6e9-effa9056b8.zip/node_modules/next/dist/client/)
error - ./.yarn/$$virtual/next-virtual-bd6fa6b147/0/cache/next-npm-9.5.1-e14f31e6e9-effa9056b8.zip/node_modules/next/dist/client/index.js
Module not found: next tried to access querystring, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: querystring (via "querystring")
Required by: next@virtual:b17e57c34ee4c6b233df1a3a139589ec11bfb014df22a34b79dcedd26a7fe182a25be10f2f1c79bfbe9a486560a139af8e03aca7d0382eefce37c81348d30b88#npm:9.5.1 (via /home/nchiang/repos/tutorbook/.yarn/$$virtual/next-virtual-bd6fa6b147/0/cache/next-npm-9.5.1-e14f31e6e9-effa9056b8.zip/node_modules/next/dist/client/)

[Kinbaum]

I get those as well. Supplying querystring as a dependency and adding it to the .yarnrc.yml as a peerDependency for next fixes that. Absolute imports are broken though.

[nicholaschiang]

Ah, @Kinbaum the querystring imports have nothing to do with this issue though (I just included those logs... which I probably shouldn't have). That's a Yarn v2 PNP issue (that should be opened separately).

And then @timneutkens some other issues when using Webpack v5:
(node:4886) [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE] DeprecationWarning: MainTemplate.hooks.require is deprecated (use JavascriptModulesPlugin.getCompilationHooks().renderRequire instead) (Use `node --trace-deprecation ...` to show where the warning was created) (node:4886) [DEP_WEBPACK_EXTERNALS_FUNCTION_PARAMETERS] DeprecationWarning: The externals-function should be defined like ({context, request}, cb) => { ... } (node:4886) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation. Do changes to assets earlier, e. g. in Compilation.hooks.processAssets. Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*. (node:4886) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning: Compilation.chunks was changed from Array to Set (using Array method 'find' is deprecated) (node:4886) [DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API (node:4886) [DEP_WEBPACK_MODULE_ID] DeprecationWarning: Module.id: Use new ChunkGraph API

[Kinbaum]

I think my issue is a valid webpack 5 resolution issue with jsconfig, well within the context of webpack 5 support. I was just addressing your log.

[timneutkens]

@Kinbaum can you create a github repo so that I can add it to the integration tests we have?

@nicholaschiang the warnings are expected as per the todo list at the top of the issue. Haven't worked on those yet given that they're non-critical

[jensmeindertsma]

I want to report an issue I've experienced caused by Webpack 5. I believe this is the right place?

Issue

My issue is related to the rendering of React Context Providers on the server-side. What I've gone and done is create a Next.js project with a React Context Provider wrapping every page in _app.tsx. This React Context is consumed in the page with useContext through a custom hook. When the page first renders on the server-side, the useContext returns the default value set in the createContext call instead of the value provided by the Provider. The first render on the client works fine, the useContext call returns the correct value. This doesn't happen with Webpack 4.

In order to verify this, I've created a basic app that just console.log's the Context value. This way both the server-side and client-side value are reported

// WEBPACK 4
// server
console.log(userContext) -> { name: "John" }
// client
console.log(userContext) -> { name: "John" }

// WEBPACK 5
// server
console.log(userContext) -> undefined
// client
console.log(userContext) -> { name: "John" }

This inconsistency breaks my project.

Please see the reproduction repository

It seems to be that this issue only starts occuring after the second compilation during development mode. The very first compilation still works fine.

[Kinbaum]

@Kinbaum can you create a github repo so that I can add it to the integration tests we have?

Hi @timneutkens, here is the reproduction repo

[jensmeindertsma]

I just rewrote my report & updated my reproduction repository to show only the absolute basic requirements to reproduce the error. I hope this helps 👍

[batusai513]

For me everything is working fine, dev and production builds, this is a medium size app with tailwind css. The only weird thing is the production build size is a bit bigger, but not that much:

Webpack 4

Page                                                           Size     First Load JS
┌ ● /                                                          9.95 kB        79.2 kB
├   └ css/2190b3fb6d1d0ad2d42b.css                             632 B
├   /_app                                                      0 B            64.9 kB
├ ○ /404                                                       3.03 kB        67.9 kB
├ λ /api/hello                                                 0 B            64.9 kB
├ ○ /dashboard                                                 263 B          69.5 kB
├ ○ /events                                                    263 B          69.5 kB
├ ○ /help                                                      261 B          69.5 kB
└ ○ /news                                                      261 B          69.5 kB
+ First Load JS shared by all                                  64.9 kB
  ├ chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.3cfdf7.js  4.65 kB
  ├ chunks/commons.3dfd2b.js                                   10.1 kB
  ├ chunks/framework.d55768.js                                 40 kB
  ├ chunks/main.4cf283.js                                      6.73 kB
  ├ chunks/pages/_app.0dbdb3.js                                2.24 kB
  ├ chunks/webpack.9f6eb1.js                                   1.21 kB
  └ css/cb41026fc56dc753707a.css                               2.64 kB

Webpack 5

Page                                                           Size     First Load JS
┌ ● /                                                          10.2 kB        79.8 kB
├   └ css/f514e409300bf656c791.css                             632 B
├   /_app                                                      0 B            65.2 kB
├ ○ /404                                                       2.97 kB        68.2 kB
├ λ /api/hello                                                 0 B            65.2 kB
├ ○ /dashboard                                                 267 B          69.8 kB
├ ○ /events                                                    262 B          69.8 kB
├ ○ /help                                                      262 B          69.8 kB
└ ○ /news                                                      263 B          69.8 kB
+ First Load JS shared by all                                  65.2 kB
  ├ chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005.cfb6eb.js  4.56 kB
  ├ chunks/commons.9952b5.js                                   9.99 kB
  ├ chunks/framework.15679f.js                                 40.3 kB
  ├ chunks/main.0e71c7.js                                      6.68 kB
  ├ chunks/pages/_app.b5eddc.js                                2.23 kB
  ├ chunks/webpack.f05468.js                                   1.49 kB
  └ css/12607d53c5831a4d60f7.css                               2.64 kB

And these are the warnings when building the production bundle:

(node:80834) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(node:80834) [DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(node:80834) [DEP_WEBPACK_CHUNK_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: ChunkTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(node:80834) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:80834) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hook.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(node:80834) [DEP_WEBPACK_EXTERNALS_FUNCTION_PARAMETERS] DeprecationWarning: The externals-function should be defined like ({context, request}, cb) => { ... }
info  - Using external babel configuration from /Users/richardroncancio/projects/betbox-web/.babelrc
(node:80834) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(node:80834) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning: Compilation.chunks was changed from Array to Set (using Array method 'reduce' is deprecated)
(node:80834) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET_LENGTH] DeprecationWarning: chunk.files was changed from Array to Set (using Array property 'length' is deprecated)
(node:80834) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET_INDEXER] DeprecationWarning: chunk.files was changed from Array to Set (indexing Array is deprecated)
(node:80834) [DEP_WEBPACK_MODULE_ID] DeprecationWarning: Module.id: Use new ChunkGraph API
(node:80834) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(node:80834) [DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API
(node:80834) [DEP_WEBPACK_CHUNK_GROUP_GET_MODULE_INDEX_2] DeprecationWarning: ChunkGroup.getModuleIndex2 was renamed to getModulePostOrderIndex
Creating an optimized production build 

[justsee]

Webpack 5.0.0-beta.22 appeared to work fine when I had a look recently. However Webpack 5.0.0-beta.23 appears to fail in resolving dynamic imports when a jsconfig.json file is used specifying "baseUrl": "."

The issue appears in this commit.

A minimal repro is here: https://github.com/justsee/webpack-dynamic-imports.

It just dynamically imports the vercel.svg logo in pages/index.js.

The successful commits output an error with the svg data, the failing commit displays: "Server Error Error: Cannot find module './vercel.svg'".

[MathiasKandelborg]

EDIT: I am forgetful. React is escaping things. To avoid issues in dynamic content a good way to ensure a character is displayed from JS is to use String.fromCharCode, a tip I got from this website after look around in NextJS. I somehow forgot that React escapes html, although it still worked before I updated to latest version of NextJS and Webpack 5.

The only reason I do this is because my syntax colors mess up when using characters like ( in jsx without escaping it.

[MathiasKandelborg]

It seems that css injection order is being messed up when using Material-UI.

Example:

I have a MenuItem component with custom styling using the makeStyles hook provided by Material-UI.

Without upgrade

• When the component is 'active' it has more styles applied to it.

With the upgrade

• The custom makeStyles hook style is applied _before_ the styles from the original component

The upgrade results in the custom style being completely ignored, with the added bonus of the component looking weird, because the injection order isn't right.

---

This is probably a problem in one of the packages with a warning for a missing webpack 4/5 dependency. I'm guessing it has something to do with css-loader, style-loader & mini-css-extract-plugin.

[Kinbaum]

@Kinbaum can you create a github repo so that I can add it to the integration tests we have?

Hi @timneutkens, here is the reproduction repo

I can confirm that the jsconfig.json issue is still present using [email protected] and [email protected]

[sokra]

@Kinbaum can you create a github repo so that I can add it to the integration tests we have?

Hi @timneutkens, here is the reproduction repo

I can confirm that the jsconfig.json issue is still present using [email protected] and [email protected]

The fix is here: https://github.com/webpack/webpack/pull/11259

We will release it soon

[Kinbaum]

Thanks @sokra

[sokra]

Should be fixed as of 5.0.0-beta.24

[Kinbaum]

Should be fixed as of 5.0.0-beta.24

Hi @sokra @timneutkens, I updated the webpack and the next versions and the error is still present. I've updated my reproduction repo to reflect it. This is the error I see in the terminal:

Module not found: Your application tried to access components, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: components (via "components/Header")
Required by: /broken-jsconfig/packages/next-app/pages/

  3 |  * This import throws an error when using webpack 5 resolution in monorepo
  4 |  */
> 5 | import Header from 'components/Header';
  6 | import styles from '../styles/Home.module.css'
  7 | 
  8 | export default function Home() {

[glenngijsberts]

Not sure if helpful, but:

webpack: ^5.0.0-beta.22,
next: ^9.5.1,
next-i18next: ^4.5.0

Saw the plan to add polyfills, will path also be added or should I include it myself?

[timneutkens]

Not sure if helpful, but:

webpack: ^5.0.0-beta.22,
next: ^9.5.1,
next-i18next: ^4.5.0

Saw the plan to add polyfills, will path also be added or should I include it myself?

This is expected as per the todo item:

Provide polyfills that were removed in webpack 5 like process and Buffer. We'll likely show a warning when a built-in Node.js module is used where it was not intended, this would ensure backwards compat and significantly less breakage in existing applications.

[Timer]

Hello everyone! We're going to close this issue because webpack 5 now works out-of-the box with Next.js, with only some warnings.

We've opened two follow up issues:

• Polyfill common Node.js packages for webpack 5: #15948
• Fix webpack 5 deprecation warnings: #15947

If you find any bugs that aren't related to those two issues above, please open a new issue so we can track and prioritize it accordingly. That'll let us fix things faster than comments on this thread, thank you!

[jensmeindertsma]

Does this means it works out of the box on the latest canary version *without* Yarn resolutions? I'm just not quite understanding _out of the box_.

[timneutkens]

Does this means it works out of the box on the latest canary version without Yarn resolutions? I'm just not quite understanding _out of the box_.

You still have to add resolutions, @timer was aiming at that it works automatically when you do add the resolutions.

[jeantil]

@timneutkens do you target a pinned resolution at v5.0.0-beta.22 or do you follow the latest beta ? (just to know if the version of webpack 5 matters or not)

[timneutkens]

You'll want to use the latest beta given there's tons of bugfixes in the latest release 👍

[agustif]

hey @timneutkens !
Should I be able to use next.config.js to enable webpack experiments alongside .babelrc file in my project?

I can't get top-level-await to work with custom babel, any ideas?

[timneutkens]

I would recommend not using experimental webpack features, especially top level await has a very high likelyhood of introducing slowdowns and performance problems in your application when used incorrectly.

[sebinsua]

Has anybody tried to use persistent caching yet?

[timneutkens]

@sebinsua persistent caching is configured in the latest canary. It still needs some improvements but initial results are great.

[jasonwilliams]

@timneutkens I hope this isn’t a silly question. How do we try out webpack 5 with this? Do we change resolutions in package.json? Or is there some flag to pass?

[timneutkens]

https://nextjs.org/blog/next-9-5#webpack-5-support-beta

Adding resolutions and potentially using the latest next@canary 👍

[jonawww]

Are there any suggestions on how to enable webpack 5 in combination with yarn workspaces? Since the resolutions feature only works in the top level package.json, I would not be able to use any other webpack versions. (e.g CRA still relies on webpack 4). Am I missing something?

[Toolo]

+1 to @jonawww

We have a monorepo with several apps, some of them are in the process of being migrated to webpack 5 (but they still depend on webpack 4) and then we have the NextJS app, so we can't rely on the top level resolutions. Is there any other way via configuration to switch to webpack 5?

Thanks

[sokra]

resolutions also supports partial overrides e.g. "myapp/**/webpack": "^5.3.1". See yarn documentation for details.

[Toolo]

@sokra thanks for the hint! I will definitely try it out 😃

[jonawww]

@sokra This did the trick, thanks a lot! 🙌

Edit: Seems like I was a little too hasty 😅 in my case I had to override it like "**/myapp/**/webpack": "^5.3.2"

[Xerkus]

Note that glob patterns are not allowed with yarn 2.
From yarn install:

The override for '**/webpack' includes a glob pattern. Glob patterns have been removed since their behaviours don't match what you'd expect. Set the override to 'webpack' instead.