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

[app] Storybook Does Not Work Out of the Box #89

Closed
kito99 opened this issue Apr 9, 2023 · 0 comments · Fixed by #104
Closed

[app] Storybook Does Not Work Out of the Box #89

kito99 opened this issue Apr 9, 2023 · 0 comments · Fixed by #104

Comments

@kito99
Copy link

kito99 commented Apr 9, 2023

After initializing a new component with the following options:

Scaffold a new project
Application
Linting (eslint & prettier)
Testing (web-test-runner)
Demoing (storybook)
Typescript
npm
and running npm run storybook, the following error is thrown:

interneuron:st-app kito$ npm run storybook

> [email protected] storybook
> tsc && npm run analyze -- --exclude dist && concurrently -k -r "tsc --watch --preserveWatchOutput" "wds -c .storybook/server.mjs"


> [email protected] analyze
> cem analyze --litelement --exclude dist

[11:38:31 PM] @custom-elements-manifest/analyzer: Created new manifest.
[11:38:31 PM] Starting compilation in watch mode...

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/kito/Core/Projects/focus.speakertrax/vcs/st-speaker-profile/st-app/.storybook/main.js from /Users/kito/Core/Projects/focus.speakertrax/vcs/st-speaker-profile/st-app/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js not supported.
main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/kito/Core/Projects/focus.speakertrax/vcs/st-speaker-profile/st-app/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Object.readStorybookConfig (/Users/kito/Core/Projects/focus.speakertrax/vcs/st-speaker-profile/st-app/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:56:35)
    at storybookPlugin (/Users/kito/Core/Projects/focus.speakertrax/vcs/st-speaker-profile/st-app/node_modules/@web/dev-server-storybook/dist/serve/storybookPlugin.js:16:51)
    at file:///Users/kito/Core/Projects/focus.speakertrax/vcs/st-speaker-profile/st-app/.storybook/server.mjs:7:13 {
  code: 'ERR_REQUIRE_ESM'
}

This is potentially related to #87.

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

Successfully merging a pull request may close this issue.

1 participant