Upgrade to 5.0.0 svg import error

[karldanninger]

Describe the bug After upgrading to 5.0.0, I'm getting an error on import statements for svg files

ERROR in ./src/components/thing/components/thang/index.js 21:23
Module parse failed: Unexpected keyword 'var' (21:23)
You may need an appropriate loader to handle this file type.
| import StyledButton from '../../../StyledButton'; // assets
| 
> import intercomIcon, { var _ref =
| /*#__PURE__*/
| React.createElement(StyledIntercomButton, null, React.createElement("img", {

I do not have a custom webpack config file.

[shilman]

Hey @karldanninger! What project type?

Something def broke here. I'm trying to figure it out in #5924 -- so far only a basic workaround at the surface. Not sure what changed and am not a webpack wizard like @ndelangen

[karldanninger]

@shilman Oh gosh, I got pretty close to what you did in #5924. Adding @svgr/webpack & webpack.config.js within the .storybook dir still doesn't seem to take effect for me.

[shilman]

@karldanninger Are you using NextJS and styled components?

@tmeasday and I think this is duplicate to https://github.com/storybooks/storybook/issues/5882

[karldanninger]

@shilman I tried removing all styled-components after seeing that issue earlier, with no change to the error.

It’s a webpack 4 project. I even tried adding a very similar webpack config in the .storybook dir similar to the one you wrote earlier today as part of #5924 still no luck unfortunately :(

[shilman]

I really have no clue about webpack 😖 but I think this is a different issue from the one I'm trying to address in #5924. I'll have an update on that issue in the next few hrs, and possibly it will help with this one too.

[jmurgey]

Hello ! I'm having the same issue and wanted to up this thread: did you make any progress @shilman ?

For information, error message is the same and we have an isolated component library using styled-components without react-scripts.

[shilman]

I changed the way extend-mode webpack customization works in 5.0.2 to fix a bunch of regressions, see https://github.com/storybooks/storybook/blob/next/MIGRATION.md#deprecate-webpack-extend-mode

However @karldanninger didn't have any webpack customization, so I don't think that was the problem. I also added a --debug-webpack flag for the CLI to see the final webpack config passed into the preview. If you upgrade to latest and run with that flag, maybe you can figure out what's going on? I still don't have a repro.

[jmurgey]

I may have some new infos to share on this issue: it happens when I try to attach an imported svg to a component created with styled-component library.

Here is a very simple repository where I managed to reproduce the error.

If I use a simple img HTML tag, it works fine.

[worc]

downgrading to @storybook/react 4.1.16 fixes the svg and Unexpected keyword 'var' error. but reintroduces the Can't resolve 'fs' in babel-plugin-require-context-hook bug

moving this polyfill for jest out of the storybook config and into the specific jest setup for storyshots resolves the babel-plugin-require-context-hook bug:

import registerRequireContextHook from 'babel-plugin-require-context-hook/register'
registerRequireContextHook()

but now storybook doesn't ever do anything? no stories load and the server never boots up at 9001. even though the console says webpack built <hash> in <ms>

deleting node_modules and doing a full reinstall seems to have fixed that 🤷‍♂️

[orioltf]

Similar issue on my side.

The project setup:

• create-next-app
• styled components
• storybooks with:
  • actions
  • links
  • a11y
  • knobs
  • notes
  • viewport
  • storyshots
• no webpack nor babel custom configs for storybooks
• no custom webpack config in the root of the project
• babel config in the root of the project from nextjs
• custom webpack loader for next using next.config.js (to add a loader for icons):

module.exports = {
    webpack: (config) => {
        config.module.rules.push({
            test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/,
            loader: require.resolve('file-loader'),
            query: {
                name: 'static/[name].[ext]',
            },
        });

        return config;
    },
};

I configured babel to use "styled-jsx/babel" and "require-context-hook" for test env.

I tried configuring Jest (jest.config.js) by adding:

moduleNameMapper: {
   '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md)$': 'identity-obj-proxy',
},

However no matter what type of file is imported, I tried SVG for icons and MD for notes addon, Jest test complains with a Syntax error, whereas Storybook renders properly without errors.

Any hint welcome, please!

[shilman]

@karldanninger Any progress on this? I'd like to close the this as a dupe to #5882

[karldanninger]

@shilman nope, I tried the workarounds in #5882 to no success. Feel free to close this, I'll subscribe to #5882, it's a fairly similar error in the terminal