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.

Sign up for GitHub

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

Jump to bottom

[Bug]: storybook build doesn't work with Svelte + Vite #23525

Closed
kaguya3222 opened this issue Jul 19, 2023 · 6 comments
Closed

[Bug]: storybook build doesn't work with Svelte + Vite #23525

kaguya3222 opened this issue Jul 19, 2023 · 6 comments
Labels
bug needs triage

Comments

@kaguya3222
Copy link

Describe the bug

storybook build command doesn't work in the project that uses:

  • Svelte
  • Vite
  • @storybook/svelte-vite

Output log is the following:

Unexpected keyword 'default' (Note that you need plugins to import files that are not JavaScript)
file: @storybook/addons?commonjs-external:1:43
1: export { default } from "@storybook/addons";
                                              ^
ERR! RollupError: Unexpected keyword 'default' (Note that you need plugins to import files that are not JavaScript)
ERR!     at error (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
ERR!     at Module.error (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:13584:16)
ERR!     at Module.tryParse (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:14310:25)
ERR!     at Module.setSource (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:13911:39)
ERR!     at ModuleLoader.addModuleSource (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:24443:20)
ERR!  Error [RollupError]: Unexpected keyword 'default' (Note that you need plugins to import files that are not JavaScript)
ERR!     at error (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:2245:30)
ERR!     at Module.error (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:13584:16)
ERR!     at Module.tryParse (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:14310:25)
ERR!     at Module.setSource (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:13911:39)
ERR!     at ModuleLoader.addModuleSource (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:24443:20) {
ERR!   cause: SyntaxError: Unexpected keyword 'default' (1:9)
ERR!       at Object.pp$4.raise (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:21415:13)
ERR!       at Object.pp$5.checkUnreserved (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:21308:12)
ERR!       at Object.parseExport (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:25899:18)
ERR!       at Object.pp$8.parseStatement (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:18799:74)
ERR!       at Object.pp$8.parseTopLevel (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:18680:21)
ERR!       at Object.parse (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:18452:15)
ERR!       at Function.parse (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:18502:35)
ERR!       at Graph.contextParse (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:25546:38)
ERR!       at Module.tryParse (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:14307:31)
ERR!       at Module.setSource (file:///Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/rollup/dist/es/shared/node-entry.js:13911:39) {
ERR!     pos: 9,
ERR!     loc: Position { line: 1, column: 9 },
ERR!     raisedAt: 20
ERR!   },
ERR!   code: 'PARSE_ERROR',
ERR!   id: '\x00@storybook/addons?commonjs-external',
ERR!   pos: 9,
ERR!   loc: {
ERR!     column: 43,
ERR!     file: '\x00@storybook/addons?commonjs-external',
ERR!     line: 1
ERR!   },
ERR!   frame: '1: export { default } from "@storybook/addons";\n' +
ERR!     '                                              ^',
ERR!   watchFiles: [
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/iframe.html',
ERR!     '/virtual:/@storybook/builder-vite/vite-app.js',
ERR!     '\x00vite/modulepreload-polyfill',
ERR!     '/virtual:/@storybook/builder-vite/setup-addons.js',
ERR!     '/virtual:/@storybook/builder-vite/storybook-stories.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/svelte/dist/config.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-links/dist/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-essentials/dist/docs/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-essentials/dist/actions/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-essentials/dist/measure/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-essentials/dist/outline/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-interactions/dist/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/.storybook/preview.ts',
ERR!     '\x00vite/preload-helper',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-knobs/dist/index.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-measure/dist/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-links/dist/chunk-VJY7NXNQ.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-links/dist/chunk-DXNAW7Q2.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-links/dist/chunk-JT3VIYBO.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/svelte/dist/chunk-KSAWIQN3.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-actions/dist/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-backgrounds/dist/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-docs/dist/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-outline/dist/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-highlight/dist/preview.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-mock/build/index.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-interactions/dist/chunk-NNAAFZ4U.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-measure/dist/chunk-YIXVQKZ5.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-knobs/dist/shared.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-knobs/dist/registerKnobs.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-backgrounds/dist/chunk-GRJZJKJ4.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/svelte/templates/SlotDecorator.svelte',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/svelte/templates/PreviewRender.svelte',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-highlight/dist/chunk-33ALZPRS.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-docs/dist/DocsRenderer-3PUGWF3O.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-actions/dist/chunk-AY7I2SME.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-actions/dist/chunk-VWCVBQ22.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-outline/dist/chunk-2DMOCDBJ.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/Configure.mdx',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/Page.stories.ts',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/Header.stories.ts',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/Button.stories.ts',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/index.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/lodash/debounce.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-knobs/dist/KnobManager.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/svelte/src/runtime/internal/index.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/svelte/src/runtime/internal/disclose-version/index.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/svelte/src/runtime/index.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/package.json',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/react/jsx-runtime.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-essentials/dist/docs/mdx-react-shim.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/github.svg',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/discord.svg',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/youtube.svg',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/tutorials.svg',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/styling.png',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/context.png',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/assets.png',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/docs.png',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/share.png',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/figma-plugin.png',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/testing.png',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/accessibility.png',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/theming.png',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/assets/addon-library.png',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/addon-docs/dist/chunk-S4VUQJ4A.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/preRunMessage.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/specialChars.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/clearLine.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/createDirectory.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/ErrorWithStack.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/installCommonGlobals.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/interopRequireDefault.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/isInteractive.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/isPromise.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/setGlobal.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/deepCyclicCopy.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/convertDescriptorToString.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/replacePathSepForGlob.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/testPathPatternToRegExp.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/globsToMatcher.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/pluralize.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/formatTime.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/tryRealpath.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/jest-util/build/requireOrImportModule.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/Button.svelte',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/docs-tools/dist/index.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/Page.svelte',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/src/stories/Header.svelte',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/global/dist/index.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/@storybook/instrumenter/dist/index.mjs',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/lodash/isObject.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/lodash/now.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/lodash/toNumber.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/svelte/src/shared/version.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/svelte/src/runtime/internal/animations.js',
ERR!     '/Users/maximanisimov/projects/svelte-vite-storybook-repro/node_modules/svelte/src/runtime/internal/await_block.js',
ERR!     ... 879 more items
ERR!   ]
ERR! }

To Reproduce

  1. Clone this repo: https://github.com/kaguya3222/svelte-vite-storybook-repro
  2. Run yarn install to run dependencies
  3. Run yarn build-storybook to run the building process
  4. Check your terminal to see the error

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.4
  npmPackages:
    @storybook/addon-essentials: ^7.1.0 => 7.1.0
    @storybook/addon-interactions: ^7.1.0 => 7.1.0
    @storybook/addon-knobs: ^7.0.2 => 7.0.2
    @storybook/addon-links: ^7.1.0 => 7.1.0
    @storybook/blocks: ^7.1.0 => 7.1.0
    @storybook/svelte: ^7.1.0 => 7.1.0
    @storybook/svelte-vite: ^7.1.0 => 7.1.0
    @storybook/testing-library: ^0.2.0 => 0.2.0


### Additional context

One important moment that I noticed is that it works without issues If I remove `storybook-addon-knobs` from the `addons` in `.storybook/main.ts` i
@kaguya3222
Copy link
Author

kaguya3222 commented Jul 19, 2023 •
edited
Loading

I solved this issue by directly installing @storybook/addons

The problem is that @storybook/addons is a peerDependency of storybook/addon-knobs package. And it's not installed with this package. There is not storybook/addon-knobs folder in node_modules so tha'ts why it throws an error while trying to import something from this module.

I leave this issue as opened because I believe this dependency should be installed together with addon-knobs or maybe npx storybook@latest init should automatically install this dependency 🤔

@shilman
Copy link
Member

shilman commented Jul 20, 2023

@storybook/addon-knobs is deprecated, as is @storybook/addons. However knobs is still widely used. @ndelangen @literalpie is there anything small we can do to make this easier that doesn't increase it future maintenance burden?

@literalpie literalpie mentioned this issue Jul 20, 2023
Closed
@literalpie
Copy link
Contributor

If @storybook/addons is marked as a peerDependency of @storybook/addon-knobs, I think it could be argued this is working as expected. some package managers will automatically install the peerDependency and things will "just work". yarn shows a warning:

warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/addons@^7.0.0".

(and the existence of this issue will hopefully help anyone who misses that :-) )

That said, it looks like removing references to @storybook/addons is really easy, so I just opened a PR to do that.

@kaguya3222
Copy link
Author

@shilman @literalpie Hey guys ! Thanks for the fast response! If @storybook/knobs is deprecated, what should I use then ? We have a lot of stories in our project that use this package

@shilman
Copy link
Member

shilman commented Jul 20, 2023

@kaguya3222 https://storybook.js.org/docs/7.1/react/essentials/controls/

@valentinpalkovic
Copy link
Contributor

I will close this, since everything works as expected, as @literalpie has elaborated it.

@florianduros florianduros mentioned this issue Apr 15, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
Core Team Projects
Archived in project
Milestone
No milestone
Development

No branches or pull requests
4 participants
@shilman @valentinpalkovic @literalpie @kaguya3222