react-native-svg
react-native-svg copied to clipboard
`Module parse failed` error when building for Storybook for web
When building Storybook I'm getting a Webpack error about needing an appropriate loader. This is only an issue in Storybook, when I build my NextJS project that features react-native-svg
components everything is building as expected. If I remove any stories that include react-native-svg
components the Storybook build is successful.
ERROR in ./node_modules/react-native/index.js 14:7
Module parse failed: Unexpected token (14:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| // Components
> import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
| import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
| import typeof Button from './Libraries/Components/Button';
@ ./node_modules/react-native-svg/lib/module/elements/Shape.js 5:0-46 265:19-33 275:19-33 280:19-33 285:19-33 290:19-33 295:19-33 300:19-33
@ ./node_modules/react-native-svg/lib/module/ReactNativeSVG.js 1:0-37 30:0-683
@ ./node_modules/react-native-svg/lib/module/index.js 1:0-33 1:0-33 2:0-43 2:0-43
@ ./designSystem/Icons/Icons/ShareIcon.tsx
This is my .storybook/main.ts
file (note the addition of the webpackFinal
method which helped reduce the number of errors) https://github.com/software-mansion/react-native-svg/issues/1553#issuecomment-1011487502
import type { StorybookConfig } from '@storybook/nextjs'
const config: StorybookConfig = {
stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions'
],
framework: {
name: '@storybook/nextjs',
options: {}
},
docs: {
autodocs: 'tag'
},
async webpackFinal(conf, { configType }) {
// https://github.com/software-mansion/react-native-svg/issues/1553#issuecomment-1011487502
conf.resolve.extensions.unshift('.web.js')
return conf
},
}
export default config