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

npm init @open-wc Storybook conf doesn't work #2792

Open
LostInBrittany opened this issue Apr 23, 2024 · 0 comments
Open

npm init @open-wc Storybook conf doesn't work #2792

LostInBrittany opened this issue Apr 23, 2024 · 0 comments

Comments

@LostInBrittany
Copy link

Expected behavior

I have just generated a small new project including

I expected that Storybook worked, but it didn't.

Actual Behavior

Here you have what I got:

$ npm init @open-wc

        _.,,,,,,,,,._
     .d''           ``b.       Open Web Components Recommendations
   .p'      Open       `q.
 .d'    Web Components  `b.    Start or upgrade your web component project with
 .d'                     `b.   ease. All our recommendations at your fingertips.
 ::   .................   ::
 `p.                     .q'
  `p.    open-wc.org    .q'
   `b.     @openWc     .d'
     `q..            ..,'      See more details at https://open-wc.org/init/
        '',,,,,,,,,,''


Note: you can exit any time with Ctrl+C or Esc
✔ What would you like to do today? › Scaffold a new project
✔ What would you like to scaffold? › Web Component
✔ What would you like to add? › Demoing (storybook)
✔ Would you like to use typescript? › No
✔ What is the tag name of your web component? … test-openwc

./
├── test-openwc/
│   ├── .storybook/
│   │   ├── main.js
│   │   └── server.mjs
│   ├── .vscode/
│   │   └── extensions.json
│   ├── demo/
│   │   └── index.html
│   ├── src/
│   │   └── TestOpenwc.js
│   ├── stories/
│   │   └── index.stories.js
│   ├── .editorconfig
│   ├── .gitignore
│   ├── index.js
│   ├── LICENSE
│   ├── package.json
│   ├── README.md
│   ├── test-openwc.js
│   └── web-dev-server.config.mjs

✔ Do you want to write this file structure to disk? › Yes
Writing..... done
✔ Do you want to install dependencies? › Yes, with npm

Installing dependencies...
This might take some time...
Using npm to install...
npm: npm WARN deprecated trim@0.0.1: Use String.prototype.trim() instead

npm: npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.12.1: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.

npm: npm 
npm: WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser

added 589 packages, and audited 590 packages in 31s

145 packages are looking for funding
  run `npm fund` for details
8 high severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

> test-openwc@0.0.0 analyze
> cem analyze --litelement
[3:30:10 PM] @custom-elements-manifest/analyzer: Created new manifest.

If you want to rerun this exact same generator you can do so by executing:
npm init @open-wc --destinationPath /tmp/test-openwc --type scaffold --scaffoldType wc --features demoing --typescript false --tagName test-openwc --writeToDisk true --installDependencies npm 

You are all set up now!

All you need to do is run:
  cd test-openwc
  npm run start


$ cd test-openwc/


$ npm run storybook:build

> test-openwc@0.0.0 storybook:build
> npm run analyze -- --exclude dist && build-storybook


> test-openwc@0.0.0 analyze
> cem analyze --litelement --exclude dist

[3:32:02 PM] @custom-elements-manifest/analyzer: Created new manifest.
/tmp/test-openwc/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:56
    const mainJs = validateMainJs(require(mainJsPath));
                                  ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /tmp/test-openwc/.storybook/main.js from /tmp/test-openwc/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 either 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 /tmp/test-openwc/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Object.readStorybookConfig (/tmp/test-openwc/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:56:35)
    at Object.build (/tmp/test-openwc/node_modules/@web/dev-server-storybook/dist/build/build.js:42:51)
    at main (/tmp/test-openwc/node_modules/@web/dev-server-storybook/dist/build/cli.js:33:19)
    at Object.<anonymous> (/tmp/test-openwc/node_modules/@web/dev-server-storybook/dist/build/cli.js:35:1) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v21.6.2


Additional context

Using simply npm init @open-wc

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

No branches or pull requests

1 participant