{"action":"opened","issue":{"url":"https://api.github.com/repos/storybooks/storybook/issues/4298","repository_url":"https://api.github.com/repos/storybooks/storybook","labels_url":"https://api.github.com/repos/storybooks/storybook/issues/4298/labels{/name}","comments_url":"https://api.github.com/repos/storybooks/storybook/issues/4298/comments","events_url":"https://api.github.com/repos/storybooks/storybook/issues/4298/events","html_url":"https://github.com/storybooks/storybook/issues/4298","id":367225412,"node_id":"MDU6SXNzdWUzNjcyMjU0MTI=","number":4298,"title":"Storybook webpack not configured for Create React App 2.0 Inline SVG's","user":{"login":"semb09","id":16739197,"node_id":"MDQ6VXNlcjE2NzM5MTk3","avatar_url":"https://avatars3.githubusercontent.com/u/16739197?v=4","gravatar_id":"","url":"https://api.github.com/users/semb09","html_url":"https://github.com/semb09","followers_url":"https://api.github.com/users/semb09/followers","following_url":"https://api.github.com/users/semb09/following{/other_user}","gists_url":"https://api.github.com/users/semb09/gists{/gist_id}","starred_url":"https://api.github.com/users/semb09/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/semb09/subscriptions","organizations_url":"https://api.github.com/users/semb09/orgs","repos_url":"https://api.github.com/users/semb09/repos","events_url":"https://api.github.com/users/semb09/events{/privacy}","received_events_url":"https://api.github.com/users/semb09/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-10-05T14:02:14Z","updated_at":"2018-10-05T14:02:14Z","closed_at":null,"author_association":"NONE","body":"If you are reporting a bug or requesting support, start here:\r\n### Bug or support request summary\r\nI recently upgraded to Create React App 2.0 so that I could use the new SVG import feature\r\n\r\n`import { ReactComponent as Icon } from 'icon.svg';`\r\n\r\nI then realised that this is provided via react-scripts webpack config and that Storybook has its own config. I then updated to the latest alpha version of Storybook but it still did not work.\r\n\r\nI managed to get the feature to work by adding the following to storybook webpack config file \r\n\r\n```\r\nconst path = require('path');\r\nconst fs = require('fs');\r\nconst appDirectory = fs.realpathSync(process.cwd());\r\n\r\nmodule.exports = (baseConfig, env, defaultConfig) => {\r\n  // Extend defaultConfig as you need.\r\n\r\n  defaultConfig.module.rules.push({\r\n    test: /\\.(js|jsx)$/,\r\n    include: path.resolve(appDirectory, 'src'),\r\n    loader: require.resolve('babel-loader'),\r\n    options: {\r\n      presets: [require.resolve('babel-preset-react-app')],\r\n      plugins: [\r\n        [\r\n          require.resolve('babel-plugin-named-asset-import'),\r\n          {\r\n            loaderMap: {\r\n              svg: {\r\n                ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',\r\n              },\r\n            },\r\n          },\r\n        ],\r\n      ]\r\n    }\r\n  });\r\n\r\n  return defaultConfig;\r\n};\r\n```\r\n\r\nWill this config be included in future Storybook updates?\r\n\r\n### Steps to reproduce\r\n\r\n- Create React App 2.0\r\n- Add Storybook\r\n- Use `import { ReactComponent as Icon } from 'icon.svg';` syntax inside any component in a story\r\n\r\n_(A screencast can be useful for visual bugs, but it is not a substitute for a textual description.)_\r\n\r\n### Please specify which version of Storybook and optionally any affected addons that you're running\r\n\r\n- @storybook/react ^4.0.0-alpha.24\r\n"}}
{"actor":{"display_login":"semb09"}}