reactredux template error on publish Error in vendorjs from UglifyJs

[richardjharding]

Just installed the templates using the latest tooling and created a new reactredux project

restore and build succeed but publish fails - it seems to be an error attempting to webpack the vendor chunk when in production mode

If I attempt to run the following at the cmd line
webpack.js --config webpack.config.vendor.js --env.prod

I get the following error

ERROR in vendor.js from UglifyJs SyntaxError: Unexpected token: name (b) [vendor.js:34464,5]

That line in vendor.js is

let b = new Big(0);

If I run webpack without the --env.prod switch it succeeds

I get a similar error with the react template

this looks to be an issue with outputing es6 that uglify doesn't understand?

[pdl5p]

I've been staring at this for a while too.

I've managed to narrow the problem down to the style-loader module that is included in the sharedConfig/entry/vendor array in webpack.config.vendor.js

If I remove style-loader from the array the webpack prod build is successful, and so far the app seems to work ok.

I thought style-loader was a webpack loader so not sure if trying to include it in the vendor bundle is a bug?

[grufffta]

You can fix this by editing the webpack.config.vendor.js

module: { rules: [ { test: /.*style-loader.*\.jsx?$/, use: 'babel-loader'}, ...

[richardjharding]

yep that fixed it - but I'm not sure I understood why - when pdl5p pointed at it as being the cause and questioned where it needed to be in vendor chunk - I looked for examples of loading styles at via the style-loader eg calls like

var style = require("style-loader!css-loader!./file.css");

But couldn't find any in the source - so how does adding the test to the rules tell webpack that the script-loader source needs to be run through babel ?

[grufffta]

I've been thinking about this @richardjharding and I'm not really sure my only reasoning is the code still has to be piped through style loader as part of the transformation and when it is and encounters an ES6 import it fails. The babel loader transpiles it to the vendor code to es5 - the style loader bit is there to stop it matching all files in the folder and making the build long.

But I'm new to webpack so couldn't say for sure.

[loune]

I ran into this issue as well. I'm of the opinion that style-loader shouldn't be included in the production vendor.js since it's for adding ad-hoc <style> tags (helpful with HMR). In production builds, you would use the ExtractTextPlugin, and reference the extracted CSS file, which is the way it's currently configured for dev and prod anyway in the react/redux template. Furthermore, style-loader adds 700k (pre-uglify) to vendor.js, so you gain quite a bit by excluding it.

I've reconfigured my webpack to use style-loader in dev and ExtractTextPlugin in prod, seems to work fine. As a bonus HMR with stylesheets also now work.

[ninjaboy]

@loune, would you be so kind to share the fix with us?

[loune]

@ninjaboy I've pushed it to https://github.com/loune/aspnetcore-sample see webpack.config.js and webpack.config.vendor.js

[SteveSandersonMS]

Thanks for the report and the suggested fix. I agree we should remove style-loader from the vendor bundle. This fix will be included in the next version of the template packages when published.