builder-vite icon indicating copy to clipboard operation
builder-vite copied to clipboard

Published 20 hours ago • verified publisher icon storybookjs

Not fully compatible with Yarn PnP

Open remigailard80 opened this issue 3 years ago • 45 comments

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.

remigailard80 avatar Nov 06 '21 14:11 remigailard80

but it was caught in infinite loading

Was there an error in the console?

IanVS avatar Nov 17 '21 02:11 IanVS

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.

remigailard80 avatar Nov 19 '21 13:11 remigailard80

This might be solved by https://github.com/eirslett/storybook-builder-vite/pull/160.

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

IanVS avatar Nov 19 '21 22:11 IanVS

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

glompix avatar Nov 29 '21 01:11 glompix

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?

IanVS avatar Nov 29 '21 02:11 IanVS

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"
  }
}

remigailard80 avatar Dec 04 '21 09:12 remigailard80

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": "[email protected]"
}

Falling back to nodeLinker: node-modules works.

aweiss-dev avatar Dec 19 '21 21:12 aweiss-dev

~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.

erykpiast avatar Jan 24 '22 22:01 erykpiast

~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?

GreenJimmy avatar Jan 27 '22 21:01 GreenJimmy

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

IanVS avatar Jan 28 '22 15:01 IanVS

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

erykpiast avatar Jan 28 '22 16:01 erykpiast

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/)

GreenJimmy avatar Jan 28 '22 19:01 GreenJimmy

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.

erykpiast avatar Jan 28 '22 20:01 erykpiast

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.

Arthur944 avatar Feb 21 '22 23:02 Arthur944

@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 avatar Mar 31 '22 13:03 IanVS

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 avatar Apr 11 '22 20:04 IanVS

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

IanVS avatar Apr 14 '22 02:04 IanVS

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

yonathan06 avatar May 12 '22 14:05 yonathan06

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

IanVS avatar May 12 '22 14:05 IanVS

yes, version ^6.4.22 in package.json

yonathan06 avatar May 12 '22 14:05 yonathan06

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.

IanVS avatar May 12 '22 16:05 IanVS

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

yonathan06 avatar May 15 '22 08:05 yonathan06

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

didiercapozzi avatar May 17 '22 09:05 didiercapozzi

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

IanVS avatar May 17 '22 12:05 IanVS

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)

didiercapozzi avatar May 17 '22 12:05 didiercapozzi

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 avatar May 17 '22 14:05 IanVS

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';

didiercapozzi avatar May 17 '22 14:05 didiercapozzi

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

zhenximi avatar May 17 '22 14:05 zhenximi

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

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

IanVS avatar May 17 '22 14:05 IanVS

@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.

IanVS avatar May 17 '22 14:05 IanVS