storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.61k stars 9.31k forks source link

Failed to fetch dynamically imported module: GlobalScrollAreaStyles, OverlayScrollbars, WithTooltip #14694

Open pdimova opened 3 years ago

pdimova commented 3 years ago

I'm trying to upgrade Storybook to the latest version 6.2.8

Had multiple issues upgrading through yarn upgrade so the final solution was to remove all old packages and run npx -p @storybook/cli@ sb init. We discarded our old configuration (Storybook hasn't been modified too much prior to this upgrade) and now we're using the default config which came with the install, just used custom logic to load all of the stories still relying on the storiesOf api.

main.js


const path = require("path")

const toPath = (_path) => path.join(process.cwd(), _path)

module.exports = {
  "stories": [
    "./load-stories.js",

  ],
  "addons": [
    "@storybook/addon-links",
    {
      name: '@storybook/addon-essentials',
      options: {
        docs: false,
      }
    }
  ],
  // https://github.com/storybookjs/storybook/issues/13277
  webpackFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          "@emotion/styled": toPath("node_modules/@emotion/styled"),
          "@emotion/provider": toPath("node_modules/@emotion/provider"),
          "@emotion/core": toPath("node_modules/@emotion/react"),
          "emotion-theming": toPath("node_modules/@emotion/react"),
          "babel-plugin-emotion": toPath("node_modules/@emotion/babel-plugin"),
        }
      }
    };
  }
}

The issue is that in 2 out of 3 runs, Storybook ui will throw an error in the browser:

Screenshot 2021-04-22 at 15 13 48

The error persists until I reinstall the storybook packages. The first run goes well, then if I restart the server it usually fails with the aforementioned error.

"@babel/core": "^7.13.15", @storybook/addon-actions: ^6.2.8 => 6.2.8 @storybook/addon-essentials: ^6.2.8 => 6.2.8 @storybook/addon-links: ^6.2.8 => 6.2.8 @storybook/react: ^6.2.8 => 6.2.8 "react": "^16.9.0" => 16.9.0 "react-dom": "^16.9.0" => 16.9.0 "typescript": "^3.5.3" => 3.8.3 "webpack": "^4.17.1" => 4.46.0

shilman commented 3 years ago

Do you have a repro repo you can share?

pdimova commented 3 years ago

Yes, I have. https://github.com/pdimova/storybook-failed-fetching

Actually, while I was preparing a repro repo I stumbled upon the solution. We happen to have "acorn": "^7.1.1", added to the package.json resolutions for some reason (something related to Nextjs). Once I removed that package from there it all started to work smoothly (at least for now).

alexworker23 commented 3 years ago

I am experiencing the exact same errors with resolutions: { "acorn": "8.2.1" }. The only difference is that I have 0 successful runs. Each storybook run fails with the same logs.

SethDavenport commented 3 years ago

I'm also getting the same error. Persists even without the acorn resolution - Does anyone know what the actual correct version of acorn should be?

SethDavenport commented 3 years ago

OK this comment (https://github.com/storybookjs/storybook/issues/14083#issuecomment-789832448) also helped me. In my case the full workaround was

Nuking node_modules is important because it nukes a stale cache that was causing weird storybook behaviour.

pdimova commented 3 years ago

OK this comment (#14083 (comment)) also helped me. In my case the full workaround was

  • get rid of the acorn entry in my resolutions (should never have been there in the first place)
  • rm -rf node_modules && yarn

Nuking node_modules is important because it nukes a stale cache that was causing weird storybook behavior.

I also tested this approach initially but it wasn't a stable fix - the build got broken after the first run each time. I tried deleting the Storybook cache node_modules/.cache/storybook multiple times or using the --no-manager-cache cli option when starting it .. but it was still the same for my case

zakkor commented 3 years ago

I can also confirm that the workaround isn't working for us either - this makes projects with Svelte and optional chaining non-functional

timgoeller commented 3 years ago

@zakkor I was able to work around this by

  1. removing the acorn resolution
  2. then calling rm -rf node_modules && yarn
  3. then adding the acorn resolution again
  4. then calling yarn install

While this is definitely not a future-proof way to handle this, it allows you to at least run storybook in the meantime.

Edit: This seems to work only in some cases though. Meh.

olee commented 3 years ago

I noticed the weird behavior of it sometimes seemingly working is caused by the build cache in node_modules/.cache. When this is cleared before a build, it will always crash with an override to acorn.

EDIT: Just found out about @storybook/builder-webpack5 so I guess I will go with this

jstarmx commented 3 years ago

@zakkor I was able to work around this by

  1. removing the acorn resolution
  2. then calling rm -rf node_modules && yarn
  3. then adding the acorn resolution again
  4. then calling yarn install

While this is definitely not a future-proof way to handle this, it allows you to at least run storybook in the meantime.

Edit: This seems to work only in some cases though. Meh.

This worked for me locally, but I still had the issue when running on GitHub Actions (maybe due to caches being more difficult to clear).

EDIT: Just found out about @storybook/builder-webpack5 so I guess I will go with this

@storybook/builder-webpack5 resolved the issue for me completely.

jsheely commented 2 years ago

I am currently experiencing this issue. Switching to webpack5 comes with a whole lot of extra baggage with the pollyfill situation with stream and other node packages.

What is the trigger for this? I pulled one of my packages out of a mono repo and this started to become an issue. Is it a specific version of Storybook?

Elykauf commented 2 years ago

Any updates on this?

dayyad commented 2 years ago

@zakkor I was able to work around this by

1. removing the `acorn` resolution

2. _then_  calling `rm -rf node_modules && yarn`

3. _then_ adding the `acorn` resolution again

4. _then_  calling `yarn install`

While this is definitely not a future-proof way to handle this, it allows you to at least run storybook in the meantime.

Edit: This seems to work only in some cases though. Meh.

This worked for me, although I still have to refresh the storybook in browser every time I start it to get it working.