react-native-svg icon indicating copy to clipboard operation
react-native-svg copied to clipboard

`Module parse failed` error when building for Storybook for web

Open ConnorHome opened this issue 1 year ago • 0 comments

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

ConnorHome avatar Feb 14 '24 13:02 ConnorHome