search

modernweb-dev / storybook-prebuilt

Storybook prebuilt to work with native es modules
MIT License
36 stars 9 forks source link

Theming: `import` and `require` in `manager.js` both break Storybook #126

Closed sgammon closed 2 years ago

sgammon commented 2 years ago

Hey esteemed Modern Web devs,

When following the Storybook guide for theming, it suggests creating a manager.js and filling it with the following content:

import {addons} from '@storybook/addons';
import someTheme from './theme.mjs';

addons.setConfig({
  theme: someTheme,
});

However, when I do this using @web/*, it gives me this error:

$ tsc && npm run analyze -- --exclude dist && build-storybook

> elements@1.0.0 analyze
> cem analyze --litelement "--exclude" "dist"

[12:02:46 AM] @custom-elements-manifest/analyzer: Created new manifest.
/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:159
        base = Object.assign(new Error(base.message), base);
                             ^

Error: 'default' is not exported by node_modules/util-deprecate/node.js, imported by node_modules/@storybook/channels/dist/esm/index.js
    at error (/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:159:30)
    at Module.error (/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:12437:16)
    at Module.traceVariable (/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:12795:29)
    at ModuleScope.findVariable (/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:11416:39)
    at FunctionScope.findVariable (/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:6392:38)
    at ChildScope.findVariable (/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:6392:38)
    at FunctionScope.findVariable (/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:6392:38)
    at ChildScope.findVariable (/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:6392:38)
    at Identifier.bind (/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:7681:40)
    at CallExpression.bind (/Users/sam/Workspace/web/node_modules/rollup/dist/shared/rollup.js:5281:23) {
  code: 'MISSING_EXPORT',

I have tried flying with "type": "module", but this causes other problems -- I have also tried naming the file manager.mjs, but in that case, it seems like it doesn't take effect. What am I doing wrong, or is this a bug?

Westbrook commented 2 years ago

You need to import addons from prebuilt, a la:

import { addons } from '@web/storybook-prebuilt/addons.js';
import yourTheme from './theme.js';

addons.setConfig({
    theme: yourTheme,
    showRoots: false,
});
sgammon commented 2 years ago

indeed that fixed it -- while also importing theming via:

import { create } from '@web/storybook-prebuilt/theming.js';

thank you for the quick help on this! 😄