search

modernweb-dev / storybook-prebuilt

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

Require is not defined #19

Closed TomzBench closed 3 years ago

TomzBench commented 3 years ago

Hello,

I am following the example here: https://modern-web.dev/docs/dev-server/plugins/storybook/

I receive the following error from my firefox browser: 

Uncaught ReferenceError: require is not defined
    <anonymous> http://127.0.0.1:8000/node_modules/@storybook/addon-knobs/register.js:1

My config file:

import { storybookPlugin } from '@web/dev-server-storybook';
export default {
  plugins: [storybookPlugin({ type: 'web-components' })],
};

I run the wds with ./node_modules/.bin/web-dev-server --config path/to/config --node-resolve

Perhaps i missed something?

LarsDenBakker commented 3 years ago

Do you have a .storybook/main.js file? This is loaded as well, and might contain some configuration for regular storybook.

TomzBench commented 3 years ago

Yes, I stripped everything to keep it simple:

module.exports = {
  stories: ['../src/**/*.stories.ts'],
};
TomzBench commented 3 years ago

seems related to the knobs plugin. I don't mind disabling all the plugins to just have some bare storybook running. Is it possible to disable plugins?

TomzBench commented 3 years ago

I notice the "knobs" addon isn't part of the prebuilt, yet some how my setup is adding it. Hmm. The index.html that is loaded to my browser is 

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Storybook</title>

    <style>
      html,
      body {
        overflow: hidden;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    <style>
      #root[hidden],
      #docs-root[hidden] {
        display: none !important;
      }
    </style>

  </head>

  <body>
    <div id="root"></div>
    <div id="docs-root"></div>
    <script type="module">
      import './node_modules/@web/storybook-prebuilt/manager.js';

      import '@storybook/addon-knobs/register';
    </script>

</body></html>

So the knobs addon is coming from my html. Not sure why though

TomzBench commented 3 years ago

I used the --app-index arg to pass the index page explicitly. So I passed the same html but deleted the import knob addon from the script tag. But then I receive this error

Loading module from “http://localhost:8000/{...}/node_modules/@web/storybook-prebuilt/manager.js” was blocked because of a disallowed MIME type (“text/plain”).

LarsDenBakker commented 3 years ago

That's strange, this import must come from somewhere. You're certain there is no main.js file somewhere interfering? I have added an example project here: https://github.com/modernweb-dev/example-projects/tree/master/storybook

TomzBench commented 3 years ago

Yes I was running with the assumption of the wrong .storybook config dir. I passed the .storybook config fold explicitly in the plugin and it worked. Whoops! :)