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

fix issue with @loadable/webpack-plugin not working in production mode and SSR #187

Merged
merged 4 commits into from
Jan 17, 2019
Merged

Conversation

tadeuszwojcik
Copy link
Contributor

This is my stab at #179 .

I've added path option to the webpack plugin, that allows specifying where loadable-stats are written to when writeToDisk option is set to true. This way webpack assets compiler always use filename and not absolute path when adding loadable stats to the assets. If path is not set by default loadable-stats are written to output.path set in webpack config.

I also fixed issue I had with eval('module.require') trick as it was throwing errors (eval is not a function). I've replaced it with __non_webpack_require__ and that seems to be working fine.

I've tested it with razzle example in the repo and it works fine both in dev and production mode (after yarn build command).

Closes #179

…pecyfying where loadable-stats are written to when writeToDisk option is set to true
…al('module.require') was throwing errors server side
@tadeuszwojcik tadeuszwojcik changed the title fix issue with @loadable/webpack-plugin not working in production mode in some cases fix issue with @loadable/webpack-plugin not working in production mode and SSR Dec 14, 2018
Copy link
Owner

@gregberge gregberge left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am sorry but it does not work. Your path option is only used if writeToDisk is set to true. It is confusing. All webpack assets are generated into outputPath, so what should we specify another path for this specific file? I think the path option is not relevant.

}

// eslint-disable-next-line global-require, import/no-dynamic-require
return require(modulePath)
Copy link
Owner

@gregberge gregberge Dec 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you sure that it will not cause any error or warning when built using webpack?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, tried that with razzle that uses webpack for the server bundle as well

@gregberge
Copy link
Owner

gregberge commented Dec 16, 2018

@tadeuszwojcik thanks for your work, but it is important to keep it consistent and compliant with webpack ecosystem.

@tadeuszwojcik
Copy link
Contributor Author

tadeuszwojcik commented Dec 16, 2018

@neoziro thanks for taking the time and looking into this, I've used the path in the same way that https://github.com/ztoben/assets-webpack-plugin/blob/master/readme.md uses, happy to continue this conversation after Christmas as I'm on holidays right now. Please don't close/rejected it before then, I'll try to put more details about rationale of this pull request and why it's essential for razzle and razzle like setups! Thanks!

@gregberge
Copy link
Owner

@tadeuszwojcik OK, if assets-webpack-plugin does it, it is probably a good thing. Maybe we could just always write it to disk, so the path option would not be confusing. Happy holidays, we can talk about it next year!

@tutok
Copy link

tutok commented Dec 18, 2018

@neoziro What is the status of this issue? Is there anything that you would like to change and/or you are not sure about? Maybe I can help somehow?

From my perspective changes done by @tadeuszwojcik are ok. Actually, many webpack loaders/plugins follow that pattern were output path can be overridden, e.g. file-loader

@gregberge
Copy link
Owner

@tutok my concern is that is an absolute output path is specified it will be written in two different folders: https://github.com/smooth-code/loadable-components/pull/187/files#diff-567a0d765f93649fdd2c856a649ba64bR29

I think it is not good. This is the only blocking point.

@dlebedynskyi
Copy link
Contributor

@tadeuszwojcik @neoziro
When I wrote original version it was expected that when using writeToDisk, filename must be an absolute path.
This was done for

  • webpack dev server to actually write file on file system.
  • most cases you don't want to output assets file at same level as you browser assets. kinda extra security level.

currently we are using webpack dev server for client bundle and output is

build/
- assets.json 
- /dist/ 
  - client.bundle.js

where asset.json absolute build path.

we can check this logic that I used as reference back then.

@gregberge
Copy link
Owner

With the actual code, stats will be written two times if writeToDisk is set to true. It is not good for me. I think we have to change the API:

new LoadablePlugin({ writeToDisk: { filename: '/your/custom/path/loadable-stats.json' } })

This way it is clear that the asset will be written to disk at a specific location. We can also add a config option outputAsset that will control if a new asset is added or not.

What do you think?

@tutok
Copy link

tutok commented Dec 28, 2018

@neoziro you mean writeToDisk could be {filename: string} or boolean right? for me this is ok.

btw. is even loadable-stats.json an webpack asset? Maybe this file should not be considered as webpack asset as it contains rather metadata about them. Moreover loadable-stats.json is not event used by "client" build, it is especially created for "server" build for SSR. (And actually it explain why it is good to not keep this file inside "client" output directory)

@gregberge
Copy link
Owner

@tutok yeah this is what I mean for writeToDisk option. I understand your point but I think it is simpler by default to emit it from webpack assets. Also in a specific configuration people could want it to not be written on the disk (SSR).

@tadeuszwojcik
Copy link
Contributor Author

@neoziro I've pushed the change with writeToDisk {filename: string} change, hopefully it will make webpack-plugin API more self explaining.

@gregberge
Copy link
Owner

I am sorry, I would like you to make one last change to make it easy for users:

  • writeToDisk can be set to true, false or { filename: "..." }, it is false by default
  • false will not write to disk (default value)
  • true will write to disk using filename (exactly like today)
  • { filename: "..." } will write to disk to a custom location

Can you also add a outputAsset option?

  • outputAsset can be set to true
  • it is true by default
  • true will append stats into assets (like today)
  • false will not append stats into assets

This way we could do:

new LoadablePlugin({ outputAsset: false, writeToDisk: { filename: 'my/custom/stats.json' })

I think the API is great and can handle all cases.

@gregberge gregberge closed this Jan 4, 2019
@dlebedynskyi
Copy link
Contributor

dlebedynskyi commented Jan 4, 2019

@neoziro I don't think you last comment was for this issue. Probably should not close this ticket either

@gregberge gregberge reopened this Jan 4, 2019
@gregberge
Copy link
Owner

Oups sorry!

@gregberge
Copy link
Owner

@tadeuszwojcik any update?

- outputAsset option boolean flag
- change writeToDisk option to accept true/false of filename
@tadeuszwojcik
Copy link
Contributor Author

@neoziro sorry for delay, I've updated plugin with new API as requested, hope it's fine now. I didn't have time for updating docs yet, so hopefully someone else would be able to cover that. Thanks!

@tutok
Copy link

tutok commented Jan 16, 2019

@neoziro can we merge?

@gregberge gregberge merged commit 4a6f84f into gregberge:master Jan 17, 2019
@gregberge
Copy link
Owner

Thanks for your work!

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

Successfully merging this pull request may close these issues.

@loadable/webpack-plugin hangs in production mode
4 participants