Webpack UglifyJs plugin breaks the bundle

[pekala]

When using the styleguidist build functionality, I get the following error in the browser console:

bundle.js:26 Uncaught TypeError: Cannot read property 'name' of undefined

I did some investigation, and it seems to be caused by the UglifyJsPlugin used in the webpack "production" config. Removing it solves the problem (also, increases the bundle size 3 times). It's quite hard to debug what is the actual problem in the minified bundle though.

[sapegin]

I didn’t see this on the demo page or in my project. Probably it’s a conflict with your project’s code so I’d like you to help me debug it.

Also: which version of react-styleguidist do you use?

[pekala]

I was on the 2.0.0-rc but now I moved to 2.0.0-rc3 and the error is slightly different. It comes from this line https://github.com/sapegin/react-styleguidist/blob/master/src/utils/utils.js#L6
It is most probably because I don't have displayName in my components. It's weird that it comes up only after the minification.

[sapegin]

Looks like Uglify removes it for some reason.

[sapegin]

Can you share your component definition? I can’t reproduce it.

[pekala]

The reason is that I am using babel-plugin-transform-react-display-name. I thought it would be adding display name for me, but apparently this doesn't work for functional stateless components.

Interestingly this only failed for built version after minification but not for non-minified or server version.

Would it make sense to allow components without displayName and take it from the file name?

[sapegin]

Not sure about filename but if it works for unminified version I could try to disable name mangling in UglifyJS.

[sapegin]

Hm, mangling is already disabled.

[pekala]

Yes, I also tried UglifyJsPlugin without any plugins... It's just odd. But you should be able to reproduce it for any component without displayName.

[sapegin]

The only way I can reproduce it is export default function(...) but it doesn’t work in dev-server too.

[stepankuzmin]

Hi there! Thanks for this project! I have the same problem with mapbox-gl. It works with development environment but fails after building minified version.

The project is located here: https://github.com/urbica/react-map-gl
webpack.config.js: https://github.com/urbica/react-map-gl/blob/master/webpack.config.js
styleguide.config.js: https://github.com/urbica/react-map-gl/blob/master/styleguide.config.js

Is there any way to disable minification on building style guide? I've tried to pass NODE_ENV=development on building, but this had no effect.

[sapegin]

@stepankuzmin Works fine for me, except this warning:

EnvironmentPlugin - MAPBOX_ACCESS_TOKEN environment variable is undefined.
You can pass an object with default values to suppress this warning.

Please open a new issue, most likely it’s not related to this one.

I've tried to pass NODE_ENV=development on building, but this had no effect.

Very good, you should not make a production build with development ;-)

[stepankuzmin]

@sapegin thanks for the reply! Project setup requires MAPBOX_ACCESS_TOKEN (https://www.mapbox.com/help/define-access-token/) but the problem is not with it.

Everything works fine on styleguidist server, but styleguide build brokes on styleguidist build due to UglifyJS plugin. Probably there is a problem with minifying mapbox-gl. My workaround is to manually disable UglifyJS plugin on build (https://urbica.github.io/react-map-gl/ ). Maybe it would be good to have something like -p option (like in webpack) enabled by default in react-styleguidist. What do you think?

[sapegin]

@stepankuzmin I’d better fix a bug if there is one ;-) But I can’t even reproduce it in your repo. Do I need access token to reproduce the issue?

Please open a new issue, most likely it’s not related to this one.