Unable to load from fresh installation

[bryanjtc]

Here is the package.json

The error


I started the project using this and choosing the react option.

npm init @vitejs/app vite-react-app --template react && cd vite-react-app
npm install # or yarn
npx sb@next init --builder storybook-builder-vite && npm run storybook

[IanVS]

Hmmm, I haven't seen this one before. Can you try version 0.1.8 of the builder?

[bryanjtc]

Done. It works.

[joshwooding]

Hmm when using npm is doesn't hoist all of the @storybook dependencies because storybook-builder-vite depends on https://github.com/eirslett/storybook-builder-vite/blob/c2e9c3cc9c7879047e793a2c441a1cdd39f576e2/packages/storybook-builder-vite/package.json#L17-L18 and you're using @storybook/*@6.4.0-rc.5.

The fix I made in #160 assumes all versions of storybook are the same which is why it's breaking now.

[olemarius]

Ny workaround for this? Can I use a specific version maybe?

[IanVS]

Yes, you can use version 0.1.8 if that's working for you.

[olemarius]

Nope then I'm back with this issue #157

[shilman]

We'll be releasing 6.4 final very soon (later this week? early next?) which should hopefully help with this issue!

[scott-lc]

@olemarius

As a workaround, add the following to your package.json file:

{
  "resolutions": {
    "@storybook/core-event": "6.4.0-rc.5",
    "@storybook/csf-tools": "6.4.0-rc.5",
    "@storybook/source-loader": "6.4.0-rc.5"
  }
}

If you are using yarn just re-install: yarn install; it automatically handles the "resolutions" field. If you are using npm, run npx npm-force-resolutions (and again after any change to your dependencies.) and then run npm install

npx npm-force-resolutions
npm install

See #161 (comment) below.

[olemarius]

@scott-lc thanks but didn't do the trick I'm afraid. Tried both with rc 2 and rc 5, as well as both npx npm-force-install and npx force install commands.

[AleaIsHere]

Confirming that this issue is still present in fresh installs. Adding the resolutions section doesn't fix the issue.

[joshwooding]

@AleaIsHere Are you using npm?

[scott-lc]

The issue still exists, but the resolutions workaround fixes it for me. The underlying problem is that @storybook/core-events@6.3.x is being resolved.

Run either npm why @storybook/core-events or yarn why @storybook/core-events and make sure there are no references to version 6.3.x. If there are, it might help to delete your yarn.lock or package-lock.json files and reinstall. Note that w/ NPM, you have to run npx npm-force-resolutions pretty much after every change - it is not a once-and-done thing like it is with yarn.

Ah, with npm you must run npm i again after running npx npm-force-resolutions. npm-force-resolutions just modifies the package-lock.json file. It does not install the new dependencies.

npx npm-force-resolutions
npm install
npm why @storybook/core-events

[joshwooding]

I think the issue others are facing is due to not including the second npm install. If anyone is looking to use npm-force-resolutions I'd advise reading the usage guide: https://www.npmjs.com/package/npm-force-resolutions

[AleaIsHere]

@joshwooding I deleted my node_modules and npm installed again however I haven't used npx npm-force-resolutions like @scott-lc suggested. I'll try that next

[olemarius]

@scott-lc could you share your package.json where you got it to work using npm?

[olemarius]

I've tried both

1. delete package-lock and node_modules
2. npm install
3. npx npm-force-resolutions
4. npm install
5. run storybook

and

1. delete package-lock and node_modules
2. npm install
3. npx npm-force-resolutions
4. run storybook

The IGNORED_EXCEPTION doesnt go away.

running npm-why ( https://github.com/amio/npm-why ) shows that all is the same version.

@shilman Also tried rc-7 now, can confirm it doesnt work either.

[IanVS]

@olemarius can you share your repo or create a reproduction repo for us to investigate? It's difficult to troubleshoot this kind of issue from afar, unfortunately.

[IanVS]

OK I've managed to reproduce myself. I think it might be because this project has a dependency on "@storybook/source-loader": "^6.3.12",, which means this happens:

├─┬ storybook-builder-vite@0.1.9
│ └─┬ @storybook/source-loader@6.3.12
│   └─┬ @storybook/addons@6.3.12
│     ├─┬ @storybook/api@6.3.12
│     │ └── @storybook/core-events@6.3.12 deduped
│     └── @storybook/core-events@6.3.12

But I'm using @storybook/core-events@6.4.0-rc.7 in the rest of my project. @joshwooding I'm not sure that requiring users to set a resolution is a good solution. I think we should revert #160 and find another way to solve the duplication issue.

In the meantime, for those having this issue, you can modify your viteFinal. If you're using vue, you can use:

config.resolve.alias = {vue: config.resolve.alias.vue}

Otherwise, just remove it entirely:

config.resolve = undefined;

Or, if you're hitting #157, maybe try updating the config.resolve.alias to point to your own top-level node_module storybook packages. Not sure if that will work or not, but might be worth a try.

[scott-lc]

@olemarius

The pertinent section of my package.json is:

{
  // ...
  "devDependencies": {
    "@storybook/addon-a11y": "6.4.0-rc.6",
    "@storybook/addon-docs": "6.4.0-rc.6",
    "@storybook/addon-essentials": "6.4.0-rc.6",
    "@storybook/addon-links": "6.4.0-rc.6",
    "@storybook/react": "6.4.0-rc.6",
    "@vitejs/plugin-react": "^1.1.0",
    "storybook-builder-vite": "^0.1.9",
    "typescript": "^4.4.4",
    "vite": "^2.6.14"
  },
  "resolutions": {
    "@storybook/csf-tools": "6.4.0-rc.6",
    "@storybook/source-loader": "6.4.0-rc.6",
    "@storybook/core-events": "6.4.0-rc.6"
  }
}

[scott-lc]

@IanVS

Another quick solution is simply to remove the old Storybook dependencies by entirely deleting the ./node_modules/storybook-builder-vite/node_modules/@storybook directory.

[IanVS]

Another quick solution is simply to remove the old Storybook dependencies by entirely deleting the ./node_modules/storybook-builder-vite/node_modules/@storybook directory.

That's perfectly fine for testing things out, but it's not really a scalable solution for anyone with a team, or who does npm installations on a regular basis, or runs storybooks in ci, etc. :)

[joshwooding]

OK I've managed to reproduce myself. I think it might be because this project has a dependency on "@storybook/source-loader": "^6.3.12",, which means this happens:

├─┬ storybook-builder-vite@0.1.9
│ └─┬ @storybook/source-loader@6.3.12
│   └─┬ @storybook/addons@6.3.12
│     ├─┬ @storybook/api@6.3.12
│     │ └── @storybook/core-events@6.3.12 deduped
│     └── @storybook/core-events@6.3.12

But I'm using @storybook/core-events@6.4.0-rc.7 in the rest of my project. @joshwooding I'm not sure that requiring users to set a resolution is a good solution. I think we should revert #160 and find another way to solve the duplication issue.

In the meantime, for those having this issue, you can modify your viteFinal. If you're using vue, you can use:

config.resolve.alias = {vue: config.resolve.alias.vue}

Otherwise, just remove it entirely:

config.resolve = undefined;

Or, if you're hitting #157, maybe try updating the config.resolve.alias to point to your own top-level node_module storybook packages. Not sure if that will work or not, but might be worth a try.

@IanVS I think reverting is a good call for now. This is really only an issue because we are trying to support 6.3 and 6.4 at the same time.

[IanVS]

Thanks everyone for the discussion. This issue should be taken care of in v0.1.10. If you're still experiencing problems that isn't covered by an existing issue, please open a new one with details of what you're seeing.

[olemarius]

@scott-lc your package.json worked, thanks!