Kofi•9mo ago

Deno LSP + React + TypeScript + Vite (--node-modules-dir)

Does the Deno LSP works with the --node-modules-dir option? did

deno run --allow-env --allow-read --allow-write npm:create-vite-extra .
deno run -A --node-modules-dir npm:vite

deno run --allow-env --allow-read --allow-write npm:create-vite-extra .
deno run -A --node-modules-dir npm:vite

and still the LSP can’t recognize the imports like React The application works fine tho

9 Replies

tamtamton•5mo ago

Having the exact same issue. Could not solve it, without breaking the application. This is very frustrating. Deno gives us a guide on how to set it up, even gives us a video tutorial, but doesn't show how to fix these errors? They are clearly visible in the video tutorial.

KofiOP•3mo ago

I've managed to solve quite a bit of errors. Don't know if its the right way tho. deno.json I've added

"imports": {
    "react": "npm:react@^18.2.0",
    "react-dom": "npm:react-dom@^18.2.0"
},
"compilerOptions": {
    "lib": [
      "dom"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "types": [
      "npm:@types/react",
      "npm:@types/react-dom"
    ]
}

"imports": {
    "react": "npm:react@^18.2.0",
    "react-dom": "npm:react-dom@^18.2.0"
},
"compilerOptions": {
    "lib": [
      "dom"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "types": [
      "npm:@types/react",
      "npm:@types/react-dom"
    ]
}

But TypeScript don't give me Type inferrance this way App.tsx

const [count, setCount] = useState(0);
// ...
<button onClick={() => setCount((count) => count + 1)}>

const [count, setCount] = useState(0);
// ...
<button onClick={() => setCount((count) => count + 1)}>

error/lint to: Parameter 'count' implicitly has an 'any' type.deno-ts(7006) Because count is not inferred, the only way I managed to solve this is by annotating the type

<button onClick={() => setCount((count: number) => count + 1)}>

<button onClick={() => setCount((count: number) => count + 1)}>

That's pretty bad isn't it?

KyleJune•3mo ago

To get react types to work you can create a react.d.ts file. I don't use vite, I use esbuild instead. I have no issues with using react, even have SSR working. Here is an example including a react.d.ts file, you could copy that into your own project. https://github.com/udibo/react-app-example Here is the framework I wrote that the example is using. I'm still working on writing the guides for it. https://github.com/udibo/react-app The react.d.ts file for getting types to work in deno feels kinda awkward, wish we had something more like node where you can just include the types in your configuration file like you can with package.json Also look at my deno.jsonc for correct compiler options for react. If you want to use esbuild but not my framework, check my frameworks build.ts file to see the options to use for esbuild. You need to use the esbuild deno loader for esbuild to work well with deno. I think the platform and format options are needed too. React testing library also works now. A while ago it didn't but I think they fixed the issues in the node compatibility layer over this past year.

KofiOP•3mo ago

Thank you! I’ll check that as soon as possible 🙏 Exactly. They probably use vim too much. At least it don’t work on Visual Studio Code. Because yea the project works and reload nicely but LSP is blind to the setup So basically you were right, also it needed to do: deno add npm:@types/react npm:@types/react-dom

KyleJune•3mo ago

Could you show what you mean about react-dom? I only did react but will do that too if it's needed.

KofiOP•3mo ago

in fact all this was painfully useless ❌ Don't deno run -A npm:create-vite-extra ✅ Do deno run -A npm:create-vite Extra have deno.json, but with Deno now, especially with Existing templates out there and Deno2 RCs, it better have a package.json, then you install with deno install and run your package.json task with deno run taskName SOLVED! Thanks to @marvinh. https://discord.com/channels/684898665143206084/1285769268008583250/1286720005236330616

Kostomeister•3mo ago

It doesn’t work for me. When I initialize a workspace using the VSCode command, it breaks Also deno check doesn't work too

deno check src 
error: Module not found "file:///vite.svg".
    at file:///workspaces/deno2_test/src/App.tsx:3:22

deno check src 
error: Module not found "file:///vite.svg".
    at file:///workspaces/deno2_test/src/App.tsx:3:22

KofiOP•3mo ago

I don’t understand why you need to use Deno check if you use VS Code with the Deno extension for LSP Do you have a package.json or deno.json at the root of your project? Did you generate your vite project with the npm package create-vite?

Kostomeister•3mo ago

Yes, it's like that. I guess vscode uses a regular Type script checker until deno is initialized.