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.