Vite 4.0.1 and "You appear to have multiple instances of Solid"

[phungleson]

Describe the bug

Hey peeps,

I am trying to upgrade my app to vite v4.0.1, however it ran into the error in header. The site cannot be loaded due to the error.

The error is clear and I understand what it means. However, I couldn't pin point which part of the app/libs caused the issue.

It would be great if someone has any thoughts how to debug this?

Thanks!

Your Example Website or App

N/A

Steps to Reproduce the Bug or Issue

Change to vite in package.json to 4.0.1 and run vite.

Expected behavior

The issue should not be there and everything loads correctly.

Screenshots or Videos

N/A

Platform

• OS: macOS
• Browser: Chrome
• Version: 108.0.5359.98 arm

Additional context

I am using latest of a few libs:

"solid-jest": "^0.2.0",
"solid-js": "^1.6.5",
"vite-plugin-solid": "^2.4.0"
"babel-preset-solid": "^1.6.2",
"solid-app-router": "^0.4.2",

[lxsmnsyc]

Check the lockfile for possible duplicates

[atk]

@lxsmnsyc we already found out that this is a bug introduced in the vite resolver in 4.0.1, we just haven't found the cause yet.

[itea-dev]

Today I updated my app to Vite 4 and it broke. It logs the same error as yours.

[phungleson]

This seems to be the issue in vite #11385.

[kotx]

For me, the culprit seems to be solid-router.

[ryansolid]

I think it would hapoen to any package that has dependencies on solid-js. Make sure there is no duplication in your node modules and if there isn't it probably something new happening due to bundling in Vite 4.

[mdynnl]

I think vite@4.0.1 seems to be having trouble deduping optimized dependencies. If you look at the imports on dev with optimization enabled, for any package that depends on solid-js, solid-js is directly resolved from node_modules while it should be resolving from optimized one. Disabling optimizeDeps resolves this but this might not work with some packages especially cjs only packages.

[virtuoushub]

I think vite@4.0.1 seems to be having trouble deduping optimized dependencies. If you look at the imports on dev with optimization enabled, for any package that depends on solid-js, solid-js is directly resolved from node_modules while it should be resolving from optimized one. Disabling optimizeDeps resolves this but this might not work with some packages especially cjs only packages.

Can confirm adding:

...
  optimizeDeps: {
    disabled: "dev",
  },
...

fixed the issue I was seeing with vite@4.0.1 and the hacknews / solid-start example.

[ryansolid]

It was suggested to me that this commit might be responsible. We should try reversing it to confirm.

vitejs/vite#11290

[csr632]

Could anyone try this branch of vite vitejs/vite#11410 to test whether it is fixed?

[patak-cat]

In the meantime, we released vite@4.0.2 reverting vitejs/vite#11290.

[csr632]

In the meantime, we released vite@4.0.2 reverting vitejs/vite#11290.

I can confirm that this issue is fixed in vite@4.0.2. Tested with this template: npm init solid@latest.

[itea-dev]

In the meantime, we released vite@4.0.2 reverting vitejs/vite#11290.

Tested vite@4.0.2 on my app and this issue is fixed.