@loadable/webpack-plugin hangs in production mode

[tadeuszwojcik]

🐛 Bug Report

Hi,
I'm trying to use loadable with setup similar to razzle one (two webpacks running, client and server), it looks promising, but have an issue with running it in production mode (it hangs the webpack build).
I've just cloned the repo and it seems that razzle example perfectly reproduces it.

To Reproduce

In examples/razzle run yarn build command.

Expected behavior

Should finish the build successfully.

I did some digging, and it happens only when adding filename option in plugin that is set to absolute path (https://github.com/smooth-code/loadable-components/blob/master/examples/razzle/razzle.config.js#L11) . If no filename is set then it doesn't hang (but still fails as server side code does not find the file).

I'm not really faimilar with webpack plugins, but if I remove code that adds the file to the compiler assets it seems to be fixing the issue (removed https://github.com/smooth-code/loadable-components/blob/master/packages/webpack-plugin/src/index.js#L25) . I know it may not be the best option.
What would love to have is that LoadablePlugin would work in production mode given (writeToDisk and filename path options - path that is resolved).

Love the lib so far btw - especially preload/prefetch feature!.

Thanks!

[gregberge]

Hello @tadeuszwojcik, I am sorry I don't have the time to dive in right now. I added "Help Wanted" flag, so if someone could help it would be nice!

[tadeuszwojcik]

@neoziro thanks for quick reply, fully understand.

I think current webpack plugin logic is a little bit incorrect (introduced when adding writeToDisk ), as it doesn't seem that one can add assets to compiler.assets as absolute path key (https://github.com/smooth-code/loadable-components/blob/master/packages/webpack-plugin/src/index.js#L25).
Filename should allow specifying only filename not full path, and there should be additional option (path? ) that would allow specifying where file should be saved (when writeToDisk is set). Would that make sense? If so I'll try to implement it when find some time, shouldn't be that hard. Thanks!

[gregberge]

@tadeuszwojcik yes you are right, the logic is a bit incorrect. I think we should not accept an absolute path. Webpack has an output path and we should respect it. So I think the best thing would be to warn if an absolute path is used and to remove that logic (https://github.com/smooth-code/loadable-components/blob/master/packages/webpack-plugin/src/index.js#L64).

What do you think?

[tadeuszwojcik]

@neoziro I gave it a shot at with #187 that solves all my issues currently .

[dlebedynskyi]

I believe absolute path is actually required here. At least once I wrote this it was needed for webpack dev server to actually output file.

[SheikhG1900]

🐛 Bug Report

Hi,
I'm trying to use loadable with setup similar to razzle one (two webpacks running, client and server), it looks promising, but have an issue with running it in production mode (it hangs the webpack build).
I've just cloned the repo and it seems that razzle example perfectly reproduces it.

To Reproduce

In examples/razzle run yarn build command.

Expected behavior

Should finish the build successfully.

I did some digging, and it happens only when adding filename option in plugin that is set to absolute path (https://github.com/smooth-code/loadable-components/blob/master/examples/razzle/razzle.config.js#L11) . If no filename is set then it doesn't hang (but still fails as server side code does not find the file).

I'm not really faimilar with webpack plugins, but if I remove code that adds the file to the compiler assets it seems to be fixing the issue (removed https://github.com/smooth-code/loadable-components/blob/master/packages/webpack-plugin/src/index.js#L25) . I know it may not be the best option.
What would love to have is that LoadablePlugin would work in production mode given (writeToDisk and filename path options - path that is resolved).

Love the lib so far btw - especially preload/prefetch feature!.

Thanks!

Thanks to help me to find the root cause of this hanging issue. :-)

Using relative path solved my issue.
I am using razzle too.
I replaced filename: path.join(__dirname, "build/react-loadable.json") to filename: "../react-loadable.json"