Storybook does not work on new open-wc workspace

[h4de5]

Expected behavior

starting storybook on a new open-wc workspace using

npm run storybook

should show the storybook UI where you can select from a list of found stories and change parameters to see the rending variations.

Actual Behavior

instead the command first results in this error:

Error [ERR_REQUIRE_ESM]: require() of ES Module openwc-workspace/.storybook/main.js from openwc-workspace/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js not supported.

which can be solved by creating a new file .storybook/package.json including only:

{
  "type": "commonjs"
}

after this - the npm run storybook command works, but does NOT show the storybook. instead it shows the same webcomponent app as npm run start - so no demoing.

Possible solution

it took me a while to figure this out as all parts seems to be working correctly - still the outcome is plain wrong.

in the file web-dev-server.config.mjs the exported property appIndex seems to be wrong. In a typescript context the transpiled storybook content is located in /storybook-static/. therefore the correct value should be:

/** Set appIndex to enable SPA routing */
appIndex: './storybook-static/index.html',

after that the storybook command works as expected with live reload and all.

Additional context

I created a new open-wc application using this command:

npm init @open-wc --destinationPath /home/apausch/workspace/workshops/openwc-workspace --type scaffold --scaffoldType app --features linting testing demoing building --typescript true --tagName openwc-workspace --writeToDisk true --installDependencies npm

npm ls:

openwc-workspace@0.0.0 openwc-workspace
├── @babel/preset-env@7.21.4
├── @custom-elements-manifest/analyzer@0.4.17
├── @open-wc/building-rollup@2.2.3
├── @open-wc/eslint-config@9.2.2
├── @open-wc/testing@3.1.8
├── @rollup/plugin-babel@5.3.1
├── @rollup/plugin-node-resolve@13.3.0
├── @typescript-eslint/eslint-plugin@5.59.0
├── @typescript-eslint/parser@5.59.0
├── @web/dev-server-storybook@0.5.4
├── @web/dev-server@0.1.38
├── @web/rollup-plugin-html@1.11.1
├── @web/rollup-plugin-import-meta-assets@1.0.8
├── @web/test-runner@0.14.1
├── babel-plugin-template-html-minifier@4.1.0
├── concurrently@5.3.0
├── deepmerge@4.3.1
├── eslint-config-prettier@8.8.0
├── eslint@8.38.0
├── husky@4.3.8
├── lint-staged@10.5.4
├── lit@2.7.2
├── prettier@2.8.7
├── rimraf@3.0.2
├── rollup-plugin-esbuild@5.0.0
├── rollup-plugin-workbox@6.2.2
├── rollup@2.79.1
├── tslib@2.5.0
└── typescript@4.9.5

[au5ton]

For me, using a freshly generated project with npm init @open-wc, I updated @web/dev-server-storybook from ^0.5.4 to ^0.7.1 and renamed .storybook/main.js to .storybook/main.cjs and this resolved my issue completely.

I think that specific template lives here and could be updated: https://github.com/open-wc/create/blob/8700df758c8bf756169d2778c7713432b76e8bdc/src/generators/demoing-storybook-ts/templates/package.json#L7

[h4de5]

For me, using a freshly generated project with npm init @open-wc, I updated @web/dev-server-storybook from ^0.5.4 to ^0.7.1 and renamed .storybook/main.js to .storybook/main.cjs and this resolved my issue completely.

just tried it out. I agree the package.json+commonjs-Hack is no longer necessary. still the storybook command shows the main app. (used the same building options as before)

i still need the change in the web-dev-server.config.mjs -> appIndex

[h4de5]

an even better solution would be to change the .storybook/server.mjs and add the proper appIndex there.

export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
  ...baseConfig,
  open: '/',
  appIndex: './storybook-static/index.html',
  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
});

[larscmagnusson]

I had a fresh install but needed the package.json-hack to start storybook at all, and also I just commented out appIndex in web-dev-server.config.mjs and it fixed the issue for me.

export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   
  ...

  /** Set appIndex to enable SPA routing */
  // appIndex: './index.html',
 
  ....
});

[dominikfryc]

For me, using a freshly generated project with npm init @open-wc, I updated @web/dev-server-storybook from ^0.5.4 to ^0.7.1 and renamed .storybook/main.js to .storybook/main.cjs and this resolved my issue completely.

When I try to do this, I get this error:

Error while transforming index.html: Could not resolve import "@web/storybook-prebuilt/manager.js".
> import '@web/storybook-prebuilt/manager.js';

[Swivelgames]

Mine didn't even generate a web-dev-server.config.mjs. I had to duplicate the web-dev-server.config.js with the .mjs extension.

Before and after updating @web/dev-server-storybook, I'm still getting the following error:

[9:38:46 PM] @custom-elements-manifest/analyzer: Created new manifest.
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /****/.storybook/main.js
require() of ES modules is not supported.
require() of /****/.storybook/main.js from /****/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename main.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /****/package.json.

[asholee]

Expected behavior

starting storybook on a new open-wc workspace using

npm run storybook

should show the storybook UI where you can select from a list of found stories and change parameters to see the rending variations.

Actual Behavior

instead the command first results in this error:

Error [ERR_REQUIRE_ESM]: require() of ES Module openwc-workspace/.storybook/main.js from openwc-workspace/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js not supported.

which can be solved by creating a new file .storybook/package.json including only:

{
  "type": "commonjs"
}

after this - the npm run storybook command works, but does NOT show the storybook. instead it shows the same webcomponent app as npm run start - so no demoing.

Possible solution

it took me a while to figure this out as all parts seems to be working correctly - still the outcome is plain wrong.

in the file web-dev-server.config.mjs the exported property appIndex seems to be wrong. In a typescript context the transpiled storybook content is located in /storybook-static/. therefore the correct value should be:

/** Set appIndex to enable SPA routing */
appIndex: './storybook-static/index.html',

after that the storybook command works as expected with live reload and all.

Additional context

I created a new open-wc application using this command:

npm init @open-wc --destinationPath /home/apausch/workspace/workshops/openwc-workspace --type scaffold --scaffoldType app --features linting testing demoing building --typescript true --tagName openwc-workspace --writeToDisk true --installDependencies npm

npm ls:

openwc-workspace@0.0.0 openwc-workspace
├── @babel/preset-env@7.21.4
├── @custom-elements-manifest/analyzer@0.4.17
├── @open-wc/building-rollup@2.2.3
├── @open-wc/eslint-config@9.2.2
├── @open-wc/testing@3.1.8
├── @rollup/plugin-babel@5.3.1
├── @rollup/plugin-node-resolve@13.3.0
├── @typescript-eslint/eslint-plugin@5.59.0
├── @typescript-eslint/parser@5.59.0
├── @web/dev-server-storybook@0.5.4
├── @web/dev-server@0.1.38
├── @web/rollup-plugin-html@1.11.1
├── @web/rollup-plugin-import-meta-assets@1.0.8
├── @web/test-runner@0.14.1
├── babel-plugin-template-html-minifier@4.1.0
├── concurrently@5.3.0
├── deepmerge@4.3.1
├── eslint-config-prettier@8.8.0
├── eslint@8.38.0
├── husky@4.3.8
├── lint-staged@10.5.4
├── lit@2.7.2
├── prettier@2.8.7
├── rimraf@3.0.2
├── rollup-plugin-esbuild@5.0.0
├── rollup-plugin-workbox@6.2.2
├── rollup@2.79.1
├── tslib@2.5.0
└── typescript@4.9.5