Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module parse failed error when building for Storybook for web #2224

Open
ConnorHome opened this issue Feb 14, 2024 · 0 comments
Open

Module parse failed error when building for Storybook for web #2224

ConnorHome opened this issue Feb 14, 2024 · 0 comments

Comments

@ConnorHome
Copy link

ConnorHome commented Feb 14, 2024

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) #1553 (comment)

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant