Question 290135 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Cannot find module or its corresponding type declarations Vite-React-Ts-SWC

In my development environment, the project runs perfectly. But when I tried to deploy it to vercel, it doesn’t build and gives me the errors:

src/App.tsx(9,18): error TS2307: Cannot find module ‘./pages/Home’ or its corresponding type declarations.
src/App.tsx(11,19): error TS2307: Cannot find module ‘./pages/Login’ or its corresponding type declarations.
src/App.tsx(13,22): error TS2307: Cannot find module ‘./pages/Archived’ or its corresponding type declarations.

This is my tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

And my tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

I tried adding these:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

But it doesn’t work. I also modified the vite.config.ts by adding:

resolve: {
  alias: {
    '@pages' : '/src/pages', 
  },
},
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you for the inputs, but I already solved the problem yesterday. And for the people who might experience the same scenario as I did yesterday, is first, to really understand the error logs and read thoroughly. The problem I encountered is that the vercel made a separate directory of "Pages" (uppercased dir) while also having my version of "pages" (lowercased dir). And it reads the "Pages" directory first and did not run my version of "pages". To check this, vercel have a copy of your source code. The solution is I deleted my version of "pages" and commit/push the changes first just to mak a new deployment and vercel saves the changes (first you need to make a copy of the directory). Then you need put the copied directory to the correct path and push the changes again.

    Disclaimer: This might not work to everyone.


  2. 0

    This problem is related to absolute path. Please check the other problem & the way to set absolute path.

    tsconfig.json

    {
  "compilerOptions": {
    ...,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }

  },
  "include": ["vite.config.ts"]
}

    "@/": ["./src/"] > means "@" replace "./src/"

    But, You also make Vite to understand absolute path.

    so, this kind of option needed to vite.config.json

    resolve: {
  alias: {
    '@' : './src/*', 
  },
},
(It might be wrong)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search