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?

21 Replies

Alex Lohr•2y ago

Did you change tsconfig.json?

kalempster•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
    }
}

kalempster•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.

kalempster•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.

Unknown User•2y ago

Message Not Public

kalempster•2y ago

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

Unknown User•2y ago

Message Not Public

kalempster•2y ago

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

Unknown User•2y ago

Message Not Public

kalempster•2y ago

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

Unknown User•2y ago

Message Not Public

kalempster•2y ago

Sure, could you not use solid start though? I really wanted for this to work with just solid

Unknown User•2y ago

Message Not Public

kalempster•2y ago

Thanks!

Unknown User•2y ago

Message Not Public

kalempster•2y ago

Thanks, not really sure what I could do wrong, I'll compare the two and investigate kalempster

Unknown User•2y ago

Message Not Public

kalempster•2y ago

I've must've done something wrong with the deps. After deleting pnpm-lock.yaml, node_modules, copying your package.json and running pnpm i everything works. Thanks again!

Unknown User•2y ago

Message Not Public

kalempster•2y ago

Thanks, I just wanted to start with solid in the first place and then pick up solid start if I see that I really need it.

Unknown User•2y ago

Message Not Public

Gaming

Programming

Vite compiles .jsx files from node_modules as react files