Search code examples
reactjstypescriptdeploymentvitenetlify

src/App.tsx(2,24): error TS2307: Cannot find module './pages/PageRoutes' or its corresponding type declarations

I am trying to setup scaffolded application to netlify before I start building features on it. The application was built with TypeScript, Vite, React, and react-router-domfor routing. I'm running into an issue where on my local machine, it runs the build command and the app works locally. But when I deploy the site on netlify via GitHub, it fails in the build step. It says: "src/App.tsx(2,24): error TS2307: Cannot find module './pages/PageRoutes' or its corresponding type declarations." I cannot seem to find the issue as the imports look correct.

App.tsx

import Layout from "./layout/Layout";
import PageRoutes from "./pages/PageRoutes";

const App = () => {
  return (
    <Layout>
      <PageRoutes />
    </Layout>
  );
};

export default App;

Layout.tsx

import React from "react";
import Navbar from "../components/Navbar/Navbar";

type Props = {
  children?: React.ReactNode;
};

const Layout = ({ children }: Props) => {
  return (
    <>
      <header>
        <Navbar />
      </header>
      <main>{children}</main>
    </>
  );
};

export default Layout;

PageRoutes.tsx

import { Route, Routes } from "react-router-dom";
import Home from "./Home/Home";
import NotFound from "./NotFound/NotFound";

const PageRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};

export default PageRoutes;

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" }]
}

tsconfig.node.json

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

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

package.json

{
  "name": "",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.5",
    "axios": "^1.4.0",
    "focus-trap-react": "^10.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.1",
    "react-router-dom": "^6.14.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vitest": "^0.32.2"
  }
}

enter image description here

enter image description here

I've tried importing the PageRoutes component elsewhere in the code but the error still follows. I'm running out of ideas and it's probably just an easy fix.

Solution

  • You can refer to the following in order to solve the problem you are facing:

    https://bobbyhadz.com/blog/typescript-cannot-find-module

    Basically, you need to set "moduleResolution" to "node" instead of "bundler" in your tsconfig.json file. Apart from this, you will also have to make sure that the module you are trying to import is tracked by TypeScript. You can do this (in your case) by adding "src/**/*" to the "include" array of your tsconfig.json.

    This should probably issue but in case do let us know what happens. Good luck!