SolidJS•2y ago

Vite compiles .jsx files from node_modules as react files

Hey, I'm kind of new to Solid (coming from react, reactivity really bought me in) and it seems like vite isn't working as indented. I've created a new project with npx degit solidjs/templates/ts-tailwindcss my-solid-project, installed solid-query and ran the app. Unfortunately nothing wanted to render and there was an error in the console Uncaught ReferenceError: React is not defined in the QueryClientProvider.jsx. Seeing that I was kind of confused since I'm not using react, when inspecting the file in the chrome dev tools I saw that the error is on the line which doesn't even contain "React". So I though that maybe vite transpiled this file to react and not solid. I opened the original file, CTRL + F on "React", and I saw this (image). The vite.config.ts is untouched from the start (yes, solid plugin is there), is there any way I can fix this?

12 Replies

Alex Lohr•2y ago

Did you change tsconfig.json?

kalempsterOP•2y ago

Nope, it's the same from the start

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "jsx": "preserve",
        "jsxImportSource": "solid-js",
        "types": [
            "vite/client"
        ],
        "noEmit": true,
        "isolatedModules": true
    }
}

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "jsx": "preserve",
        "jsxImportSource": "solid-js",
        "types": [
            "vite/client"
        ],
        "noEmit": true,
        "isolatedModules": true
    }
}

kalempsterOP•2y ago

To be exact I'm trying to use https://github.com/OrJDev/solid-trpc/tree/next

GitHub

GitHub - OrJDev/solid-trpc: tRPC Adapter For SolidJS Using Tanstack...

tRPC Adapter For SolidJS Using Tanstack Solid Query. - GitHub - OrJDev/solid-trpc: tRPC Adapter For SolidJS Using Tanstack Solid Query.

kalempsterOP•2y ago

Everything seems to break when <trpc.Provider client={client} queryClient={queryClient}> is present. Once removed the error disappears but I can't use the library since there's no provider. But still the fact why it breaks is that vite compiles solid-query .jsx files into react.

OrJDev•2y ago

Use create jd app And choose trpc Idk what configuration of solid start you are using so sadly I can’t help with that but create jd app is an init tool that allows you to use my projects easily

OrJDev•2y ago

https://github.com/OrJDev/create-jd-app

GitHub

GitHub - OrJDev/create-jd-app: The quickest and most efficient way ...

The quickest and most efficient way to start new full stack, type safed Solid web app - GitHub - OrJDev/create-jd-app: The quickest and most efficient way to start new full stack, type safed Solid ...

kalempsterOP•2y ago

I'm not using solid start, is that really a requirement?

OrJDev•2y ago

Ah not really, when using solid start you just get a trpc api handler aswell So its kinda full stack app Should be working with just vite and solid aswell

kalempsterOP•2y ago

I made my own so connecting isn't a problem, the api works just fine

OrJDev•2y ago

kalempsterOP•2y ago

I can give you the steps to reproduce if you want Currently reproduced it in a few steps

OrJDev•2y ago

I could create a new project with trpc and share it with you if you want

Gaming

Programming

Vite compiles .jsx files from node_modules as react files