"Uncaught ReferenceError: React is not defined" when using Router

[kee-oth]

I'm getting Uncaught ReferenceError: React is not defined when running the below code. I'm not sure why React is in the equation here. What am I missing about how this works?

import { Router, pathIntegration } from '@rturnq/solid-router';

const Root = () => {
  return (
    <Router integration={pathIntegration()}>
      <h1>App</h1>
    </Router>
  );
};

export default Root;

Versions:

"@rturnq/solid-router": "^0.2.6",
"solid-js": "^0.26.5",

Thanks!

[rturnq]

You code looks fine. Are you using Vite?

Assuming this is the case. Vite uses esbuild to pre-build dependencies as an optimization. By default esbuild treats any JSX it encounters as React and converts it to React.createElement calls. Vite excludes dependencies it knows have JSX but only does so by looking at the extension of the entry file which doesn't work in this case. It does have a workaround though by manually excluding the library using the optimizeDeps.exclude config option.

// vite.config.js
export default defineConfig({
  ...
  optimizeDeps: {
    exclude: ['@rturnq/solid-router'],
  }
});

[kee-oth]

I am using Vite and your suggested fix works!

Is this in the docs somewhere? I just took a look and wasn't able to find this information.

Thank you!

[rturnq]

There is now https://github.com/rturnq/solid-router/commit/ffa31c845966d351e211673456d117a03846261c