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

Not fully compatible with Yarn PnP #141

Open
remigailard80 opened this issue Nov 6, 2021 · 45 comments
Open

Not fully compatible with Yarn PnP #141

remigailard80 opened this issue Nov 6, 2021 · 45 comments

Comments

@remigailard80
Copy link

remigailard80 commented Nov 6, 2021

https://github.com/remigailard80/Storybook-Vite


Env : Node 14.17
MacBook Air (M1, 2020) Big Sur 11.3.1

I tried to start storybook project with vite with this flow.


yarn create vite
cd vite-project
npx sb@next init --builder storybook-builder-vite
yarn storybook

and saw this error.

Error: storybook-builder-vite tried to access @storybook/core-common, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

After saw this error, I tried install @storybook/core-common, @storybook/client-api, @storybook/client-logger(?).
Eventually, it succeeded in running the development server, but it was caught in infinite loading.

But when i use nodeLinker: node-modules, It works fine.

@IanVS
Copy link
Member

IanVS commented Nov 17, 2021

but it was caught in infinite loading

Was there an error in the console?

@remigailard80
Copy link
Author

remigailard80 commented Nov 19, 2021

No, just

Info @storybook/react v6.3.12
info 
info => Loading presets
info => Using prebuilt manager
Pre-bundling dependencies:
  react
  react-dom
  @mdx-js/react
  @storybook/addon-docs
  @storybook/client-api
  (...and 3 more)
(this will be run only when your dependencies or config have changed)
╭──────────────────────────────────────────────────────╮
│                                                      │
│   Storybook 6.3.12 started                           │
│   1.38 s for preview                                 │
│                                                      │
│    Local:            http://localhost:6006/          │
│    On your network:  http://192.168.219.126:6006/    │
│                                                      │
╰──────────────────────────────────────────────────────╯
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/.yarn/__virtual__/markdown-to-jsx-virtual-59b0b6127e/0/cache/markdown-to-jsx-npm-7.1.3-7b61f9f1da-9809d898ef.zip/node_modules/markdown-to-jsx/dist/index.module.js" points to missing source files
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/.yarn/__virtual__/react-element-to-jsx-string-virtual-452a1c2117/0/cache/react-element-to-jsx-string-npm-14.3.4-47e7176d93-42bcd4423f.zip/node_modules/react-element-to-jsx-string/dist/esm/index.js" points to missing source files
[BABEL] Note: The code generator has deoptimised the styling of /Users/kimminseok/viteproject/Storybook-Vite/node_modules/.vite/chunk-SYLNUZW7.js?v=b3c9673a as it exceeds the max of 500KB.
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/.yarn/cache/@base2-pretty-print-object-npm-1.0.1-e7e95cfd98-1e8a5af578.zip/node_modules/@base2/pretty-print-object/dist/index.js" points to missing source files
[BABEL] Note: The code generator has deoptimised the styling of /Users/kimminseok/viteproject/Storybook-Vite/node_modules/.vite/@storybook_addon-docs.js?v=b3c9673a as it exceeds the max of 500KB.
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/node_modules/.vite/@storybook_client-api.js" points to missing source files
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/node_modules/.vite/@storybook_client-logger.js" points to missing source files
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/node_modules/.vite/react.js" points to missing source files
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/node_modules/.vite/@mdx-js_react.js" points to missing source files
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/node_modules/.vite/@storybook_react.js" points to missing source files
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/node_modules/.vite/react_jsx-dev-runtime.js" points to missing source files
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/node_modules/.vite/chunk-VJ6LBEXO.js" points to missing source files
Sourcemap for "/Users/kimminseok/viteproject/Storybook-Vite/node_modules/.vite/@storybook_addon-docs.js" points to missing source files

The exact errors were,

Required package: @storybook/core-common
ERR! Required by: storybook-builder-vite@virtual:c56b46d83dc705f61d645efafd50b5dd10b694a413a2075f2bfa433bbaa41df431f824c0f747468efbf1694d7d2f15adbae617c2c5c3f6b6e0b1978b92526b7c#npm:0.1.5 (via /Users/kimminseok/viteproject/Storybook-Vite/.yarn/__virtual__/storybook-builder-vite-virtual-9b0feccb35/0/cache/storybook-builder-vite-npm-0.1.5-e8799e026b-ee76a1b16a.zip/node_modules/storybook-builder-vite/)
[vite] Internal server error: Failed to resolve import "@storybook/client-api" from "../../../../virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
File: /virtual:/@storybook/builder-vite/vite-app.js
  5  |  import '/Users/kimminseok/viteproject/Storybook-Vite/.yarn/__virtual__/@storybook-core-client-virtual-dce2e9bb6b/0/cache/@storybook-core-client-npm-6.3.12-36c6f1d68a-896ced7a53.zip/node_modules/@storybook/core-client/dist/esm/globals/globals.js'; */
  6  |  
  7  |  import { addDecorator, addParameters, addLoader, addArgTypesEnhancer, addArgsEnhancer } from '@storybook/client-api';
     |                                                                                                ^
  8  |  import { logger } from '@storybook/client-logger';
  9  |  import * as config_0 from '/@fs//Users/kimminseok/viteproject/Storybook-Vite/.yarn/__virtual__/@storybook-addon-docs-virtual-0c38f8d288/0/cache/@storybook-addon-docs-npm-6.3.12-059be55a88-d89ea91e06.zip/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js';

[vite] Internal server error: Failed to resolve import "@storybook/client-logger" from "../../../../virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /virtual:/@storybook/builder-vite/vite-app.js
  6  |  
  7  |  import { addDecorator, addParameters, addLoader, addArgTypesEnhancer, addArgsEnhancer } from '@storybook/client-api';
  8  |  import { logger } from '@storybook/client-logger';
     |                          ^
  9  |  import * as config_0 from '/@fs//Users/kimminseok/viteproject/Storybook-Vite/.yarn/__virtual__/@storybook-addon-docs-virtual-0c38f8d288/0/cache/@storybook-addon-docs-npm-6.3.12-059be55a88-d89ea91e06.zip/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js';
  10 |  import * as config_1 from '/@fs//Users/kimminseok/viteproject/Storybook-Vite/.yarn/__virtual__/@storybook-addon-docs-virtual-0c38f8d288/0/cache/@storybook-addon-docs-npm-6.3.12-059be55a88-d89ea91e06.zip/node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js';

and When I added all of that packages, finally got no error message, but got infinite loading.

@IanVS
Copy link
Member

IanVS commented Nov 19, 2021

This might be solved by #160.

Can you please try updating to v0.1.9 and trying again? Thanks!

@glompix
Copy link

glompix commented Nov 29, 2021

I'm on ^0.1.10 and still seeing this using storybook ^6.4.0. FWIW i am also using yarn 3 with workspaces and zero-install

@IanVS
Copy link
Member

IanVS commented Nov 29, 2021

We needed to revert #160. If you have a minute, could you try using version 0.1.9 to see if it does solve this particular issue?

@remigailard80
Copy link
Author

Still same bug using 0.1.9,

{
  "name": "vite-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "6.4.7",
    "@storybook/addon-essentials": "6.4.7",
    "@storybook/addon-links": "6.4.7",
    "@storybook/react": "6.4.7",
    "@vitejs/plugin-react": "^1.0.0",
    "babel-loader": "^8.2.3",
    "storybook-builder-vite": "0.1.9",
    "vite": "^2.6.4"
  }
}

@IanVS IanVS added hoisting Issue with workspaces or pnpm and removed hoisting Issue with workspaces or pnpm labels Dec 7, 2021
@aweiss-dev
Copy link

aweiss-dev commented Dec 19, 2021

Can Confirm the bug still exists, my packages are

{
  "name": "vite-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "clsx": "^1.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.5.0-alpha.4",
    "@storybook/addon-docs": "^6.4.9",
    "@storybook/addon-essentials": "^6.4.9",
    "@storybook/addon-links": "^6.5.0-alpha.4",
    "@storybook/client-api": "^6.4.9",
    "@storybook/client-logger": "^6.4.9",
    "@storybook/core-common": "^6.4.9",
    "@storybook/react": "^6.4.9",
    "@types/babel__core": "^7.1.17",
    "@types/mdx-js__react": "^1.5.5",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@vitejs/plugin-react": "^1.1.3",
    "autoprefixer": "^10.4.0",
    "babel-loader": "^8.2.3",
    "glob": "^7.2.0",
    "postcss": "^8.4.5",
    "storybook-builder-vite": "^0.1.11",
    "tailwindcss": "^3.0.7",
    "typescript": "^4.5.4",
    "vite": "^2.7.3",
    "webpack": "^5.65.0"
  },
  "packageManager": "yarn@3.1.1"
}

Falling back to nodeLinker: node-modules works.

@erykpiast
Copy link

erykpiast commented Jan 24, 2022

It seems that dependency is really missing in the package.json, I'll create an MR adding it and will try running the fork.

It's actually already added by one of the latest MRs but not yet released to NPM.

@GreenJimmy
Copy link

It seems that dependency is really missing in the package.json, I'll create an MR adding it and will try running the fork.

It's actually already added by one of the latest MRs but not yet released to NPM.

Any update on when it will be released?

@IanVS
Copy link
Member

IanVS commented Jan 28, 2022

I'm not sure what PR @erykpiast is talking about, but I've just released 0.1.14 of this project.

@erykpiast
Copy link

You fixed it here @IanVS https://github.com/eirslett/storybook-builder-vite/pull/195/files thanks for releasing it! :)

@GreenJimmy
Copy link

Not fixed for me with Yarn 3, PNP and Zero Installs:
info @storybook/react v6.4.15 info ERR! Error: storybook-builder-vite tried to access @storybook/core-common (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound. ERR! ERR! Required package: @storybook/core-common ERR! Required by: storybook-builder-vite@virtual:a51224646ccff2cb8e208bda6e4beeb81384f7c6ddd74e69a01386f1a661bd5684f4b1659d343f4da6250c7c59e4efcd224ed1f5b2a06dd9fe5048fe7d3e1523#npm:0.1.14 (via /Users/jt/Developer/onex-design/.yarn/__virtual__/storybook-builder-vite-virtual-45b03745a2/0/cache/storybook-builder-vite-npm-0.1.14-a14c8b1d4b-97c1b8eeb8.zip/node_modules/storybook-builder-vite/dist/)

@erykpiast
Copy link

It kind of works now when you add @storybook/core-common as a dependency to your project (exactly as it asks for). For me, it runs with 0.1.14, but Storybook fails at runtime :/

http://localhost:6006/virtual:/@storybook/builder-vite/vite-app.js net::ERR_ABORTED 404 (Not Found)

Another issue I'd say.

@Arthur944
Copy link

Arthur944 commented Feb 21, 2022

I actually got this working, although it does take some effort. Here's what I did:

1: Add this to your viteFinal function in main.js

config.optimizeDeps.include = [
      ...(config.optimizeDeps?.include ?? []),
      "@mdx-js/react",
      "@storybook/addon-docs",
      "@storybook/react",
      "@storybook/client-api",
      "@storybook/client-logger",
      "fast-deep-equal",
      "lodash",
      "lodash-es",
      "lodash/isPlainObject",
      "lodash/mapValues",
      "lodash/pickBy",
      "lodash/pick",
      "lodash/startCase",
      "lodash/isFunction",
      "lodash/isString",
      "util-deprecate",
      "@storybook/csf",
      "global",
      "synchronous-promise",
      "memoizerific",
      "stable",
      "doctrine",
      "html-tags",
      "escodegen",
      "acorn",
      "acorn-jsx",
      "@base2/pretty-print-object",
      "prop-types",
      "react-dom",
      "qs",
      "uuid-browser",
      "uuid-browser/v4",
      "jest-mock",
    ];
    config.define = { ...config.define, global: {} };

Install the following libraries:

yarn add @mdx-js/react @storybook/addon-docs @storybook/react @storybook/client-api @storybook/client-logger fast-deep-equal lodash lodash-es util-deprecate @storybook/csf global synchronous-promise memoizerific stable doctrine html-tags escodegen acorn acorn-jsx @base2/pretty-print-object prop-types react-dom qs uuid-browser jest-mock

Install and unplug object-inspect. I also had to add this resolution to package.json:

"resolutions": {
    "object-inspect": "1.10.2"
  }

Go to the unplugged object-import's index.js and remove .custom from line 32.

Remove any existing node_modules directories and run yarn storybook

After these steps the default stories showed up for me.

@IanVS
Copy link
Member

IanVS commented Mar 31, 2022

@samydoesit thanks for the report, but this issue is about problems with yarn. Would you mind opening a new issue and including a link to a reproduction repo? That's the best way for us to help you out.

@IanVS
Copy link
Member

IanVS commented Apr 11, 2022

Hi, is anyone still having this issue? If not, I'd like to close this issue. If so, can you please share what versions you are using?

@IanVS
Copy link
Member

IanVS commented Apr 14, 2022

Going to close for now, speak up if you think this should be re-opened.

@IanVS IanVS closed this as completed Apr 14, 2022
@yonathan06
Copy link

Getting the same issue with 0.1.33

5:29:28 PM [vite] Internal server error: Failed to resolve import "@storybook/addon-docs/dist/esm/frameworks/common/config.js" from "../../../../../../../virtual:/@storybook/builder-vite/vite-app.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /virtual:/@storybook/builder-vite/vite-app.js
  12 |      } from '@storybook/client-api';
  13 |      import { logger } from '@storybook/client-logger';
  14 |      import * as config_0 from '@storybook/addon-docs/dist/esm/frameworks/common/config.js'
     |                                 ^
  15 |  import * as config_1 from '@storybook/addon-docs/dist/esm/frameworks/react/config.js'
  16 |  import * as config_2 from '@storybook/react/dist/esm/client/preview/config'
      at formatError (/Users/yonatanbd/Code/clients/openreel/balloon-web/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38663:46)
      at TransformContext.error (/Users/yonatanbd/Code/clients/openreel/balloon-web/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38659:19)
      at normalizeUrl (/Users/yonatanbd/Code/clients/openreel/balloon-web/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:56830:26)
      at async TransformContext.transform (/Users/yonatanbd/Code/clients/openreel/balloon-web/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:56979:57)
      at async Object.transform (/Users/yonatanbd/Code/clients/openreel/balloon-web/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38900:30)
      at async doTransform (/Users/yonatanbd/Code/clients/openreel/balloon-web/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:55857:29)

Fixed it with installing @storybook/addon-docs manually npm i @storybook/addon-docs -D

@IanVS
Copy link
Member

IanVS commented May 12, 2022

@yonathan06 did you previously have @storybook/addon-essentials installed?

@yonathan06
Copy link

yes, version ^6.4.22 in package.json

@IanVS
Copy link
Member

IanVS commented May 12, 2022

Wild. Could you reproduce the problem and share the output of npx sb@next info? That should show the versions of storybook packages. If that doesn't work, can you share the versions out of your package.json? And even better, if you can share a repo that reproduces the error.

@yonathan06
Copy link

this is the storybook packages I have currently installed (after fixing the error):

    "@storybook/addon-actions": "^6.4.22",
    "@storybook/addon-docs": "^6.4.22",
    "@storybook/addon-essentials": "^6.4.22",
    "@storybook/addon-interactions": "^6.4.22",
    "@storybook/addon-links": "^6.4.22",
    "@storybook/builder-vite": "^0.1.33",
    "@storybook/react": "^6.4.22",
    "@storybook/testing-library": "^0.0.11",

Before that, everything was up to date and working, it started to have errors after deleting package-lock.json and reinstalling all packages (recreating package-lock.json ) I guess that somewhere there storybook didn't link to the right @storybook/addon-essentials version, so installing it manually with the latest version fixed it

@didiercapozzi
Copy link

https://github.com/remigailard80/Storybook-Vite

Env : Node 14.17

MacBook Air (M1, 2020) Big Sur 11.3.1

I tried to start storybook project with vite with this flow.


yarn create vite
cd vite-project
npx sb@next init --builder storybook-builder-vite
yarn storybook

and saw this error.

Error: storybook-builder-vite tried to access @storybook/core-common, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

After saw this error, I tried install @storybook/core-common, @storybook/client-api, @storybook/client-logger(?). Eventually, it succeeded in running the development server, but it was caught in infinite loading.

But when i use nodeLinker: node-modules, It works fine.

I still have the exact same problem using storybook 6.4.22 and yarn 3.2.1

@IanVS
Copy link
Member

IanVS commented May 17, 2022

@capozzid can you please share a reproduction so I can help troubleshoot what's happening?

@didiercapozzi
Copy link

Env: Node 14.19.1

yarn version: 3.2.1


.yarnrc.yml

yarnPath: .yarn/releases/yarn-3.2.1.cjs

Installation

npx sb init --builder @storybook/builder-vite

When running yarn storybook right after I get:

ERR! Error: @storybook/builder-vite tried to access @storybook/core-common (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.
ERR! 
ERR! Required package: @storybook/core-common
ERR! Required by: @storybook/builder-vite@virtual:959e19889900d57733d0cc61e2a11c0681f159f2cf02f7c004bf73acfd312192a0ea4761b6e5c52cdd1a95b6abd0c5f437e57a7739b5bee5185722f01cb63061#npm:0.1.33 (via /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-builder-vite-virtual-08bca85baf/0/cache/@storybook-builder-vite-npm-0.1.33-e5da27d507-1c8fb0f9e2.zip/node_modules/@storybook/builder-vite/dist/)
ERR! Ancestor breaking the chain: user_interface@workspace:.
ERR! 
ERR! 
ERR! Require stack:
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-builder-vite-virtual-08bca85baf/0/cache/@storybook-builder-vite-npm-0.1.33-e5da27d507-1c8fb0f9e2.zip/node_modules/@storybook/builder-vite/dist/transform-iframe-html.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-builder-vite-virtual-08bca85baf/0/cache/@storybook-builder-vite-npm-0.1.33-e5da27d507-1c8fb0f9e2.zip/node_modules/@storybook/builder-vite/dist/index.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-core-server-virtual-d7c53a3d04/0/cache/@storybook-core-server-npm-6.4.22-a44fba2c4f-38183ededd.zip/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-core-server-virtual-d7c53a3d04/0/cache/@storybook-core-server-npm-6.4.22-a44fba2c4f-38183ededd.zip/node_modules/@storybook/core-server/dist/cjs/build-static.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-core-server-virtual-d7c53a3d04/0/cache/@storybook-core-server-npm-6.4.22-a44fba2c4f-38183ededd.zip/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-core-virtual-d0e4899fb0/0/cache/@storybook-core-npm-6.4.22-af725ed674-ae7728f9b3.zip/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-core-virtual-d0e4899fb0/0/cache/@storybook-core-npm-6.4.22-af725ed674-ae7728f9b3.zip/node_modules/@storybook/core/server.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-react-virtual-f3aa693647/0/cache/@storybook-react-npm-6.4.22-51754b1c40-ea49920d82.zip/node_modules/@storybook/react/dist/cjs/server/index.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-react-virtual-f3aa693647/0/cache/@storybook-react-npm-6.4.22-51754b1c40-ea49920d82.zip/node_modules/@storybook/react/bin/index.js
ERR!     at Function.require$$0.Module._resolveFilename (/opt/erx-soft/code/typescript/user_interface/.pnp.cjs:31111:13)
ERR!     at Function.require$$0.Module._load (/opt/erx-soft/code/typescript/user_interface/.pnp.cjs:30965:42)
ERR!     at Module.require (internal/modules/cjs/loader.js:974:19)
ERR!     at require (internal/modules/cjs/helpers.js:101:18)
ERR!     at Object.<anonymous> (/opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-builder-vite-virtual-08bca85baf/0/cache/@storybook-builder-vite-npm-0.1.33-e5da27d507-1c8fb0f9e2.zip/node_modules/@storybook/builder-vite/dist/transform-iframe-html.js:4:23)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR!     at Object.require$$0.Module._extensions..js (/opt/erx-soft/code/typescript/user_interface/.pnp.cjs:31155:33)
ERR!     at Module.load (internal/modules/cjs/loader.js:950:32)
ERR!     at Function.require$$0.Module._load (/opt/erx-soft/code/typescript/user_interface/.pnp.cjs:30995:14)
ERR!  Error: @storybook/builder-vite tried to access @storybook/core-common (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.
ERR! 
ERR! Required package: @storybook/core-common
ERR! Required by: @storybook/builder-vite@virtual:959e19889900d57733d0cc61e2a11c0681f159f2cf02f7c004bf73acfd312192a0ea4761b6e5c52cdd1a95b6abd0c5f437e57a7739b5bee5185722f01cb63061#npm:0.1.33 (via /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-builder-vite-virtual-08bca85baf/0/cache/@storybook-builder-vite-npm-0.1.33-e5da27d507-1c8fb0f9e2.zip/node_modules/@storybook/builder-vite/dist/)
ERR! Ancestor breaking the chain: user_interface@workspace:.
ERR! 
ERR! 
ERR! Require stack:
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-builder-vite-virtual-08bca85baf/0/cache/@storybook-builder-vite-npm-0.1.33-e5da27d507-1c8fb0f9e2.zip/node_modules/@storybook/builder-vite/dist/transform-iframe-html.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-builder-vite-virtual-08bca85baf/0/cache/@storybook-builder-vite-npm-0.1.33-e5da27d507-1c8fb0f9e2.zip/node_modules/@storybook/builder-vite/dist/index.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-core-server-virtual-d7c53a3d04/0/cache/@storybook-core-server-npm-6.4.22-a44fba2c4f-38183ededd.zip/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-core-server-virtual-d7c53a3d04/0/cache/@storybook-core-server-npm-6.4.22-a44fba2c4f-38183ededd.zip/node_modules/@storybook/core-server/dist/cjs/build-static.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-core-server-virtual-d7c53a3d04/0/cache/@storybook-core-server-npm-6.4.22-a44fba2c4f-38183ededd.zip/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-core-virtual-d0e4899fb0/0/cache/@storybook-core-npm-6.4.22-af725ed674-ae7728f9b3.zip/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-core-virtual-d0e4899fb0/0/cache/@storybook-core-npm-6.4.22-af725ed674-ae7728f9b3.zip/node_modules/@storybook/core/server.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-react-virtual-f3aa693647/0/cache/@storybook-react-npm-6.4.22-51754b1c40-ea49920d82.zip/node_modules/@storybook/react/dist/cjs/server/index.js
ERR! - /opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-react-virtual-f3aa693647/0/cache/@storybook-react-npm-6.4.22-51754b1c40-ea49920d82.zip/node_modules/@storybook/react/bin/index.js
ERR!     at Function.require$$0.Module._resolveFilename (/opt/erx-soft/code/typescript/user_interface/.pnp.cjs:31111:13)
ERR!     at Function.require$$0.Module._load (/opt/erx-soft/code/typescript/user_interface/.pnp.cjs:30965:42)
ERR!     at Module.require (internal/modules/cjs/loader.js:974:19)
ERR!     at require (internal/modules/cjs/helpers.js:101:18)
ERR!     at Object.<anonymous> (/opt/erx-soft/code/typescript/user_interface/.yarn/__virtual__/@storybook-builder-vite-virtual-08bca85baf/0/cache/@storybook-builder-vite-npm-0.1.33-e5da27d507-1c8fb0f9e2.zip/node_modules/@storybook/builder-vite/dist/transform-iframe-html.js:4:23)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR!     at Object.require$$0.Module._extensions..js (/opt/erx-soft/code/typescript/user_interface/.pnp.cjs:31155:33)
ERR!     at Module.load (internal/modules/cjs/loader.js:950:32)
ERR!     at Function.require$$0.Module._load (/opt/erx-soft/code/typescript/user_interface/.pnp.cjs:30995:14)

@IanVS
Copy link
Member

IanVS commented May 17, 2022

I was able to get this working, but it's not pretty. First of all, it seems necessary to set pnpMode: loose in .yarnrc.yml.

Then, because yarn pnp prevents us from relying on the correct packages being installed in node_modules from other storybook packages, it's necessary to install many of the internal storybook packages into your project as well. This is what I ended up with after hitting a "not found" error, adding the package, running yarn install and repeating the process:

"devDependencies": {
	// ...
    "@storybook/addon-actions": "^6.5.0-rc.0",
    "@storybook/addon-backgrounds": "^6.5.0-rc.0",
    "@storybook/addon-docs": "^6.5.0-rc.0",
    "@storybook/addon-essentials": "^6.5.0-rc.0",
    "@storybook/addon-interactions": "^6.5.0-rc.0",
    "@storybook/addon-links": "^6.5.0-rc.0",
    "@storybook/addon-measure": "^6.5.0-rc.0",
    "@storybook/addon-outline": "^6.5.0-rc.0",
    "@storybook/addons": "^6.5.0-rc.0",
    "@storybook/builder-vite": "^0.1.33",
    "@storybook/channel-postmessage": "^6.5.0-rc.0",
    "@storybook/channel-websocket": "^6.5.0-rc.0",
    "@storybook/client-api": "^6.5.0-rc.0",
    "@storybook/core-common": "^6.5.0-rc.0",
    "@storybook/node-logger": "^6.5.0-rc.0",
    "@storybook/preview-web": "^6.5.0-rc.0",
    "@storybook/react": "^6.5.0-rc.0",
    "@storybook/testing-library": "^0.0.11",
	// ...
  },

When you do this, it might be best to remove the ^ from the versions, because it's very important that the core storybook packages all end up resolving to the exact same version.

If anyone else here has a good understanding of yarn pnp and how to make things work more cleanly, I'd love to hear from you!

@IanVS IanVS reopened this May 17, 2022
@didiercapozzi
Copy link

Using your solution I still get errors. The first one is the @mdx-js/react missing and then, once added, I get the following:

[vite] Internal server error: Failed to resolve import "global" from "../../../../../virtual:/@storybook/builder-vite/setup-addons.js". Does the file exist?
Plugin: vite:import-analysis
File: /virtual:/@storybook/builder-vite/setup-addons.js
1 | import global from 'global';

@zhenximi
Copy link

I tried for a few days now, the last try I installed the not found packages then I got can not read custom of undefined from object-inspect. I am going to try set pnp mode to loose, but this change may break other workspaces

@IanVS
Copy link
Member

IanVS commented May 17, 2022

I see that same error, @zhenximi. It seems to be related to this problem in vite: vitejs/vite#1979

Honestly, it seems like vite support for yarn PNP is not terribly good. :(

@IanVS
Copy link
Member

IanVS commented May 17, 2022

@capozzid oh right, I forgot about the global thing, I had to adjust that. You can try adding it to your devDependencies for now, but I'm going to push a change to this builder to avoid using it, and use globalThis instead.

@didiercapozzi
Copy link

Thanks for your help @IanVS unfortunately I still have " TypeError: require_util_inspect() is undefined" error where storybook builds but can't display my stories

@swandir
Copy link

swandir commented May 17, 2022

Honestly, it seems like vite support for yarn PNP is not terribly good. :(

Yeah, there's an unfixed compatibility problem, that breaks optional node-only modules usage within dependency packages.

I have a PR here vitejs/vite#6493 but it's kind of blocked by the need to change how Vite's replacement module with usage warnings is implemented.

Meanwhile, I have a cleaned up fix here: swandir/vite@927f524

Which I periodically apply on top of Vite releases and publish as tags
https://github.com/swandir/vite/releases/tag/v2.9.9-pnp

You can build and pack a tarball from a tag (or your own fork) and use it via Yarn's file: protocol
https://yarnpkg.com/features/protocols

@mnik01
Copy link

mnik01 commented Sep 21, 2022

Having same issue.

Using: Storybook + SvelteKit

16:40:06 [vite] Internal server error: Failed to resolve import "@storybook/client-api" from "..\..\..\..\virtual:\@storybook\builder-vite\vite-app.js". Does the file exist?

Deps:

"devDependencies": {
		"@babel/core": "^7.19.1",
		"@playwright/test": "^1.25.0",
		"@storybook/addon-actions": "^6.5.12",
		"@storybook/addon-essentials": "^6.5.12",
		"@storybook/addon-interactions": "^6.5.12",
		"@storybook/addon-links": "^6.5.12",
		"@storybook/addon-postcss": "^2.0.0",
		"@storybook/builder-vite": "^0.2.2",
		"@storybook/svelte": "^6.5.12",
		"@storybook/testing-library": "^0.0.13",
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/kit": "next",
		"@types/cookie": "^0.5.1",
		"@typescript-eslint/eslint-plugin": "^5.27.0",
		"@typescript-eslint/parser": "^5.27.0",
		"autoprefixer": "^10.4.7",
		"babel-loader": "^8.2.5",
		"eslint": "^8.16.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-storybook": "^0.6.4",
		"eslint-plugin-svelte3": "^4.0.0",
		"postcss": "^8.4.14",
		"postcss-load-config": "^4.0.1",
		"prettier": "^2.6.2",
		"prettier-plugin-svelte": "^2.7.0",
		"svelte": "^3.50.1",
		"svelte-check": "^2.7.1",
		"svelte-loader": "^3.1.3",
		"svelte-preprocess": "^4.10.7",
		"tailwindcss": "^3.1.5",
		"@storybook/addon-svelte-csf": "^2.0.7",
		"tslib": "^2.3.1",
		"typescript": "^4.7.4",
		"vite": "^3.1.0"
	}

@IanVS
Copy link
Member

IanVS commented Sep 21, 2022

I have a PR open in the main storybook repo which will address this for storybook 7.0. For now the workaround is to add the missing packages to your package.json.

@adalinesimonian
Copy link
Contributor

Piling onto this, when using Vue and PnP, builder-vite errors out completely even if @vitejs/plugin-vue is installed in the root project.

ERR! Error: @storybook/builder-vite requires @vitejs/plugin-vue to be installed when using @storybook/vue or @storybook/vue3.  Please install it and start storybook again.

afaik @vitejs/plugin-vue should be in peerDependencies along with a peerDependenciesMeta entry making it optional, same with @sveltejs/vite-plugin-svelte.

@adalinesimonian
Copy link
Contributor

Opened a PR to add the missing peer deps into this repo: #500

acusti added a commit to acusti/uikit that referenced this issue Oct 13, 2022
required adding a crazy litany of dev dependencies due to poor compatibility with yarn PNP: storybookjs/builder-vite#141 (comment)
acusti added a commit to acusti/uikit that referenced this issue Oct 15, 2022
required adding a crazy litany of dev dependencies due to poor compatibility with yarn PNP: storybookjs/builder-vite#141 (comment)
@Coreusa
Copy link

Coreusa commented Oct 28, 2022

As others have said, adding the dependency it's complaining about to package.json and then running yarn install again fixed the issue.

Under devDependencies add:

"@sveltejs/vite-plugin-svelte": "next". Like so:

image

@georgiosd
Copy link

As a TLDR for anyone visiting this thread: I can confirm that adding a ton of storybook packages with pnpMode: loose works without enabling nodeLinker: node_modules but I've added almost all @storybook packages and still have warnings - hope this can get fixed soon:

"dependencies": {
    "@zmvp/app": "*",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@joshwooding/vite-plugin-react-docgen-typescript": "^0.0.5",
    "@storybook/addon-actions": "7.0.0-alpha.46",
    "@storybook/addon-backgrounds": "7.0.0-alpha.46",
    "@storybook/addon-docs": "7.0.0-alpha.46",
    "@storybook/addon-essentials": "7.0.0-alpha.46",
    "@storybook/addon-highlight": "7.0.0-alpha.46",
    "@storybook/addon-interactions": "7.0.0-alpha.46",
    "@storybook/addon-links": "7.0.0-alpha.46",
    "@storybook/addon-measure": "7.0.0-alpha.46",
    "@storybook/addon-outline": "7.0.0-alpha.46",
    "@storybook/addons": "7.0.0-alpha.46",
    "@storybook/blocks": "7.0.0-alpha.46",
    "@storybook/builder-manager": "7.0.0-alpha.46",
    "@storybook/builder-vite": "7.0.0-alpha.46",
    "@storybook/channel-postmessage": "7.0.0-alpha.46",
    "@storybook/channel-websocket": "7.0.0-alpha.46",
    "@storybook/client-api": "7.0.0-alpha.46",
    "@storybook/codemod": "7.0.0-alpha.46",
    "@storybook/core-client": "7.0.0-alpha.46",
    "@storybook/core-common": "7.0.0-alpha.46",
    "@storybook/core-server": "7.0.0-alpha.46",
    "@storybook/docs-tools": "7.0.0-alpha.46",
    "@storybook/instrumenter": "7.0.0-alpha.46",
    "@storybook/preview-web": "7.0.0-alpha.46",
    "@storybook/react": "7.0.0-alpha.46",
    "@storybook/react-vite": "7.0.0-alpha.46",
    "@storybook/source-loader": "7.0.0-alpha.46",
    "@storybook/store": "7.0.0-alpha.46",
    "@storybook/telemetry": "7.0.0-alpha.46",
    "@storybook/testing-library": "0.0.13",
    "acorn": "^8.8.1",
    "acorn-jsx": "^5.3.2",
    "react-docgen-typescript": "^2.2.2",
    "storybook": "7.0.0-alpha.46",
    "typescript": "^4.8.4",
    "vite": "^3.2.1"
  },
➤ YN0000: ┌ Resolution step
➤ YN0002: │ @devtools-ds/themes@npm:1.2.0 [bed0c] doesn't provide react-dom (paf1c0), requested by @design-systems/utils
➤ YN0002: │ @storybook/addon-docs@npm:7.0.0-alpha.46 [f53fc] doesn't provide @babel/core (p386ab), requested by @babel/plugin-transform-react-jsx
➤ YN0002: │ @storybook/addon-highlight@npm:7.0.0-alpha.46 doesn't provide react (p64130), requested by @storybook/addons    
➤ YN0002: │ @storybook/addon-highlight@npm:7.0.0-alpha.46 doesn't provide react-dom (p7ed89), requested by @storybook/addons
➤ YN0002: │ @storybook/blocks@npm:7.0.0-alpha.46 [f53fc] doesn't provide react-dom (p2409b), requested by @storybook/theming
➤ YN0002: │ @storybook/blocks@npm:7.0.0-alpha.46 [f53fc] doesn't provide react-dom (p70599), requested by @storybook/api    
➤ YN0002: │ @storybook/blocks@npm:7.0.0-alpha.46 [f53fc] doesn't provide react-dom (pa6103), requested by @storybook/components
➤ YN0002: │ @storybook/blocks@npm:7.0.0-alpha.46 [f53fc] doesn't provide react-dom (p79127), requested by @storybook/store  
➤ YN0002: │ @storybook/blocks@npm:7.0.0-alpha.46 [f53fc] doesn't provide react-dom (p44138), requested by react-colorful    
➤ YN0002: │ @storybook/builder-manager@npm:7.0.0-alpha.46 doesn't provide react (p09cf6), requested by @storybook/core-common
➤ YN0002: │ @storybook/builder-manager@npm:7.0.0-alpha.46 doesn't provide react-dom (pe7770), requested by @storybook/core-common
➤ YN0002: │ @storybook/builder-vite@npm:7.0.0-alpha.46 doesn't provide react (p1c84e), requested by @storybook/core-common  
➤ YN0002: │ @storybook/builder-vite@npm:7.0.0-alpha.46 doesn't provide react (p20711), requested by @storybook/client-api   
➤ YN0002: │ @storybook/builder-vite@npm:7.0.0-alpha.46 doesn't provide react (p7f539), requested by @storybook/source-loader
➤ YN0002: │ @storybook/builder-vite@npm:7.0.0-alpha.46 doesn't provide react-dom (p55850), requested by @storybook/core-common
➤ YN0002: │ @storybook/builder-vite@npm:7.0.0-alpha.46 doesn't provide react-dom (p51d21), requested by @storybook/client-api
➤ YN0002: │ @storybook/builder-vite@npm:7.0.0-alpha.46 doesn't provide react-dom (pf3d2d), requested by @storybook/source-loader
➤ YN0002: │ @storybook/builder-vite@npm:7.0.0-alpha.46 doesn't provide typescript (peff78), requested by @joshwooding/vite-plugin-react-docgen-typescript
➤ YN0002: │ @storybook/cli@npm:7.0.0-alpha.46 doesn't provide react (p56057), requested by @storybook/core-common
➤ YN0002: │ @storybook/cli@npm:7.0.0-alpha.46 doesn't provide react (pe3d22), requested by @storybook/core-server
➤ YN0002: │ @storybook/cli@npm:7.0.0-alpha.46 doesn't provide react-dom (p8085c), requested by @storybook/core-common       
➤ YN0002: │ @storybook/cli@npm:7.0.0-alpha.46 doesn't provide react-dom (p0341f), requested by @storybook/core-server       
➤ YN0002: │ @storybook/codemod@npm:7.0.0-alpha.46 doesn't provide @babel/preset-env (pbe658), requested by jscodeshift      
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [69c15] doesn't provide react (pa6103), requested by @storybook/addons
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [69c15] doesn't provide react (pb4b62), requested by @storybook/store 
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [69c15] doesn't provide react (p01bfe), requested by @storybook/client-api
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [69c15] doesn't provide react-dom (pc23df), requested by @storybook/addons
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [69c15] doesn't provide react-dom (p90f10), requested by @storybook/store
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [69c15] doesn't provide react-dom (p26bc7), requested by @storybook/client-api
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [f53fc] doesn't provide react (pf306b), requested by @storybook/addons
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [f53fc] doesn't provide react (pf6013), requested by @storybook/store 
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [f53fc] doesn't provide react (pa9755), requested by @storybook/client-api
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [f53fc] doesn't provide react-dom (p40a7d), requested by @storybook/addons
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [f53fc] doesn't provide react-dom (pec679), requested by @storybook/store
➤ YN0002: │ @storybook/core-client@npm:7.0.0-alpha.46 [f53fc] doesn't provide react-dom (pcd233), requested by @storybook/client-api
➤ YN0002: │ @storybook/docs-tools@npm:7.0.0-alpha.46 doesn't provide react (p25ad6), requested by @storybook/core-common    
➤ YN0002: │ @storybook/docs-tools@npm:7.0.0-alpha.46 doesn't provide react (p48079), requested by @storybook/store
➤ YN0002: │ @storybook/docs-tools@npm:7.0.0-alpha.46 doesn't provide react-dom (pb0185), requested by @storybook/core-common
➤ YN0002: │ @storybook/docs-tools@npm:7.0.0-alpha.46 doesn't provide react-dom (p389f1), requested by @storybook/store      
➤ YN0002: │ @storybook/instrumenter@npm:6.5.13 doesn't provide react (pa4be4), requested by @storybook/addons
➤ YN0002: │ @storybook/instrumenter@npm:6.5.13 doesn't provide react-dom (pa0dd2), requested by @storybook/addons
➤ YN0002: │ @storybook/instrumenter@npm:7.0.0-alpha.46 doesn't provide react (p081dc), requested by @storybook/addons       
➤ YN0002: │ @storybook/instrumenter@npm:7.0.0-alpha.46 doesn't provide react-dom (p02c37), requested by @storybook/addons   
➤ YN0002: │ @storybook/preview-web@npm:7.0.0-alpha.46 doesn't provide react (p238df), requested by @storybook/addons        
➤ YN0002: │ @storybook/preview-web@npm:7.0.0-alpha.46 doesn't provide react (pd8e52), requested by @storybook/store
➤ YN0002: │ @storybook/preview-web@npm:7.0.0-alpha.46 doesn't provide react-dom (p80f40), requested by @storybook/addons    
➤ YN0002: │ @storybook/preview-web@npm:7.0.0-alpha.46 doesn't provide react-dom (pfbd32), requested by @storybook/store     
➤ YN0002: │ @storybook/react-vite@npm:7.0.0-alpha.46 [f53fc] doesn't provide typescript (pbca0f), requested by @joshwooding/vite-plugin-react-docgen-typescript
➤ YN0002: │ @storybook/telemetry@npm:7.0.0-alpha.46 doesn't provide react (p7302c), requested by @storybook/core-common     
➤ YN0002: │ @storybook/telemetry@npm:7.0.0-alpha.46 doesn't provide react-dom (pad005), requested by @storybook/core-common 
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 486ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 580ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed in 0s 814ms
➤ YN0000: Done with warnings in 2s 19ms

@nedkelly
Copy link

I was having trouble after upgrading a project to use Yarn PnP, I was getting similar errors to others who've had problems with Yarn PnP + Storybook, so I just spun up a fresh React + TypeScript + Tailwind project on Yarn 3.3.0 with PnP and then ran yarn dlx storybook init, all was successful during install and I got the "To run your Storybook, type: yarn storybook" message, which I did.

It seems like everything works fine as far as building storybook goes, then I get an error in the viewport:

  [vite] Internal server error: Failed to resolve import "@storybook/preview-web" from "..\..\..\..\..\virtual:\@storybook\builder-vite\vite-app.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /virtual:/@storybook/builder-vite/vite-app.js:1:45
  1  |  import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
     |                                              ^
  2  |      import { ClientApi } from '@storybook/client-api';
  3  |      import '/virtual:/@storybook/builder-vite/setup-addons.js';
      at formatError (file://[***]/.yarn/__virtual__/vite-virtual-ac8ceaae23/0/cache/vite-npm-3.2.4-bd281d599b-0f3e8f89c1.zip/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39975:46)
      at TransformContext.error (file://[***]/.yarn/__virtual__/vite-virtual-ac8ceaae23/0/cache/vite-npm-3.2.4-bd281d599b-0f3e8f89c1.zip/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39971:19)
      at normalizeUrl (file://[***]/.yarn/__virtual__/vite-virtual-ac8ceaae23/0/cache/vite-npm-3.2.4-bd281d599b-0f3e8f89c1.zip/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36839:33)
      at runMicrotasks (<anonymous>)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async TransformContext.transform (file://[***]/.yarn/__virtual__/vite-virtual-ac8ceaae23/0/cache/vite-npm-3.2.4-bd281d599b-0f3e8f89c1.zip/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36972:47)
      at async Object.transform (file://[***]/.yarn/__virtual__/vite-virtual-ac8ceaae23/0/cache/vite-npm-3.2.4-bd281d599b-0f3e8f89c1.zip/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40228:30)
      at async loadAndTransform (file://[***]/.yarn/__virtual__/vite-virtual-ac8ceaae23/0/cache/vite-npm-3.2.4-bd281d599b-0f3e8f89c1.zip/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36615:29)

This is the same error I was getting on my previous build, and if I fix this missing module by installing it, I get another, and another until all of these modules are added, then I end up with another error in the viewport:

SyntaxError: The requested module '/node_modules/.vite-storybook/deps/@mdx-js_react.js?v=xxx' does not provide an export named 'mdx'

Similar to this issue (#398) which seems to be closed with no real fix and I can't seem to resolve this last one.

I've tried some of the workarounds such as seting packageExtension resolutions in .yarnrc.yml but with no luck.

@IanVS
Copy link
Member

IanVS commented Nov 24, 2022

@nedkelly many of these issues have been fixed in storybook 7.0, if you're willing to give that a shot you'll have much better luck when using pnp or pnpm. I think you still have to instll one extra MDX dependency, but we're trying to find a way to avoid that. npx sb@next init if you want to try it.

@nedkelly
Copy link

Thanks @IanVS, I'll give it a go!

@nedkelly
Copy link

@IanVS Unfortunately with a clean build starting with Storybook v7.0.0-alpha.53 I get the same error Failed to resolve import "@storybook/preview-web", this is a completely clean from scratch project with minimal config.

@IanVS
Copy link
Member

IanVS commented Nov 24, 2022

That might be a regression, we'll take a look, thanks!

@nedkelly
Copy link

nedkelly commented Nov 24, 2022

@IanVS You might be pleased to know that I just spun up another project with the same base source code, but this time I built it on a fresh Webpack 5 config and I get the exact same error from Storybook v7.0.0-alpha.53, so I don't think this is related to the vite-builder at all, looks like Yarn PnP + Storybook is the culprit.

I might have jumped the gun on that comment, it's not the same error, it's related to the other MDX issue you mentioned:

ModuleNotFoundError: Module not found: Error: Can't resolve '@mdx-js/react' in 'C:\[...]\src\stories'

It looks like all of the other resolution issues are not present with webpack. Hope this helps.

@IanVS
Copy link
Member

IanVS commented Nov 25, 2022

Ok, that's the last mdx dep that I mentioned were still finding a way to deal with. For now you can just install it manually in your project.

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

No branches or pull requests