Not fully compatible with Yarn PnP

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]

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]

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!