[Bug]: Storybook imports extra unnecessary files

[ChrisEdson]

Describe the bug

Storybook imports random files when used with @storybook/addon-react-native-web.

This causes the build to fail.

An example repository can be found here and the failing build here.

You can see the error is:

ERROR in ./node_modules/react-native/Libraries/StyleSheet/processColor.js 1:442-497
Module not found: Error: Can't resolve './PlatformColorValueTypes' in '/home/runner/work/storybook-test/storybook-test/node_modules/react-native/Libraries/StyleSheet'
 @ ./node_modules/@react-native-community/art/lib/helpers.js 1:715-772
 @ ./node_modules/@react-native-community/art/lib/Shape.js 1:930-950
 @ ./node_modules/@react-native-community/art/lib/index.js 1:1524-1542
 @ ./node_modules/react-native-progress/Circle.js 1:1329-1367
 @ ./node_modules/react-native-progress/index.js 1:631-650
 @ ./src/components/ImageProgress/ImageProgress.tsx 1:105-137
 @ ./src/ lazy ^\.\/.*$ namespace object ./components/ImageProgress/ImageProgress.tsx ./components/ImageProgress/ImageProgress
 @ ./storybook-stories.js 1:567-597
 @ ./storybook-config-entry.js 1:158-191 1:983-1115

This is a typical transpilation error that you see with react-native-web - but the <ImageProgress /> component is not being imported in to any of the stories (of which there is only one: https://github.com/ChrisEdson/storybook-test/blob/main/src/components/ui/DesignSystemHeadlineFive.stories.tsx).

I'm really confused by this. The stories property in main.js only specifies stories to be included:

stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],

To Reproduce

https://github.com/ChrisEdson/storybook-test

System

Storybook Environment Info:

  System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
    npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm <----- active
  Browsers:
    Chrome: 119.0.6045.159
    Safari: 17.0
  npmPackages:
    @storybook/addon-react-native-web: 0.0.21 => 0.0.21
    @storybook/react: ^7.5.3 => 7.5.3
    @storybook/react-webpack5: ^7.5.3 => 7.5.3
    storybook: ^7.5.3 => 7.5.3

[dannyhw]

Do you get this error during development or only when running a build?

[ChrisEdson]

In both sadly :(

[dannyhw]

@ChrisEdson if you update react-native-progress to "react-native-progress": "^5.0.1" it actually solves the web compatibility issues. Though I do see how its unforunate that unused files are transpiled, I'm not sure right now why that is. I will have to check that.

[ChrisEdson]

@ChrisEdson if you update react-native-progress to "react-native-progress": "^5.0.1" it actually solves the web compatibility issues. Though I do see how its unforunate that unused files are transpiled, I'm not sure right now why that is. I will have to check that.

Thanks for looking in to this!

You're absolutely right and it does - this was just a random library I chose, but plenty of others have the same problem that exist in my main repo - I.e. they get included and attempted to be bundled.

Appreciate you taking a look :)

[dannyhw]

closing as duplicate of #77