Closed orizens closed 2 years ago
Can you share the output of npm ls webpack
? When storybook uses the vite builder, it also uses webpack 4 to build the manager part of the UI (sidebar, addon panel, etc). Perhaps you have a version of webpack in your project that's conflicting with it?
You can also try running storybook with --no-manager-cache
once just to be sure there's no old cached code hanging around.
@IanVS you're correct (i forgot to metion) - my app is based on create-react-app
with webpack-5
.
any suggestion ?
$ npm ls webpack
├─┬ @cypress/react@5.12.4
│ ├─┬ babel-loader@8.2.5
│ │ └── webpack@5.73.0 deduped
│ └─┬ webpack@5.73.0
│ └─┬ terser-webpack-plugin@5.3.3
│ └── webpack@5.73.0 deduped
├─┬ @cypress/webpack-dev-server@1.8.3
│ ├─┬ html-webpack-plugin@5.5.0
│ │ └── webpack@5.73.0 deduped
│ ├─┬ webpack-dev-server@4.9.3
│ │ ├─┬ webpack-dev-middleware@5.3.3
│ │ │ └── webpack@5.73.0 deduped
│ │ └── webpack@5.73.0 deduped
│ └── webpack@5.73.0 deduped
├─┬ @cypress/webpack-preprocessor@5.11.1
│ └── webpack@5.73.0 deduped
├─┬ @storybook/addon-essentials@6.5.9
│ └─┬ @storybook/core-common@6.5.9
│ ├─┬ fork-ts-checker-webpack-plugin@6.5.2
│ │ └── webpack@5.73.0 deduped
│ └─┬ webpack@4.46.0
│ └─┬ terser-webpack-plugin@1.4.5
│ └── webpack@4.46.0 deduped
├─┬ @storybook/preset-scss@1.0.3
│ ├─┬ css-loader@3.6.0
│ │ └── webpack@5.73.0 deduped
│ ├─┬ sass-loader@12.6.0
│ │ └── webpack@5.73.0 deduped
│ └─┬ style-loader@1.3.0
│ └── webpack@5.73.0 deduped
├─┬ @storybook/react@6.5.9
│ ├─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.7
│ │ └── webpack@5.73.0 deduped
│ ├─┬ @storybook/core@6.5.9
│ │ ├─┬ @storybook/core-client@6.5.9
│ │ │ └── webpack@5.73.0 deduped
│ │ ├─┬ @storybook/core-server@6.5.9
│ │ │ ├─┬ @storybook/builder-webpack4@6.5.9
│ │ │ │ ├─┬ html-webpack-plugin@4.5.2
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ ├─┬ postcss-loader@4.3.0
│ │ │ │ │ └── webpack@5.73.0 deduped
│ │ │ │ ├─┬ raw-loader@4.0.2
│ │ │ │ │ └── webpack@5.73.0 deduped
│ │ │ │ ├─┬ terser-webpack-plugin@4.2.3
│ │ │ │ │ └── webpack@5.73.0 deduped
│ │ │ │ ├─┬ url-loader@4.1.1
│ │ │ │ │ └── webpack@5.73.0 deduped
│ │ │ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ │ │ └── webpack@5.73.0 deduped
│ │ │ │ ├─┬ webpack-filter-warnings-plugin@1.2.1
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ └─┬ webpack@4.46.0
│ │ │ │ └─┬ terser-webpack-plugin@1.4.5
│ │ │ │ └── webpack@4.46.0 deduped
│ │ │ ├─┬ @storybook/manager-webpack4@6.5.9
│ │ │ │ ├─┬ html-webpack-plugin@4.5.2
│ │ │ │ │ └── webpack@4.46.0 deduped
│ │ │ │ └─┬ webpack@4.46.0
│ │ │ │ └─┬ terser-webpack-plugin@1.4.5
│ │ │ │ └── webpack@4.46.0 deduped
│ │ │ └─┬ webpack@4.46.0
│ │ │ └─┬ terser-webpack-plugin@1.4.5
│ │ │ └── webpack@4.46.0 deduped
│ │ └── webpack@5.73.0 deduped
│ ├─┬ @storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
│ │ └── webpack@5.73.0 deduped
│ └── webpack@5.73.0 deduped
└─┬ react-scripts@5.0.0
├─┬ css-loader@6.7.1
│ └── webpack@5.73.0 deduped
├─┬ css-minimizer-webpack-plugin@3.4.1
│ └── webpack@5.73.0 deduped
├─┬ eslint-webpack-plugin@3.2.0
│ └── webpack@5.73.0 deduped
├─┬ file-loader@6.2.0
│ └── webpack@5.73.0 deduped
├─┬ mini-css-extract-plugin@2.6.1
│ └── webpack@5.73.0 deduped
├─┬ postcss-loader@6.2.1
│ └── webpack@5.73.0 deduped
├─┬ source-map-loader@3.0.1
│ └── webpack@5.73.0 deduped
├─┬ style-loader@3.3.1
│ └── webpack@5.73.0 deduped
├─┬ terser-webpack-plugin@5.3.3
│ └── webpack@5.73.0 deduped
├─┬ webpack-manifest-plugin@4.1.1
│ └── webpack@5.73.0 deduped
├── webpack@5.73.0 deduped
└─┬ workbox-webpack-plugin@6.5.3
└── webpack@5.73.0 deduped
If you're using CRA and webpack, you should continue to use the webpack builder for storybook. If you're migrating your app from CRA to vite, then you'll need to remove webpack and any webpack loaders from your dependencies in package.json. There is a guide in the readme: https://github.com/storybookjs/builder-vite#migration-from-webpack--cra
@IanVS thanks for the advice. To be clear, i'm able to run storybook with vite locally and view at localhost. i received too many errors when i tried to setup storybook with weback.
Let's consolidate this discussion into https://github.com/storybookjs/builder-vite/issues/466.
What version of
vite
are you using?3.0.2
System info and storybook versions
System: OS: macOS 12.4 CPU: (10) arm64 Apple M1 Max Binaries: Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm Browsers: Chrome: 103.0.5060.134 Safari: 15.5 npmPackages: @storybook/addon-actions: 6.5.9 => 6.5.9 @storybook/addon-essentials: 6.5.9 => 6.5.9 @storybook/addon-interactions: 6.5.9 => 6.5.9 @storybook/addon-links: 6.5.9 => 6.5.9 @storybook/builder-vite: 0.2.1 => 0.2.1 @storybook/preset-scss: 1.0.3 => 1.0.3 @storybook/react: 6.5.9 => 6.5.9 @storybook/testing-library: 0.0.13 => 0.0.13
Describe the Bug
running
build-storybook
displays this error in terminal:the
main.cjs
:Link to Minimal Reproducible Example
No response
Participation
appreciate any help :)