Typescript not setup correctly in Build a React App

[ZweiEuro]

File: runtime/tutorials/how_to_with_npm/react.md

Running the example with a fresh VSCode installation and in a new folder:

[zweieuro@thewallet /tmp]$ deno run -A npm:create-vite@latest --template react-ts
✔ Project name: … deno_test

Scaffolding project in /tmp/deno_test...

Done. Now run:

  cd deno_test
  deno install
  deno run dev


[zweieuro@thewallet /tmp]$ cd deno_test
[zweieuro@thewallet /tmp/deno_test]$ deno install

deno task dev runs fine, but deno is disabled.

Running deno: enable in VSCode does shows the following:

• React UMD global not preset
• svg paths not recognized properly (in this case vite.svg isn't even in the project, its from vite directly)
• svg paths to files not recognized correctly

There is no deno.json file

Should these things be setup correctly?

[jakr-s]

Ran into similar problems myself, following along with the runtime/tutorials/how_to_with_npm/react.md

They actually added an easier way to do this in the latest release > deno init --npm vite

However this template does not create a deno.json and throws a bunch of errors like you had when enabling the extension, requiring a lot of fiddling as well as just generally looking messy with all the unnecessary config files

The command I had the most joy with is this, using vite-extra templates

➜ ~ deno init --npm vite-extra
⚠️ Do you fully trust npm:create-vite-extra package? [y/n]
> y
✔ Project name: … deno-test
✔ Select a template: › deno-react
✔ Select a variant: › TypeScript

Scaffolding project in /Users/jak/deno-test...

Done. Now run:

  cd deno-test
  deno task dev

Should give you what you need, and actually includes a deno.json 😅

Not sure if the current tutorial needs updating, since it includes a lot of the extra tools and configs that defeat the purpose of actually using deno over npm 🤷

Hope this helps anyway, let me know if you get it working

[thisisjofrank]

I've updated the tutorial to mention that the create-vite app will need you to disable the deno extension, and I've created a react-vite template that has a deno.json which can be used in place of create-vite and written up a tutorial for that too - PR here: #1195

Sadly we've been told that create-vite-extra will not be supported for much longer so we're not recommending folks use that right now.

[ZweiEuro]

@thisisjofrank I read through the PR. Doesn't what is written at https://github.com/denoland/docs/pull/1195/files#diff-93e344d2181688d19076495dd38be89a436d5145be424df3ff668d49986fb112R47 (line 47 if the link does not work) mean that essentially you are setting up a node project and you are using vscodes' built-in TS server for error checking and disabling deno fully?

Doesn't that also mean that:

• Since Deno is not a dependency of package.json in the new project, the Deno. stuff is inaccessible/ not included ?
• Import code that is Deno-specific will not work in these projects e.g. import 'npm:react@^18.3.1 ?

I can't quite follow what the adventage is to use Deno at all in this instsance? I am not particularly versed in Deno yet, so please correct me if i am wrong with this. Thanks fof writing a new tutorial!

[thisisjofrank]

@ZweiEuro disabling the extension will not disable Deno tools, it will just stop the LSP from trying to lint your code in the editor (and therefore will stop showing errors when things like directly importing svgs or having missing types). You will still be able to run deno lint and deno fmt etc and run the project with Deno, compile the typescript with Deno and use Deno APIs in the project, but you will not get the autocomplete suggestions for Deno specific APIs in the editor, and you'd be relying on the built in TS LSP for type checking etc.
The engineering team is looking into how to make this dev experience better in future and if helpful I can keep you updated with their progress, but perhaps the deno.json method is a better option for now until they do so.