Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Webpack 5 #636

Closed
WaveString opened this issue Sep 29, 2020 · 43 comments
Closed

Support Webpack 5 #636

WaveString opened this issue Sep 29, 2020 · 43 comments
Assignees
Labels

Comments

@WaveString
Copy link

🐛 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 in loadable-stats.json field assets generated as

 "assets": [{ "name": "assetname.js" }]

but chunkExtractor expects

"assets": ["assetname.js"]

To Reproduce

Steps to reproduce the behavior:

  1. Use webpack 5.0.0-rc.0
  2. loadable-stats:
 "assets": [
        {
          "name": "assetname.js"
        }
  ]

Expected behavior

Support new schema of assets

## System:
 - OS: macOS 10.15.6
 - CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
 - Memory: 1.45 GB / 16.00 GB
 - Shell: 5.7.1 - /bin/zsh
## Binaries:
 - Node: 14.9.0 - ~/.nvm/versions/node/v14.9.0/bin/node
 - Yarn: 1.22.4 - /usr/local/bin/yarn
 - npm: 6.14.8 - ~/.nvm/versions/node/v14.9.0/bin/npm
## npmPackages:
 - @loadable/babel-plugin: 5.13.2 => 5.13.2 
 - @loadable/component: 5.13.2 => 5.13.2 
 - @loadable/server: 5.13.2 => 5.13.2 
 - @loadable/webpack-plugin: 5.13.0 => 5.13.0 
@open-collective-bot
Copy link

Hey @WaveString 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us ❤️.

@theKashey theKashey self-assigned this Sep 30, 2020
@jandvik
Copy link

jandvik commented Oct 9, 2020

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)

createChunkAsset({ filename, chunk, type, linkType }) {
    let cleanFilename = typeof filename === 'object' && filename.name ? filename.name : filename
    return {
      cleanFilename,
      scriptType: extensionToScriptType(
        path
          .extname(cleanFilename)
          .split('?')[0]
          .toLowerCase(),
      ),
      chunk,
      url: this.resolvePublicUrl(cleanFilename),
      path: path.join(this.outputPath, cleanFilename),
      type,
      linkType,
    }
  }

I'd be happy to submit a PR for it, however I could not find any information on contributing.

@bertho-zero
Copy link
Contributor

This DeprecationWarning remains with the webpack plugin:

(node:25017) [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_*.
    at /my-package/node_modules/@loadable/webpack-plugin/lib/index.js:32:49
    at Hook.eval [as callAsync] (eval at create (/my-package/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:28:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/my-package/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.emitAssets (/my-package/node_modules/webpack/lib/Compiler.js:736:19)
    at /my-package/node_modules/webpack/lib/Compiler.js:395:10
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

It seems to come from

hookCompiler.assets[this.opts.filename] = {
source() {
return result
},
size() {
return result.length
},
}

@theKashey
Copy link
Collaborator

The new version with webpack5 support has not yet been released.
I am working on a proper test to ensure everything is working properly.

@theKashey theKashey changed the title TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Object Support Webpack 5 Oct 20, 2020
@theKashey
Copy link
Collaborator

If any script will load before a runtime chunk (or if you dont have runtimechunk) - loadable will break your application.
We depend on webpack/webpack#11535 to fix it.

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 defer 😅?)

@theKashey
Copy link
Collaborator

v5.14.0 was released with webpack5 support. Which (i repeat) MIGHT NOT WORK

@thomaswelton
Copy link

@theKashey would the "might not work" disclaimer cover this example. May be related to #634 but the error is different.

loadableReady is no longer firing for me.
I can see these added as the required chunks

<script id="__LOADABLE_REQUIRED_CHUNKS__" type="application/json">["common","page-home","component-modal"]</script>
<script id="__LOADABLE_REQUIRED_CHUNKS___ext" type="application/json">{"namedChunks":["page-home","component-modal"]}</script>

And can also see those files have loaded in the network panel as common.a94b9516.chunk.js page-home.e7302146.chunk.js and component-modal.4523c4ea.chunk.js

I have also tried adding a runtime chunk by setting optimization.runtimeChunk: true in my webpack config.
And also disabling async and defer with

extractor.getScriptElements({
      async: false,
      defer: false
    })

Is this a new issue with 5.14.0?

@theKashey
Copy link
Collaborator

@thomaswelton - webpack 4 or webpack 5?
The problem in both cases is related to loadableReady firing too early, not the opposite like in your case.

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"

(self["__LOADABLE_LOADED_CHUNKS__"] = self["__LOADABLE_LOADED_CHUNKS__"] || []).push([["letters-A"],{

/***/ "./src/client/letters/A.js":

@thomaswelton
Copy link

@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 __LOADABLE_LOADED_CHUNKS__ in any of the files that are being loaded on the page, even though they are being added via extractor.getScriptElements

@thomaswelton
Copy link

@theKashey My mistake. I had upgraded @loadable/server and @loadable/component but I had not upgraded @loadable/webpack-plugin

Once upgrading @loadable/webpack-plugin it works as expected.
Thank you for quick reply and update.

@theKashey
Copy link
Collaborator

Keep in mind - That might work on your machine. There is a problem.

@ScriptedAlchemy
Copy link

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

@xnerhu
Copy link

xnerhu commented Nov 5, 2020

Any progress?

@tomtom94
Copy link

Same issue for me !

This is the repo project https://github.com/tomtom94/react-easy-ssr

I made well an upgrade of

@loadable/component @loadable/server @loadable/webpack-plugin @loadable/babel-plugin

When I put this line in commentary the DeprecetationWarning disappears.
https://github.com/tomtom94/react-easy-ssr/blob/master/webpack/webpack.client.dev.js#L32

(node:25418) [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_*.

No worries we are good on Webpack 4 for the moment ;) No rush for me

@duterte
Copy link

duterte commented Nov 29, 2020

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

@BRKalow
Copy link
Contributor

BRKalow commented Dec 10, 2020

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

@ogarich89
Copy link

@BRKalow Thanks, I'll try now

@wille
Copy link

wille commented Dec 14, 2020

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.

@theKashey
Copy link
Collaborator

Look like the root cause was just fixed in the webpack

Double checking...

@tim-soft
Copy link

tim-soft commented Dec 17, 2020

I've tried upgrading a rather large SSR app to Webpack 5 and things appear to be working with these packages

"webpack": "5.11.0",
"@loadable/babel-plugin": "5.13.2",
"@loadable/webpack-plugin": "5.14.0",
"@loadable/component": "5.14.1",
"@loadable/server": "5.14.0",

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

@bertho-zero
Copy link
Contributor

@tim-soft You can add NODE_OPTIONS="--trace-deprecation" before your command for add the stacktrace.

@tim-soft
Copy link

@bertho-zero thanks for the tip! most of these appear to be from extract-css-chunks-webpack-plugin which already has an issue faceyspacey/extract-css-chunks-webpack-plugin#302

I actually don't see anything specifically mentioning loadable

@bertho-zero
Copy link
Contributor

This DeprecationWarning remains with the webpack plugin:

(node:25017) [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_*.
    at /my-package/node_modules/@loadable/webpack-plugin/lib/index.js:32:49
    at Hook.eval [as callAsync] (eval at create (/my-package/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:28:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/my-package/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.emitAssets (/my-package/node_modules/webpack/lib/Compiler.js:736:19)
    at /my-package/node_modules/webpack/lib/Compiler.js:395:10
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

It seems to come from

hookCompiler.assets[this.opts.filename] = {
source() {
return result
},
size() {
return result.length
},
}

@jetmirshatri
Copy link

I just updated a custom SSR solution with react and express to webpack 5 (finally).

Using the following packages :

"dependencies": {
"@loadable/component": "^5.14.1",
"@loadable/server": "^5.14.0"
},
"devDependencies": {
"@loadable/babel-plugin": "^5.13.2",
"@loadable/webpack-plugin": "^5.14.0"
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0"
}

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 webpack@4.

stacktrace : `➜ npm run build

@ build my/app/src/dir
npm run webpack:production && npm run server:production
@ prewebpack:production my/app/src/dir
npm run rimraf:production && npm run mkdirp:production
@ rimraf:production my/app/src/dir
rimraf build/client/production && rimraf build/server/production
@ mkdirp:production my/app/src/dir
mkdirp build/client/production && mkdirp build/server/production
@ webpack:production my/app/src/dir
npm run webpack:client:production && npm run webpack:server:production
@ webpack:client:production my/app/src/dir
NODE_OPTIONS="--trace-deprecation" webpack-cli --config webpack/client.production.config.webpack.ts

(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)
at my/app/src/dir/node_modules/last-call-webpack-plugin/src/index.js:176:49
at _next30 (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:19:10), :42:1)
at _next8 (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:19:10), :95:1)
at Hook.eval (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:19:10), :115:1)
at Hook.CALL_DELEGATE [as _call] (my/app/src/dir/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (my/app/src/dir/node_modules/webpack/lib/Compiler.js:988:26)
at my/app/src/dir/node_modules/webpack/lib/Compiler.js:1029:29
at Hook.eval [as callAsync] (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:33:10), :4:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (my/app/src/dir/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.compile (my/app/src/dir/node_modules/webpack/lib/Compiler.js:1024:28)
(node:32341) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
at my/app/src/dir/node_modules/webpack/lib/TemplatedPathPlugin.js:90:3
at my/app/src/dir/node_modules/webpack/lib/TemplatedPathPlugin.js:297:12
at String.replace ()
at replacePathVariables (my/app/src/dir/node_modules/webpack/lib/TemplatedPathPlugin.js:290:14)
at Hook.eval (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:19:10), :5:16)
at Hook.CALL_DELEGATE [as call] (my/app/src/dir/node_modules/tapable/lib/Hook.js:14:14)
at Compilation.getAssetPath (my/app/src/dir/node_modules/webpack/lib/Compilation.js:3381:31)
at Compilation.getPath (my/app/src/dir/node_modules/webpack/lib/Compilation.js:3357:15)
at addStaticUrl (my/app/src/dir/node_modules/webpack/lib/runtime/GetChunkFilenameRuntimeModule.js:143:44)
at GetChunkFilenameRuntimeModule.generate (my/app/src/dir/node_modules/webpack/lib/runtime/GetChunkFilenameRuntimeModule.js:172:29)
(node:32341) [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
*.
at my/app/src/dir/node_modules/@loadable/webpack-plugin/lib/index.js:32:49
at Hook.eval [as callAsync] (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:33:10), :19:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (my/app/src/dir/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.emitAssets (my/app/src/dir/node_modules/webpack/lib/Compiler.js:808:19)
at my/app/src/dir/node_modules/webpack/lib/Compiler.js:413:10
at processTicksAndRejections (internal/process/task_queues.js:79:11)
[webpack-cli] Compilation finished

@ webpack:server:production my/app/src/dir
NODE_OPTIONS="--trace-deprecation" webpack-cli --config webpack/server.production.config.webpack.ts

(node:32380) [DEP_WEBPACK_CHUNK_INTEGRATE] DeprecationWarning: Chunk.integrate: Use new ChunkGraph API
at Function.getChunkGraphForChunk (my/app/src/dir/node_modules/webpack/lib/ChunkGraph.js:1402:10)
at Chunk.integrate (my/app/src/dir/node_modules/webpack/lib/Chunk.js:257:33)
at my/app/src/dir/node_modules/webpack/lib/optimize/LimitChunkCountPlugin.js:178:13
at Hook.eval (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:19:10), :23:16)
at Hook.CALL_DELEGATE [as _call] (my/app/src/dir/node_modules/tapable/lib/Hook.js:14:14)
at Compilation.seal (my/app/src/dir/node_modules/webpack/lib/Compilation.js:1994:36)
at my/app/src/dir/node_modules/webpack/lib/Compiler.js:1050:20
at my/app/src/dir/node_modules/webpack/lib/Compilation.js:1818:4
at _next4 (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:33:10), :23:1)
at eval (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:33:10), :68:1)
(node:32380) [DEP_WEBPACK_CHUNK_INTEGRATED_SIZE] DeprecationWarning: Chunk.integratedSize: Use new ChunkGraph API
at Function.getChunkGraphForChunk (my/app/src/dir/node_modules/webpack/lib/ChunkGraph.js:1402:10)
at Chunk.integratedSize (my/app/src/dir/node_modules/webpack/lib/Chunk.js:326:33)
at my/app/src/dir/node_modules/webpack/lib/optimize/LimitChunkCountPlugin.js:225:50
at Hook.eval (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:19:10), :23:16)
at Hook.CALL_DELEGATE [as _call] (my/app/src/dir/node_modules/tapable/lib/Hook.js:14:14)
at Compilation.seal (my/app/src/dir/node_modules/webpack/lib/Compilation.js:1994:36)
at my/app/src/dir/node_modules/webpack/lib/Compiler.js:1050:20
at my/app/src/dir/node_modules/webpack/lib/Compilation.js:1818:4
at next4 (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:33:10), :23:1)
at eval (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:33:10), :68:1)
(node:32380) [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
*.
at my/app/src/dir/node_modules/@loadable/webpack-plugin/lib/index.js:32:49
at Hook.eval [as callAsync] (eval at create (my/app/src/dir/node_modules/tapable/lib/HookCodeFactory.js:33:10), :5:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (my/app/src/dir/node_modules/tapable/lib/Hook.js:18:14)
at Compiler.emitAssets (my/app/src/dir/node_modules/webpack/lib/Compiler.js:808:19)
at my/app/src/dir/node_modules/webpack/lib/Compiler.js:413:10
at processTicksAndRejections (internal/process/task_queues.js:79:11)
[webpack-cli] Compilation finished

@ server:production my/app/src/dir
tsc --esModuleInterop --resolveJsonModule --removeComments true --skipLibCheck true --incremental --tsBuildInfoFile dist/.tsbuildinfo --outDir dist server.ts`

However I am not using extract-css-chunks-webpack-plugin but [email protected]

@tomtom94
Copy link

tomtom94 commented Dec 17, 2020

Like it is said right here https://webpack.js.org/blog/2020-10-10-webpack-5-release/ Webpack 5 is a breaking change.

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

@jetmirshatri
Copy link

@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 webpack 5 you should use css-minimizer-webpack-plugin which I did and updated my setup and I can confirm all my deprecations warnings are now gone 😄.

Thank y'all for your hard work.

@kelly-tock
Copy link

kelly-tock commented Dec 22, 2020

similar deprecation message as above:

(node:35772) [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_*.
    at /Users/kelly/tock/admin/consumer/node_modules/@loadable/webpack-plugin/lib/index.js:32:49
    at Hook.eval [as callAsync] (eval at create (/Users/kelly/tock/admin/consumer/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/kelly/tock/admin/consumer/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.emitAssets (/Users/kelly/tock/admin/consumer/node_modules/webpack/lib/Compiler.js:808:19)
    at /Users/kelly/tock/admin/consumer/node_modules/webpack/lib/Compiler.js:413:10
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

node v14

"@loadable/babel-plugin": "^5.13.2",
 "@loadable/webpack-plugin": "^5.14.0",
"@loadable/component": "^5.14.1",
 "@loadable/server": "^5.14.0",

It is still working though. I am not using optimizee-css-assets-webpack-plugin, upgraded to the recommended css-minimizer-webpack-plugin.

@kelly-tock

This comment has been minimized.

@kelly-tock
Copy link

kelly-tock commented Jan 8, 2021

strike my last message, I changed my webpack config to use runtime chunk, it was an issue with material ui and styles being generated.

@philmoreira
Copy link

@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?

@kelly-tock
Copy link

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

@philmoreira
Copy link

@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 :)

@Toolo
Copy link

Toolo commented Jan 28, 2021

Hi

Just wanted to +1 here, as I'm also experiencing some issues with webpack 5.

We're using the following dependencies:

"@loadable/babel-plugin": "^5.13.2",
"@loadable/webpack-plugin": "^5.14.0",
"@loadable/component": "^5.14.1",
"@loadable/server": "^5.14.0",
"webpack": "^5.18.0"

The issue we're facing is loadableReady won't be triggered client-side. I can confirm the following items from other comments above:

  • __LOADABLE_REQUIRED_CHUNKS__ is present
  • __LOADABLE_REQUIRED_CHUNKS__ext is present
  • The defer hack doesn't work
  • The plugin workaround doesn't work
  • Using style-loader instead of MiniCssExtractPlugin.loader makes loadableReady work in the client-side, which leads me to think this is another case of LoadableReady not be called if required chunks have a chunk only contains css. #688. The PR to ofix it would probably solve our specific use-case as well 🤞

Is there a tentative date for the release of the new version including the latest PRs?

Thanks again for your hard work! 💪

@Kavian77
Copy link

Hi
Any update or plan on this?

@Toolo
Copy link

Toolo commented Feb 22, 2021

An update on our end: 5.14.2 fixed our issues.

CC @Kavian77 😃

@theKashey
Copy link
Collaborator

🐌 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

@jsliang
Copy link

jsliang commented Feb 24, 2021

Hello, may I know if there's any plan to publish v5.14.2 so that we can install via npm?

@Kavian77
Copy link

Hello @jsliang
It seems there is no v5.14.2 for @loadable/component. Updating @loadable/server and @loadable/webpack-plugin to v5.14.2 solved my problem.
You can see versions here:
https://github.com/gregberge/loadable-components/tree/main/packages

@theKashey
Copy link
Collaborator

😨 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.

@jsliang
Copy link

jsliang commented Feb 26, 2021

Hello @jsliang
It seems there is no v5.14.2 for @loadable/component. Updating @loadable/server and @loadable/webpack-plugin to v5.14.2 solved my problem.
You can see versions here:
https://github.com/gregberge/loadable-components/tree/main/packages

Thanks for the suggestion, @Kavian77. But this does not work for me. 😢

My package versions:

  • @loadable/component: v5.14.1
  • @loadable/server: v5.14.2
  • @loadable/webpack-plugin: v5.14.2

And with this set of packages, I'm seeing this error Error: loadable-component: @loadable/server does not match @loadable/component in loadableReady. So I thought @loadable/component being v5.14.2 would fix this.

@theKashey
Copy link
Collaborator

@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

@jsliang
Copy link

jsliang commented Mar 2, 2021

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.

@hansiemithun
Copy link

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

Dos this work in webpack 5, how to use this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests