`React is not defined` error from a Solid library
I'm currently using
overlayscrollbars-solid in a work project and for some reason am getting React is not defined.
I've not had this error in any other part of our site but where using this library and I cannot for the life of me understand why it's showing up. The issue comes from the library itself (I added a screenshot on where specifically it's showing up) and am wondering if anyone else has encountered this / how I might fix it
7 Replies
it might be due to your build tool thinking you're using react jsx instead of solid jsx
the package looks alright, maybe try to replicate the error in a sample app and see if it goes off again
GitHub
OverlayScrollbars/packages/overlayscrollbars-solid/tsconfig.json at...
A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel. - KingSora/OverlayScrollbars
I wonder if you need to add
ssr.noExternal, as documented here
I don't think this is relevant. At least the tsconfig.json isn't released so it won't play a role when Vite tries to build from the source JSX (/source/OverlayScrollbarsComponent.jsx in the released code) given that the solid condition is set. I guess that could also be the problem, but I didn't think tsconfig was that important, especially for a .jsx file.maybe I'm wrong, but I think in this particular case the
tsconfig.json has an impact. Because the JSX parsing is an implicit import. I went to tsconfig.json because if the value isn't preserve and the import path isn't specified as solid, it will imply React - and that where a React import could land in the output js. Does this not make sense, Erik?For TypeScript maybe, but I thought vite-plugin-solid would process the file before esbuild/rollup does anything (but only if noExternal is set, I think)
We could test by copying a tsconfig into the node_modules folder to see if it makes a difference
that's not what I meant. For sure it won't impact anything. What I'm saying is when they build for distribution, if the tsconfig points to React to parse, they will bundle React code in the
/distOh, I see. Yes, maybe, depending on their bundler.
But that's not what's going on here. The bundled js code is fine. The issue is that it also bundles jsx, and that's what getting picked up because of the
solid condition. So it's getting processed (incorrectly) by the end-user here, not during bundle time.