Custom JSX factory | Vite Vanilla - TypeScript project | import viteLogo from '/vite.svg' | .tsx: cannot find module

[coderbuzz]

Hi,

In my custom JSX factory project that uses Vite Vanilla - TypeScript template;

If i use .tsx file extension Typescript complaining Cannot find module '/vite.svg' or its corresponding type declarations. while using .ts it's just fine. But npm run dev the import src still works.

How to make .tsx also recognize .svg / other image mime module?

Note: I don't want to install React stuff since I use custom jsxImportSource

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "skipLibCheck": false,
    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "forceConsistentCasingInFileNames": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    /* JSX */
    "jsx": "react-jsx",
    "jsxImportSource": "my-jsx-factory",
  },
  "include": [
    "src",
  ]
}

.ts just fine

.tsx TypeScript complain

[hi-ogawa]

Not sure this is related to Vite. Can you provide a reproduction? I have this with preact and tsc looks happy https://stackblitz.com/edit/vitejs-vite-o2uzfe?file=src%2Frepro.tsx

[coderbuzz]

If install / using React and preact template it just fine, it might related to how to setup proper configuration to make tsc recognize .svg module if using .tsx file extension

I don't know where and how to set it since svg module already defined in /// <reference types="vite/client" />

in vite's client.d.ts

declare module '*.svg' {
  const src: string
  export default src
}

[coderbuzz]

Step to reproduce:

1. npm create vite@latest
2. Choose: Vanilla > TypeScript
3. Add "jsx": "react-jsx", to tsconfig.json compilerOptions
4. duplicate main.ts as main.tsx
5. tsc should complaining

[coderbuzz]

Argh just found what the caused!

It cannot have the sama file name: main.ts & main.tsx

rename main.tsx to other name solved the issue

Thank you for your thought @hi-ogawa 😊