Kofi GOLO
Kofi GOLO8mo 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
No description
9 Replies
tamtamton
tamtamton3mo 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.
Kofi GOLO
Kofi GOLO5w 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
KyleJune5w 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.
Kofi GOLO
Kofi GOLO3w 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
KyleJune3w ago
Could you show what you mean about react-dom? I only did react but will do that too if it's needed.
Kofi GOLO
Kofi GOLO3w 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
Kostomeister3w 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
Kofi GOLO
Kofi GOLO3w 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
Kostomeister3w ago
Yes, it's like that. I guess vscode uses a regular Type script checker until deno is initialized.