search

storybookjs / builder-vite

A builder plugin to run and build Storybooks with Vite
MIT License
886 stars 109 forks source link

[Bug] #544

Closed nev3rm0re closed 1 year ago

nev3rm0re commented 1 year ago

What version of vite are you using?

vite/4.0.3 darwin-arm64 node-v18.13.0

System info and storybook versions

Environment Info:

System: OS: macOS 12.0.1 CPU: (8) arm64 Apple M1 Binaries: Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm Browsers: Chrome: 108.0.5359.124 Safari: 15.1 npmPackages: @storybook/addon-actions: ^6.5.15 => 6.5.15 @storybook/addon-essentials: ^6.5.15 => 6.5.15 @storybook/addon-links: ^6.5.15 => 6.5.15 @storybook/builder-vite: ^0.2.7 => 0.2.7 @storybook/vue: ^6.5.15 => 6.5.15

Describe the Bug

Run npx sb init --builder @storybook/builder-vite. Updated main.js with viteFinal() Attempting to run npm run storybook, but get errors on default stories:

info => Loading presets
info => Using prebuilt manager
(node:25023) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
ERR! /Users/username/Projects/projectname/vite.config.js:1
ERR! import { defineConfig, loadEnv } from 'vite';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module

When run without viteFinal I'm getting different error, also related to importing components:

Failed to resolve import "./Header" from "src/stories/Header.stories.js". Does the file exist?
Failed to resolve import "./Page" from "src/stories/Page.stories.js". Does the file exist?
12:22:31 AM [vite] Internal server error: Failed to resolve import "./Header" from "src/stories/Header.stories.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/username/Projects/projectname/src/stories/Header.stories.js:9:23
  7  |      var __LOCATIONS_MAP__ = {"LoggedIn":{"startLoc":{"col":17,"line":8},"endLoc":{"col":2,"line":13},"startBody":{"col":17,"line":8},"endBody":{"col":2,"line":13}},"LoggedOut":{"startLoc":{"col":17,"line":8},"endLoc":{"col":2,"line":13},"startBody":{"col":17,"line":8},"endBody":{"col":2,"line":13}}};
  8  |
  9  |  import MyHeader from './Header';
  ... and one more error about "Import Page from './Page'"

Link to Minimal Reproducible Example

No response

Participation

IanVS commented 1 year ago

I'd suggest trying out Storybook 7.0 if you can. It automatically uses your project's vite.config.js file, and allows ESM config files. You can upgrade using npx sb@next upgrade --prerelease.

If you're not able to use Storybook 7, can you please share a reproduction so that I can help troubleshoot what's goin on? And if you can't do that, can you share your .storybook/main.cjs file?