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

[artembatura]

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

System:

• OS: Windows 10
• Framework: React
• Addons: @storybook/addon-actions@5.0.0, storybook-addon-material-ui@0.9.0-alpha.17, storybook-addon-intl@2.4.0
• Version: 5.0.0

Additional context

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

[artembatura]

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]

@artemirq thanks for reporting!

Yes, I hope we will support Storybook V5 soon

[msreekm]

same error while upgrading to 5.

[davthu]

Any status on this issue?

[usulpro]

This is WIP
any help is appreciated as well

[tlenex]

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]

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]

Seems connected to: storybookjs/storybook#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: storybookjs/storybook#4995 (comment) but using it on every client just to load 2 icons... for me it is overkill.

[davthu]

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

[usulpro]

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

[tlenex]

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