vite-plugin-solid@>=2.3.3 has a breaking change and will not translate JSX elements for suid correctly

[thislight]

On vite-plugin-solid >= 2.3.3, vite-plugin-solid will add .jsx and .tsx files to optimized dependencies. In such configuration, esbuild translate JSX elements to React.createElement in default settings, skips solidjs complier, and cause ReferenceError: React is not defined in most situation.

On vite-plugin-solid >= 2.3.5, ryan scans exports in package.json for solid key to identify and exclude the package from optimized dependencies: https://github.com/solidjs/vite-plugin-solid/commit/cb6f269a79b6827bf4ef0e4411c081dc0aeda15e

These changes break at least @suid/material's JSX elements.

Related issue on solid-router repository: https://github.com/solidjs/solid-router/issues/165

Possible solution: Add exports to package.json, for example:

{
  "exports": {
    ".": {
      "solid": "./index.jsx",
      "default": "./index.jsx",
    }
  }
}

Workarounds:

• Add this package to optimizeDeps.exclude of vitejs config

  export default defineConfig({
    optimizeDeps: {
        exclude: ["@suid/material"], // Workaround to [email protected] breaking change
    },
  })
  

• Downgrade/upgrade to [email protected], which reverts related change: https://github.com/solidjs/vite-plugin-solid/commit/474858def50f269b0ff43ef232883f38cb3565b3

[juanrgm]

The semver is not being respected, again. Also, no changelog/documentation about that behavior...

I am looking a fix, thanks for the report!

[vsviridov]

Here's the issue solidjs/vite-plugin-solid#55 in the vite-plugin-solid repository.

The readme does suggest exclusion, but the link to vite docs has bitrotted and the explanation there is not exactly clear either.

[juanrgm]

Fixed at 2.3.7 (https://github.com/solidjs/vite-plugin-solid/commit/3a2edce43459b4edf706d7584fd857d9773763a6).

I will lock the SolidJS versions with the ~ specifier to guarantee the stability.

[juanrgm]

Finally fixed in https://github.com/solidjs/vite-plugin-solid/pull/60.