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

[Bug]: [7.0.0.0-beta.38] Storybook add-ons could not be resolved after migrating to v7 #20876

Closed
deRaaf opened this issue Feb 1, 2023 · 18 comments
Labels

Comments

@deRaaf
Copy link

deRaaf commented Feb 1, 2023

Describe the bug

After migrating from v6.5.15 to v7.0.0.0-beta.38 I get the below errors in my terminal whenever I start storybook. Not sure if relevant, but I don't use yarn PnP.

✘ [ERROR] Could not resolve "@storybook/addon-measure/manager"

    node_modules/@storybook/addon-essentials/dist/measure/manager.mjs:1:11:
      1 │ export*from"@storybook/addon-measure/manager";
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-measure" here
  because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@storybook/addon-measure/manager" as external to exclude it
  from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "@storybook/addon-controls/manager"

    node_modules/@storybook/addon-essentials/dist/controls/manager.mjs:1:11:
      1 │ export*from"@storybook/addon-controls/manager";
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-controls" here
  because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@storybook/addon-controls/manager" as external to exclude it
  from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "@storybook/addon-toolbars/manager"

    node_modules/@storybook/addon-essentials/dist/toolbars/manager.mjs:1:11:
      1 │ export*from"@storybook/addon-toolbars/manager";
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-toolbars" here
  because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@storybook/addon-toolbars/manager" as external to exclude it
  from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "@storybook/addon-viewport/manager"

    node_modules/@storybook/addon-essentials/dist/viewport/manager.mjs:1:11:
      1 │ export*from"@storybook/addon-viewport/manager";
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-viewport" here
  because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@storybook/addon-viewport/manager" as external to exclude it
  from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "@storybook/addon-outline/manager"

    node_modules/@storybook/addon-essentials/dist/outline/manager.mjs:1:11:
      1 │ export*from"@storybook/addon-outline/manager";
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-outline" here
  because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@storybook/addon-outline/manager" as external to exclude it
  from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "@storybook/addon-backgrounds/manager"

    node_modules/@storybook/addon-essentials/dist/backgrounds/manager.mjs:1:11:
      1 │ export*from"@storybook/addon-backgrounds/manager";
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-backgrounds" here
  because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@storybook/addon-backgrounds/manager" as external to exclude it
  from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "@storybook/addon-actions/manager"

    node_modules/@storybook/addon-essentials/dist/actions/manager.mjs:1:11:
      1 │ export*from"@storybook/addon-actions/manager";
        ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-actions" here
  because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@storybook/addon-actions/manager" as external to exclude it
  from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "@storybook/global"

    node_modules/@storybook/addon-interactions/dist/manager.mjs:1:7335:
      1 │ ...port{global as global2}from"@storybook/global";import*as React15 from"re...
        ╵                               ~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@storybook/global" here because it's
  not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@storybook/global" as external to exclude it from the bundle,
  which will remove this error.

✘ [ERROR] Could not resolve "@storybook/instrumenter"

    node_modules/@storybook/addon-interactions/dist/manager.mjs:1:7636:
      1 │ ...ates as CallStates6}from"@storybook/instrumenter";import*as React14 from...
        ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@storybook/instrumenter" here because
  it's not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@storybook/instrumenter" as external to exclude it from the
  bundle, which will remove this error.

✘ [ERROR] Could not resolve "react-resize-detector"

    node_modules/@storybook/addon-a11y/dist/manager.mjs:1:5397:
      1 │ ...rt{useResizeDetector}from"react-resize-detector";var List=styled3.div({d...
        ╵                             ~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "react-resize-detector" here because
  it's not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "react-resize-detector" as external to exclude it from the
  bundle, which will remove this error.

✘ [ERROR] Could not resolve "@storybook/addon-highlight"

    node_modules/@storybook/addon-a11y/dist/manager.mjs:1:6942:
      1 │ ...;import{HIGHLIGHT}from"@storybook/addon-highlight";var colorsByType=[con...
        ╵                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-highlight" here
  because it's not listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "@storybook/addon-highlight" as external to exclude it from the
  bundle, which will remove this error.

✘ [ERROR] Could not resolve "polished"

    node_modules/@storybook/addon-interactions/dist/manager.mjs:1:7913:
      1 │ ...rentize as transparentize3}from"polished";import React2 from"react";impo...
        ╵                                   ~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "polished" here because it's not
  listed as a dependency of this package:

    ../../../.pnp.cjs:43:33:
      43 │           "packageDependencies": [\
         ╵                                  ~~

  You can mark the path "polished" as external to exclude it from the bundle, which will
  remove this error.

ERR! Error: Build failed with 12 errors:
ERR! node_modules/@storybook/addon-a11y/dist/manager.mjs:1:5397: ERROR: Could not resolve "react-resize-detector"
ERR! node_modules/@storybook/addon-a11y/dist/manager.mjs:1:6942: ERROR: Could not resolve "@storybook/addon-highlight"
ERR! node_modules/@storybook/addon-essentials/dist/actions/manager.mjs:1:11: ERROR: Could not resolve "@storybook/addon-actions/manager"
ERR! node_modules/@storybook/addon-essentials/dist/backgrounds/manager.mjs:1:11: ERROR: Could not resolve "@storybook/addon-backgrounds/manager"
ERR! node_modules/@storybook/addon-essentials/dist/controls/manager.mjs:1:11: ERROR: Could not resolve "@storybook/addon-controls/manager"
ERR! ...
ERR!     at failureErrorWithLog (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:1604:15)
ERR!     at /Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:1056:28
ERR!     at runOnEndCallbacks (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:1476:61)
ERR!     at buildResponseToResult (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:1054:7)
ERR!     at /Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:1166:14
ERR!     at responseCallbacks.<computed> (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:701:9)
ERR!     at handleIncomingPacket (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:756:9)
ERR!     at Socket.readFromStdout (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:677:7)
ERR!     at Socket.emit (node:events:513:28)
ERR!     at addChunk (node:internal/streams/readable:324:12)
ERR!  Error: Build failed with 12 errors:
ERR! node_modules/@storybook/addon-a11y/dist/manager.mjs:1:5397: ERROR: Could not resolve "react-resize-detector"
ERR! node_modules/@storybook/addon-a11y/dist/manager.mjs:1:6942: ERROR: Could not resolve "@storybook/addon-highlight"
ERR! node_modules/@storybook/addon-essentials/dist/actions/manager.mjs:1:11: ERROR: Could not resolve "@storybook/addon-actions/manager"
ERR! node_modules/@storybook/addon-essentials/dist/backgrounds/manager.mjs:1:11: ERROR: Could not resolve "@storybook/addon-backgrounds/manager"
ERR! node_modules/@storybook/addon-essentials/dist/controls/manager.mjs:1:11: ERROR: Could not resolve "@storybook/addon-controls/manager"
ERR! ...
ERR!     at failureErrorWithLog (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:1604:15)
ERR!     at /Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:1056:28
ERR!     at runOnEndCallbacks (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:1476:61)
ERR!     at buildResponseToResult (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:1054:7)
ERR!     at /Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:1166:14
ERR!     at responseCallbacks.<computed> (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:701:9)
ERR!     at handleIncomingPacket (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:756:9)
ERR!     at Socket.readFromStdout (/Users/tim/Documents/projects/ntri-components-react/node_modules/esbuild/lib/main.js:677:7)
ERR!     at Socket.emit (node:events:513:28)
ERR!     at addChunk (node:internal/streams/readable:324:12) {
ERR!   errors: [
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "react-resize-detector"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "@storybook/addon-highlight"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "@storybook/addon-actions/manager"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "@storybook/addon-backgrounds/manager"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "@storybook/addon-controls/manager"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "@storybook/addon-measure/manager"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "@storybook/addon-outline/manager"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "@storybook/addon-toolbars/manager"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "@storybook/addon-viewport/manager"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "@storybook/global"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "@storybook/instrumenter"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [Array],
ERR!       pluginName: '',
ERR!       text: 'Could not resolve "polished"'
ERR!     }
ERR!   ],
ERR!   warnings: []
ERR! }

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

I'm using Vite and React.

To Reproduce

The same issue appears in a reproduction with `npx sb@next sandbox` and no adjustments.

System

System:
    OS: macOS 13.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 18.13.0 - /usr/local/bin/node
    Yarn: 3.2.1 - /usr/local/bin/yarn
    npm: 8.19.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 109.0
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/addon-interactions: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/addon-links: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/blocks: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/react: ^7.0.0-beta.38 => 7.0.0-beta.38 
    @storybook/react-vite: ^7.0.0-beta.38 => 7.0.0-beta.38

Additional context

No response

@shilman
Copy link
Member

shilman commented Feb 4, 2023

Closing this as a duplicate to #20405 -- different symptoms, but I assume fixing PnP support will fix this issue too if there are no extra steps needed to reproduce.

@shilman shilman closed this as completed Feb 4, 2023
@shilman shilman added yarn / npm Yarn / npm acting weird duplicate and removed needs triage labels Feb 4, 2023
@deRaaf
Copy link
Author

deRaaf commented Feb 15, 2023

@shilman Hi, as the issue you mentioned is closed, should this issue be fixed in 7.0.0-beta.48? (I still get these errors)

@ofux
Copy link

ofux commented Mar 7, 2023

@shilman Hi, I have the errors described in this issue, with version 7.0.0-beta.62. Is PnP support supposed to be fixed already?

@shilman
Copy link
Member

shilman commented Mar 7, 2023

@ofux Supposed to be! Do you have a repro you can share?

@ar7casper
Copy link

ar7casper commented Mar 11, 2023

@shilman Facing the same issue.
Using nx with SB@7 rc-01 and pnpm

@ar7casper
Copy link

@IanVS

That's the repo you asked for on Discord - https://github.com/sashka-ltd/nx-sb-7

@IanVS
Copy link
Member

IanVS commented Mar 21, 2023

Hmmmm, I tested out the reproduction from @ar7casper and I don't see these errors, only "no stories found", which indicates to me that SB is at least loading up correctly.

@IanVS
Copy link
Member

IanVS commented Mar 23, 2023

Going to re-close this for now unless someone's still having issues.

@abusarah-tech
Copy link

abusarah-tech commented Apr 9, 2023

I am having this exact issue and it is easily reproducible through Nuxt 3 project.

npx nuxi init <project-name>
npx storybook@next init --type vue3 --builder vite

I also re-installed the packages using yarn v3.5.0 with nodeLinker: node-modules. I am not sure how to work around this.

EDIT
I was able to solve the problem by deleting ~/.pnp.cjs that I found in my home directory.

@YarnSh39
Copy link

YarnSh39 commented Apr 12, 2023

we are running to the same issue in next project after running npx storybook@latest upgrade we have tried to delete node_modules install it manually with Yarn but nothing is working. We did not found solution in parent task.

we are using next, node v18.12.1, and yarn is 3.3.1

resolved with removing .pnp.js.

@landsman
Copy link

landsman commented May 10, 2023

I was facing exactly the same issue after automatic upgrade.
Removing ~/.pnp.cjs helped me, as @Abuhafsa suggested 🙏

@s0n4
Copy link

s0n4 commented May 11, 2023

I have the exact same issue, but i don't seem to have a .pnp.cjs. Neither at my home director nor in the project root.
I do run the storybook as a yarn-workspace however. So i have a pnpm-workspace.yaml.
My .yarnrc.yml in the root folder includes the following lines to make sure not to use pnp but i still get the pnp-linked errors mentioned above.

nmHoistingLimits: workspaces
nodeLinker: node-modules

In my home directory i had a .pnp-state folder which i tried to delete but didn't seem to help.

My setup:

  • Vue 2.7.14
  • Vite 4.3.2
  • Storybook 7.0.10
  • Vuetify 2.6.15
  • @socheatsok78/storybook-addon-vuetify 0.1.9 (enables SB to work with vuetify)

Maybe someone has another idea?

EDIT:
I found it. It had been hiding in the parent folder of my project. That did indeed fix some issues.

@IanVS
Copy link
Member

IanVS commented May 11, 2023

@s0n4 you could try running something like this on your command line:

find ~ -name ".pnp.*"

Then, if you don't find anything, look in /users and / just in case. The fact that you had a pnp state folder in your home tells me that you did have pnp running there at one time, so there's probably a .pnp file there somewhere (maybe with a different extension).

@sbolel
Copy link

sbolel commented Jun 19, 2023

After trying everything else, removing ~/.pnp.cjs as @Abuhafsa suggested also worked for me 🚀

This should be documented somewhere 🕵️

@hadynz
Copy link

hadynz commented May 9, 2024

@s0n4 you could try running something like this on your command line:

find ~ -name ".pnp.*"

Then, if you don't find anything, look in /users and / just in case. The fact that you had a pnp state folder in your home tells me that you did have pnp running there at one time, so there's probably a .pnp file there somewhere (maybe with a different extension).

This solved my problem. Like other users, I didn't have a .pnp.cjs in my project. However, turns out I somehow had one lingering around in one of the parent folders (e.g. ../../.pnp.cjs) of my project which this command immediately showed.

@matiasperrone-commandlink

.pnp.cjs

I

After trying everything else, removing ~/.pnp.cjs as @Abuhafsa suggested also worked for me 🚀

This should be documented somewhere 🕵️

I had to do the same... makes no sense! first time I heard of it

@xraystyle1980
Copy link

I am having this exact issue and it is easily reproducible through Nuxt 3 project.

npx nuxi init <project-name>
npx storybook@next init --type vue3 --builder vite

I also re-installed the packages using yarn v3.5.0 with nodeLinker: node-modules. I am not sure how to work around this.

EDIT I was able to solve the problem by deleting ~/.pnp.cjs that I found in my home directory.

Just ran into this issue and deleting .pnp.cjs did the trick. 🎃

@SheshkoPavel
Copy link

Next.js v14 app router, node v20.18.1, yarn 4.5.1, strorybook 8.4.4 , same problem
Image

Error: Build failed with 11 errors:
node_modules/@storybook/addon-essentials/dist/actions/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-actions/manager"...

resolved with removing .pnp.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Archived in project
Development

No branches or pull requests