Create React App feature compatibility

[mattfysh]

Issue details

Strengthen compatibility between create-react-app and storybook build systems. There are some features of the CRA build (albeit, recent additions) which do not work with storybook (see steps to reproduce). Looking for any ideas here how to best get Storybook working with some of CRA's build features, plus any ideas to keep compatibility high as CRA grows.

Steps to reproduce

1. create-react-app myapp
2. add storybook to myapp
3. add source code that uses babel macros, e.g. emotion/macro
4. add source code that uses SVG component imports, e.g. import { ReactComponent as Logo } from './logo.svg'
5. attempt to build source code with storybook

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 3.3.15

Affected platforms

Mac 10.13.3

Screenshots / Screencast / Code Snippets (Optional)

Currently using this in my .storybook/webpack.config.js

module.exports = config => {
  const babelLoader = config.module.rules.find(
    rule => rule.loader && rule.loader.indexOf('babel-loader') > 0
  )
  if (babelLoader) {
    babelLoader.query.plugins.unshift(require('babel-plugin-macros'))

    babelLoader.query.plugins.push([
      require.resolve('babel-plugin-named-asset-import'),
      {
        loaderMap: {
          svg: {
            ReactComponent: 'svgr/webpack![path]',
          },
        },
      },
    ])
  }

  config.module.rules.push({
    test: /\.svg$/,
    loader: require.resolve('file-loader'),
  })

  return config
}

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[craigcoles]

@mattfysh Did you ever find a solution to this issue? I am experiencing the same issue now.

[mattfysh]

@craigcoles - only the .storybook/webpack.config.js from above, it works well enough for now