cbhscarter•2mo ago

Auto type generation with ReactRouter + Vite + Deno

I'm attempting to get ReactRouter working with Vite + Deno. My application runs fine, but I'm running into static type issues in the IDE. (first image) My main files are .tsx files, but for some reason the type generation is generating the path via .js instead. (second image). I believe what is happening is that perhaps the vite dev system is properly handling the references and the application works fine, but its not physically generating out a file that Deno can understand such that the IDE is not giving proper type support for the generated files. I'm thinking this is a Deno issue due to it actually working when running the app, but I'm somewhat unsure on where the issue could be or how to fix it. I've included the types in my deno.json file. (third image)

3 Replies

mooch•5w ago

are you using package.json or deno.json? Can you paste either or both?

cbhscarterOP•4w ago

I'm using deno.json right now.

{
  "tasks": {
    "dev": "vite",
   },
  "compilerOptions": {
    "lib": ["es2022", "dom", "dom.iterable", "deno.ns", "deno.unstable"],
    "types": ["vite/client", "npm:@types/node", "npm:@types/react"],
    "jsx": "react-jsx",
    "strict": true,
    "rootDirs": [
      ".",
      "./src",
      "./src/.react-router/types", 
      "./tests"
    ],
    "jsxImportSource": "react",
    "jsxImportSourceTypes": "@types/react",
    "verbatimModuleSyntax": true
  },
  "lint": {
    "exclude": ["build", "node_modules", ".react-router"],
    "rules": {
      "tags": ["recommended", "jsx", "react"]
    }
  },
  "nodeModulesDir": "auto",
  "imports": {
    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5", //dev
    "@react-router/dev": "npm:@react-router/dev@^7.9.4", //dev
    "@types/node": "npm:@types/node@^24.7.1", //dev
    "@types/react": "npm:@types/react@^19.2.2",
    "react": "npm:react@^19.2.0",
    "react-router": "npm:react-router@^7.9.4",
    "vite": "npm:vite@^7.1.9", //dev

  }
}

{
  "tasks": {
    "dev": "vite",
   },
  "compilerOptions": {
    "lib": ["es2022", "dom", "dom.iterable", "deno.ns", "deno.unstable"],
    "types": ["vite/client", "npm:@types/node", "npm:@types/react"],
    "jsx": "react-jsx",
    "strict": true,
    "rootDirs": [
      ".",
      "./src",
      "./src/.react-router/types", 
      "./tests"
    ],
    "jsxImportSource": "react",
    "jsxImportSourceTypes": "@types/react",
    "verbatimModuleSyntax": true
  },
  "lint": {
    "exclude": ["build", "node_modules", ".react-router"],
    "rules": {
      "tags": ["recommended", "jsx", "react"]
    }
  },
  "nodeModulesDir": "auto",
  "imports": {
    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.5", //dev
    "@react-router/dev": "npm:@react-router/dev@^7.9.4", //dev
    "@types/node": "npm:@types/node@^24.7.1", //dev
    "@types/react": "npm:@types/react@^19.2.2",
    "react": "npm:react@^19.2.0",
    "react-router": "npm:react-router@^7.9.4",
    "vite": "npm:vite@^7.1.9", //dev

  }
}

mooch•4w ago

I am working on a similar project. ill test your deno.json and get back to you. after doing a lot of my own testing, I don't think it's currently worth it to build the vite bundle with deno. If someone from the deno team disagrees with me, it would be great to understand what their setup is. I currently have a template for my various web projects and it's a repo with a top level deno.json that manages the server that gets deployed to deno deploy. Then, i have a web folder with a vite project in it managed by npm. I then have a top level Makefile that builds the bundle, then deploys to deno deploy, remembering to include web/dist in what is uploaded to deno deploy. that works well for me and probably gets you to the end state you want faster I also have multiple settings.json files in the repos to make everything type check correctly in vscode (or cursor as i use)

Auto type generation with ReactRouter + Vite + Deno

Did you find this page helpful?