`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
No description
No description
7 Replies
TaQuanMinhLong
it might be due to your build tool thinking you're using react jsx instead of solid jsx
Atila
Atila6d ago
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
Erik Demaine
Erik Demaine5d ago
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.
Atila
Atila4d ago
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?
Erik Demaine
Erik Demaine4d ago
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
Atila
Atila4d ago
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 /dist
Erik Demaine
Erik Demaine4d ago
Oh, 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.
Want results from more Discord servers?
Add your server