search

react-theming / storybook-addon-material-ui

Addon for storybook wich wrap material-ui components into MuiThemeProvider. :page_with_curl: This helps and simplifies development of material-ui based components.
https://github.com/sm-react/storybook-addon-material-ui
MIT License
567 stars 131 forks source link

ModuleParseError: Module parse failed: Unexpected character '�' (1:0) #92

Closed artembatura closed 5 years ago

artembatura commented 5 years ago

Describe the bug

When I upgraded Storybook from 4.0.9 to 5.0.0, by starting start-storybook, I give error (see screenshot below)

Expected behavior

Storybook works without errors

Screenshots

image

System:

Additional context

This error stack doesn't give any information with which file have problem

artembatura commented 5 years ago

I think this problem because Storybook 5 Theming has rewritten @UsulPro Should we expect, that storybook-addon-material-ui going support Storybook 5 soon?

usulpro commented 5 years ago

@artemirq thanks for reporting!

Yes, I hope we will support Storybook V5 soon

msreekm commented 5 years ago

same error while upgrading to 5.

davthu commented 5 years ago

Any status on this issue?

usulpro commented 5 years ago

This is WIP any help is appreciated as well

tlenex commented 5 years ago

It seems that webpack in storybook is trying to import ic_done_white_64dp_1x.png and ic_done_black_64dp_1x.png like the ones in react-material-color-picker dependency, but instead of transforming the import into url and emitting the file, it gets it as string content, which is an binary file starting with the mysterious � character.

Probably this is caused by some wrong order/config of loaders in storybook's webpack config, but im not sure.

https://github.com/sm-react/react-material-color-picker/blob/master/src/MaterialColorPicker.jsx#L3

tlenex commented 5 years ago

Yup, removing those imports from node_modules/react-material-color-picker/dist/MaterialColorPicker.js resolves the issue, but the icons are gone.

Seems like storybook is no longer using webpack's file-loader for this kind of dependency even if it is provided in .storybook/webpack.config.js.

@UsulPro For me, dist bundle step in react-material-color-picker is doing something wrong, it's bundling es5/commonjs while leaving require of .png file. Since there is no such thing in es5 nor in commonjs module definitions like importing binary files directly, they should be transformed into base64 URI, CDN URL or something similar during bundling and release step to be valid with es5/commonjs spec. Using SVG files instead of PNG should result in smaller size. https://www.npmjs.com/package/babel-plugin-file-loader or https://www.npmjs.com/package/babel-plugin-inline-import-data-uri might be usefull to add in prepublish script in the line here https://github.com/sm-react/react-material-color-picker/blob/master/.scripts/prepublish.sh#L12 .

tlenex commented 5 years ago

Seems connected to: https://github.com/storybooks/storybook/issues/4995 and #90 .

Storybook 4.1.0 and onwards introduced this breaking change.

There is undocumented (yet) api for modifying Storybook's Manager webpack config: https://github.com/storybooks/storybook/issues/4995#issuecomment-447270973 but using it on every client just to load 2 icons... for me it is overkill.

davthu commented 5 years ago

I can confirm that the solution provided by @tlenex works.

usulpro commented 5 years ago

Thank you guys for the help! Fixed this issue in alpha-18 Could you check it please?

tlenex commented 5 years ago

After upgrading to 0.9.0-alpha.18 storybook 5.0.6 works for me