search

storybookjs / builder-vite

A builder plugin to run and build Storybooks with Vite
MIT License
890 stars 108 forks source link

Not fully compatible with Yarn PnP #141

Open remigailard80 opened 2 years ago

remigailard80 commented 2 years ago

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 usenodeLinker: node-modules, It works fine.

IanVS commented 2 years ago

but it was caught in infinite loading

Was there an error in the console?

remigailard80 commented 2 years ago

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,

1.

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

2.

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

3.

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

4.

[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 commented 2 years ago

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!

glompix commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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"
  }
}
aweiss-dev commented 2 years ago

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 commented 2 years ago

~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 commented 2 years ago

~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 commented 2 years ago

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

erykpiast commented 2 years ago

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

GreenJimmy commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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

yonathan06 commented 2 years ago

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 commented 2 years ago

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

yonathan06 commented 2 years ago

yes, version ^6.4.22 in package.json

IanVS commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 usenodeLinker: node-modules, It works fine.

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

IanVS commented 2 years ago

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

didiercapozzi commented 2 years ago

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 commented 2 years ago

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!

didiercapozzi commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 https://github.com/vitejs/vite/pull/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: https://github.com/swandir/vite/commit/927f524940cc24e3ea1cc0e50aa7c65d293ef573

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Coreusa commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 (https://github.com/storybookjs/builder-vite/issues/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 commented 1 year ago

@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 commented 1 year ago

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

nedkelly commented 1 year ago

@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 commented 1 year ago

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

nedkelly commented 1 year ago

@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 commented 1 year ago

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.