Webpack 5 support #13341
Comments
|
@timneutkens If there is anything you would let a non-maintainer help with, I'd be glad to assist. |
|
Having the following error, but probably it's related to Theme-UI and they should support Webpack 5 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: to right? |
Same error happens to AWS-amplify library. |
|
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:
Notes: Didn't add |
Then this is off topic, please create a new issue. |
|
Hi, I'm trying to add the webpack 5 beta too but I have this error on compilation:
I have no custom webpack config and I'm using |
Are you sure you don't have anything in |
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: {
...
},
}) |
|
So that likely edits the webpack config in a wrong way which is a bug in that library. |
Yes it is: switching to the |
|
How can I test this with npm instead of yarn? |
You can't currently because npm does not support resolutions afaik. |
|
Running webpack 5, everything still works for me with the following deprecation warnings. Creating a new nextjs app, I get the same deprecation warnings. |
|
@sebinsua persistent caching is configured in the latest canary. It still needs some improvements but initial results are great. |
|
@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? |
|
https://nextjs.org/blog/next-9-5#webpack-5-support-beta Adding resolutions and potentially using the latest |
|
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? |
|
+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 Thanks |
|
|
|
@sokra thanks for the hint! I will definitely try it out 😃 |
|
@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 |
|
Note that glob patterns are not allowed with yarn 2.
|
|
In my case adding the resolutions I got this warning:
And checking |
same as @aralroca while using yarn workspaces and |
|
If anyone is struggling with getting rid of webpack v4 from the dependency tree while using NPM v7, I've documented a solution: #!/usr/bin/env node
/* eslint-disable unicorn/prevent-abbreviations */
/* eslint-disable import/unambiguous */
/* eslint-disable import/no-commonjs */
/* eslint-disable node/shebang */
const fs = require('fs').promises;
const path = require('path');
const main = async (resolutions) => {
const packageLockFilePath = path.resolve(__dirname, '../package-lock.json');
for (const [name, version] of Object.entries(resolutions)) {
const packageLock = JSON.parse(await fs.readFile(packageLockFilePath));
const packagePaths = Object.keys(packageLock.packages);
const deletePaths = [];
for (const packagePath of packagePaths) {
if (packagePath.endsWith('/' + name)) {
if (packageLock.packages[packagePath].version !== version) {
deletePaths.push(packagePath);
}
}
}
for (const packagePath of deletePaths) {
for (const deletePath of deletePaths) {
if (packagePath === deletePath || packagePath.startsWith(deletePath + '/')) {
// eslint-disable-next-line fp/no-delete
delete packageLock.packages[packagePath];
}
}
}
await fs.writeFile(
packageLockFilePath,
JSON.stringify(packageLock, null, ' '),
);
}
};
main(require('../package.json').resolutions);Explanation in the Stack Overflow answer: |
|
@Xerkus @outerlook @gajus Ran into same issue, got storybook running in monorepo which doesnt support webpack v5 yet, since yarn v2 I saw yarn workspaces has |
|
I just tried out Webpack 5 on a next's 10.0.3 project. Build time seemed to actually increase: with Webpack 4: Executed in 151.61 secs fish external
usr time 230.24 secs 125.00 micros 230.24 secs
sys time 13.69 secs 625.00 micros 13.69 secs with Webpack 5: Executed in 167.02 secs fish external
usr time 492.86 secs 161.00 micros 492.86 secs
sys time 69.28 secs 906.00 micros 69.28 secs I should expect faster build times, no? I also saw a JavaScript OOM exception once: info - Using external babel configuration from /Users/ujwal/Work/byte/software/repos/micro/dashboard/.babelrc
info - Creating an optimized production build .
<--- Last few GCs --->
[1332:0x110008000] 149669 ms: Mark-sweep 2014.8 (2101.4) -> 2014.7 (2060.6) MB, 993.7 / 0.0 ms (average mu = 0.233, current mu = 0.000) last resort GC in old space requested
[1332:0x110008000] 150693 ms: Mark-sweep 2014.7 (2060.6) -> 2014.7 (2055.6) MB, 1023.7 / 0.0 ms (average mu = 0.125, current mu = 0.000) last resort GC in old space requested
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 0x1009dcbd9]
1: StubFrame [pc: 0x100a1900f]
Security context: 0x2050d0a408d1 <JSObject>
2: replace [0x2050d0a4cc71](this=0x205134b80119 <Very long string[67684575]>,0x2050f12cb1e9 <JSRegExp <String[67]: (\\)?"@__(F|R|D|M|S|U|I|B)-b8a6f9ee4b77bb1b764a3bb3b52e1c-(\d+)__@">>,0x2050b395ca99 <JSFunction (sfi = 0x2050ee27c689)>)
3: serialize(aka serialize) [0x20502fa272b9] [/Users/ujwal/Work/byte/software/repos...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: 0x1011d1cc5 node::Abort() (.cold.1) [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
2: 0x10009f919 node::Abort() [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
3: 0x10009fa7f node::OnFatalError(char const*, char const*) [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
4: 0x1001e38b7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
5: 0x1001e3857 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
6: 0x10036b9e5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
7: 0x100373a8c v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
8: 0x10033fe0d v8::internal::Factory::NewFixedArrayWithFiller(v8::internal::RootIndex, int, v8::internal::Object, v8::internal::AllocationType) [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
9: 0x100710002 v8::internal::FixedArrayBuilder::EnsureCapacity(v8::internal::Isolate*, int) [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
10: 0x1006bb42b v8::internal::Runtime_RegExpExecMultiple(int, unsigned long*, v8::internal::Isolate*) [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
11: 0x1009dcbd9 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/var/folders/yg/8_rbwqbx51b5xn2_93_y43y00000gn/T/fnm_multishell_75535_1608360666435/bin/node]
sh: line 1: 1332 Abort trap: 6 next build
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! [email protected] build: `npm run clean && next build`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ujwal/.npm/_logs/2020-12-21T18_59_02_529Z-debug.log
|
|
when Next seems to partially ignore and creates some files in |
|
That's fixed already on next@canary. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
and others
Follow-up of #9426, opening this as the overarching issue on what to solve:
resolutionsto webpack 5 use the webpack 5 implementation initially (to allow canary testing / canary to keep being released without any breaking changes)processandBuffer. 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.processandbuffer: Add polyfill for process and Buffer in webpack 5 #15499The text was updated successfully, but these errors were encountered: