Support Webpack 5 #636
Comments
|
Hey @WaveString 👋, |
|
Is there any traction on this? Its a pretty straight forward fix and necessary if anybody wants to use this with Webpack 5 Module Federation. Easy solution with backward compatibility (might not be the prettiest) I'd be happy to submit a PR for it, however I could not find any information on contributing. |
|
This DeprecationWarning remains with the webpack plugin: It seems to come from loadable-components/packages/webpack-plugin/src/index.js Lines 32 to 39 in 4d38a98 |
|
The new version with webpack5 support has not yet been released. |
theKashey
changed the title
|
If any script will load before a From the user perspective, it is the same problem as explained in #634, which I've failed to reproduce on webpack4, but run using webpack 5 The only solution now is to (manually) supress async attribute (who was asking for |
|
v5.14.0 was released with webpack5 support. Which (i repeat) MIGHT NOT WORK |
|
@theKashey would the "might not work" disclaimer cover this example. May be related to #634 but the error is different.
And can also see those files have loaded in the network panel as I have also tried adding a runtime chunk by setting Is this a new issue with 5.14.0? |
|
@thomaswelton - webpack 4 or webpack 5? Where to look: it's not about which files got loaded, it about how they told webpack (or loadable) that they were loaded - check the first line of those scripts - it should contain our "callback" |
|
@theKashey Yep, Webpack 5. I was originally experiencing the same issue of the initial bug report, but am now seeing this new behaviour. I can no longer see anything like |
|
@theKashey My mistake. I had upgraded Once upgrading |
|
Keep in mind - That might work on your machine. There is a problem. |
|
We are not dependent on webpack for this change. While nice to have, we can work around the problem by adding our own runtimeRequirements. This is how module federation and server side code streaming works. We added our own chunkloading runtime requirements |
|
Any progress? |
|
Same issue for me ! This is the repo project https://github.com/tomtom94/react-easy-ssr I made well an upgrade of When I put this line in commentary the No worries we are good on Webpack 4 for the moment ;) No rush for me |
|
Go on team I know you can fix it, I'd like to help but my skills is just below amature level. I won't help jus wait |
|
For those looking to move forward with a webpack 5 upgrade, this plugin allows us to do so until webpack/webpack#11535 is merged. I'm sure there's a better way to do this, but it seems to do the trick 🤞 const { Template } = require('webpack');
const JsonpChunkLoadingRuntimeModule = require('webpack/lib/web/JsonpChunkLoadingRuntimeModule');
/**
* TODO: remove completely once https://github.com/webpack/webpack/pull/11535 lands in webpack
* ref: https://github.com/gregberge/loadable-components/issues/636
*/
module.exports = class RuntimeLoadDeferredChunksPlugin {
apply(compiler) {
compiler.hooks.compilation.tap('RuntimeLoadDeferredChunksPlugin', (compilation) => {
function generate() {
const {
outputOptions: { globalObject, chunkLoadingGlobal },
} = compilation;
const chunkLoadingGlobalExpr = `${globalObject}[${JSON.stringify(chunkLoadingGlobal)}]`;
// This ensures that chunks which are already pushed to the chunk array are processed once the runtime initializes
return Template.asString([
`chunkLoadingGlobal = (${chunkLoadingGlobalExpr} = ${chunkLoadingGlobalExpr} || []).slice();`,
`for (var i = 0; i < chunkLoadingGlobal.length; i++) ${chunkLoadingGlobalExpr}.push(chunkLoadingGlobal[i]);`,
]);
}
compilation.hooks.runtimeModule.tap('RuntimeLoadDeferredChunksPlugin', (module, chunk) => {
if (module instanceof JsonpChunkLoadingRuntimeModule) {
// Intercepting the JsonpChunkLoadingRuntimeModule so that we can change its output
const origGenerate = module.generate.bind(module);
module.generate = () => {
const result = origGenerate();
const newResult = generate();
return [result, newResult].join('\n');
};
}
});
});
}
}; |
|
@BRKalow Thanks, I'll try now |
|
The fix above works but if a lazy loaded chunk for some reason fails to load (such as analytics being blocked by ad blocker) it will fatally fail. |
|
Look like the root cause was just fixed in the webpack
Double checking... |
|
I've tried upgrading a rather large SSR app to Webpack 5 and things appear to be working with these packages I get a few warnings although it's hard to say which plugins may be causing them (node:30804) [DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(node:30804) [DEP_WEBPACK_CHUNK_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: ChunkTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
(node:30804) [DEP_WEBPACK_MAIN_TEMPLATE_HASH_FOR_CHUNK] DeprecationWarning: MainTemplate.hooks.hashForChunk is deprecated (use JavascriptModulesPlugin.getCompilationHooks().chunkHash instead)
(node:30804) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(node:30804) [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:30804) [DEP_WEBPACK_MODULE_ID] DeprecationWarning: Module.id: Use new ChunkGraph API
(node:30804) [DEP_WEBPACK_CHUNK_INTEGRATE] DeprecationWarning: Chunk.integrate: Use new ChunkGraph API
(node:30804) [DEP_WEBPACK_CHUNK_INTEGRATED_SIZE] DeprecationWarning: Chunk.integratedSize: Use new ChunkGraph API
(node:30804) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
(node:30804) [DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API
(node:30804) [DEP_WEBPACK_CHUNK_GROUP_GET_MODULE_INDEX_2] DeprecationWarning: ChunkGroup.getModuleIndex2 was renamed to getModulePostOrderIndex |
|
@tim-soft You can add |
|
@bertho-zero thanks for the tip! most of these appear to be from I actually don't see anything specifically mentioning loadable |
|
|
I just updated a custom SSR solution with react and express to webpack 5 (finally). Using the following packages : As @theKashey mentioned prior to this release my webpack builds would always fail. I can confirm using the latest version of webpack that my builds are successful now. @bertho-zero / @tim-soft Yet I also see a lot of deprecation warnings even tho the builds succeed and everything seems to be working according as prior to stacktrace :`➜ npm run build
(node:32341) [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:32380) [DEP_WEBPACK_CHUNK_INTEGRATE] DeprecationWarning: Chunk.integrate: Use new ChunkGraph API
However I am not using extract-css-chunks-webpack-plugin but mini-css-extract-plugin@1.3.3 |
|
Like it is said right here https://webpack.js.org/blog/2020-10-10-webpack-5-release/ You better make this upgrade on a smaller project, and check plugin by plugin. You can use my React Starter Kit with SSR and loadable component (We all have kind of the same architecture of SSR). Right here https://github.com/tomtom94/react-easy-ssr |
|
@bertho-zero I have applied the changes you made in this PR. I was getting one deprecation warning in my production setup because I was still using optimize-css-assets-webpack-plugin and as stated in the plugin's readme file for Thank y'all for your hard work. |
|
similar deprecation message as above: node v14 It is still working though. I am not using optimizee-css-assets-webpack-plugin, upgraded to the recommended css-minimizer-webpack-plugin. |
This comment has been minimized.
This comment has been minimized.
|
strike my last message, I changed my webpack config to use runtime chunk, it was an issue with material ui and styles being generated. |
|
@theKashey @bertho-zero - given the above comments - are you satisfied that everything is in working order or is there something specific that still needs to be ironed out? |
|
I know you are not asking me, but I think there's still something to be done. My particular setup is working, but still getting the message mentioned above |
|
@kelly-tock thanks for the input - my setup also appears to be working - but want to be sure I'm not missing anything that could be important :) |
|
Hi Just wanted to +1 here, as I'm also experiencing some issues with webpack 5. We're using the following dependencies: The issue we're facing is
Is there a tentative date for the release of the new version including the latest PRs? Thanks again for your hard work! 💪 |
|
Hi |
|
An update on our end: CC @Kavian77 😃 |
|
🐌 sounds like it's time to close this issue - webpack 5 was supported a month ago - https://github.com/gregberge/loadable-components/releases/tag/v5.14.2 |
|
Hello, may I know if there's any plan to publish v5.14.2 so that we can install via |
|
Hello @jsliang |
|
😨 I should change Lerna settings to publish all packages, no matter changed they or not, simultaneously in order to preserve version "generation" and help you update necessary things. |
Thanks for the suggestion, @Kavian77. But this does not work for me. 😢 My package versions:
And with this set of packages, I'm seeing this error |
|
@jsliang - there is a line in code that generates that line - and it means that loadable-server is not 5.14 -_ext script tag, with chunk names inside is missing.
Please double check your configuration and feel free to open another issue - it is not related to webpack5 |
|
Thanks for the explanation, @theKashey. I thought the message meant the versions need to be exactly the same one, so I assumed this was the reason that blocks the packages from working with webpack 5. I'll check my configuration again then. |
Dos this work in webpack 5, how to use this? |
🐛 Bug Report
When I build with webpack 5.0.0-rc.0, I have an error
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Object, because inloadable-stats.jsonfieldassetsgenerated asbut
chunkExtractorexpectsTo Reproduce
Steps to reproduce the behavior:
Expected behavior
Support new schema of assets
The text was updated successfully, but these errors were encountered: