I added @storybook/preset-create-react-app to my addons, because I want the storybook to work with React/CRA. Basically, I am trying to import SVG the same way as CRA does.
import SomeSvgStaticUrl, { ReactComponent as SomeSvgReactComponent } from '../assets/icons/some-icon.svg';
SomeSvgStaticUrl - Works fine by default (returns string static URL, works fine with <img src={SomeSvgStaticUrl} />, but not what I want)
SomeSvgReactComponent - undefined by default
So, I decided to update the webpack config to add a SVG loader,
webpackFinal: async config => {
console.log(config.module.rules);
// const assetRule = config.module.rules.find(({ test }) => test.test(".(svg"));
// const assetLoader = {
// loader: assetRule.loader,
// options: assetRule.options || assetRule.query
// };
config.module.rules.unshift({
test: /\.svg$/,
use: ['@svgr/webpack'] // ['@svgr/webpack', assetLoader],
});
config.module.rules = [{ oneOf: config.module.rules }];
return config;
},
Works like a charm with storybook, but the default import (SomeSvgStaticUrl in this case), it returns the ReactComponent instead of static URL. And SomeSvgReactComponent is undefined. Not a problem, but when the host app uses the package with the default React/CRA configurations, it does not work. Host app gets the following,
SomeSvgStaticUrl - static URL
SomeSvgReactComponent - React component
If I remove the SVG loader from the package, it works fine on the host app, but not with storybook. And when I keep the SVG loader, it works fine with the storybook, but it does not with the host app.
I really don't want to force all the host apps to use the same SVG loader through their webpack config. Any help on what to do or what is the best way to get the storybook SVG loader to work the same way as React/CRA loader?
Package Details
"react": "^17.0.2",
"react-scripts": "^5.0.0",
"@storybook/addon-essentials": "^6.4.14",
"@storybook/addon-info": "^5.3.21",
"@storybook/addon-links": "^6.4.14",
"@storybook/addons": "^6.4.14",
"@storybook/builder-webpack5": "^6.4.14",
"@storybook/manager-webpack5": "^6.4.14",
"@storybook/preset-create-react-app": "^4.0.0",
"@storybook/react": "^6.4.14",
"@svgr/webpack": "^6.2.0",
"tsdx": "^0.14.1",
