Steve A•2mo ago

React types without @deno-types before every import?

I'm hoping someone can clear up a little snag for me. Is it actually necessary to include // @deno-types="npm:@types/react" above every single react import in every single file? I'm up-to-date with deno, I've got npm:@types/react in my types property of my compiler options, etc. I've been perusing issues and trying alternatives for hours, but it seems like this is the only option that actually works:

> deno --version
deno 2.1.5 (stable, release, aarch64-apple-darwin)
v8 13.0.245.12-rusty
typescript 5.6.2

> deno --version
deno 2.1.5 (stable, release, aarch64-apple-darwin)
v8 13.0.245.12-rusty
typescript 5.6.2

  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "strict": true,
    "lib": [
      "dom",
      "dom.iterable",
      "dom.asynciterable",
      "deno.ns",
      "deno.unstable"
    ],
    "types": ["npm:@types/react", "npm:@types/react-dom"]
  },

  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "strict": true,
    "lib": [
      "dom",
      "dom.iterable",
      "dom.asynciterable",
      "deno.ns",
      "deno.unstable"
    ],
    "types": ["npm:@types/react", "npm:@types/react-dom"]
  },

I've generally had a great time getting things going with Deno but this has been a brick wall

5 Replies

halfByteMedic•2mo ago

I'd be thrilled to find a better answer here as for what's going on. Seems to me like Deno LSP can't tell that @types/react is "for react" if that makes sense. I found a hack somewhere online that will at least get you going on your way. Add a file called react.d.ts somewhere in your source and the contents will re-export react with the types on top of it.

declare module "react" {
  // @ts-types="@types/react"
  import React from "npm:react@18";
  export = React;
}

declare module "react" {
  // @ts-types="@types/react"
  import React from "npm:react@18";
  export = React;
}

Steve AOP•2mo ago

Hey, thank you for the suggestion! Unfortunately I gave that a shot, and when it failed I posted this question. Does it work for you? If so, I’d love to compare configurations and runtime info Here's an example of the type of error it leads to:

Module '"react"' has no exported member 'useState'. Did you mean to use 'import useState from "react"' instead?deno-ts(2614)

halfByteMedic•2mo ago

Here's a link to the repo where it did work for me. https://github.com/Duenke/Deno-with-React-Pokedex-App/blob/main/deno.json

GitHub

Deno-with-React-Pokedex-App/deno.json at main · Duenke/Deno-with-Re...

Contribute to Duenke/Deno-with-React-Pokedex-App development by creating an account on GitHub.

halfByteMedic•2mo ago

This was a few weeks ago on whatever the stable release of Deno was at that time in VSCode. I wonder if this will help? The GH issue only seems to mention the deno check operation.

Steve AOP•2mo ago

Thanks for this. I just gave it a try, and no luck. My IDE shows I'm running 2.1.6, types are set up correctly, but React imports are still broken I’ll try your repo now. Thanks for that! I’ll report back with a diff of the settings if it works It works! So, I'm putting together that diff now to see what went wrong. And I've got this error in react.d.ts: at L9: export = React;

Export assignment cannot be used when targeting ECMAScript modules. Consider using 'export default' or another module format instead. This will start erroring in a future version of Deno 2 in order to align with TypeScript.deno-ts(1203)

Export assignment cannot be used when targeting ECMAScript modules. Consider using 'export default' or another module format instead. This will start erroring in a future version of Deno 2 in order to align with TypeScript.deno-ts(1203)

Ha, wow, so my issue in my repo was that I fixed this error. I used export default. So the error I was fixing was actually breaking deno's react types. I wonder if this should be a bug report. But maybe not, because the type inference here is inherently broken. I'm not sure what to do with that. Clearly the last version of deno aims to fix issues like this, so maybe it's on their radar already. I'll see if any existing issues exist and maybe contribute more information if I can Thanks so much for setting me straight on this 🙏

React types without @deno-types before every import?

Did you find this page helpful?