本地构建正常，Netlify部署时TS2307找不到PageRoutes模块求助

本地执行build命令可正常完成，但通过GitHub部署到Netlify时，构建步骤报错：

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

已检查导入路径无误，在其他组件中导入该模块仍报相同错误，求解决思路。

相关代码文件 #

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'

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

1. 检查文件名大小写 #

GitHub和Netlify服务器是区分大小写的，而本地Windows/macOS默认不区分大小写。如果本地文件名是PageRoutes.tsx，但GitHub仓库中实际是Pageroutes.tsx或pageroutes.tsx，就会导致构建失败。

• 操作：直接去GitHub仓库查看src/pages/下的文件名，确保和代码中的导入路径完全一致（包括大小写）。

2. 确认文件是否已提交到GitHub #

有可能PageRoutes.tsx或其所在的pages目录未被添加到Git提交中，导致Netlify拉取不到文件。

• 操作：本地执行git status查看未跟踪文件，执行git add src/pages/和git commit后重新推送到GitHub。

3. 调整Netlify构建命令 #

Netlify默认构建环境可能和本地存在差异，可尝试修改构建命令，确保依赖安装、TypeScript编译和Vite构建的顺序正确，或添加缓存清理步骤：

• 进入Netlify项目的Site settings > Build & deploy > Build command，修改为：

  npm install && tsc && vite build
  

  或添加缓存清理：

  rm -rf node_modules/.cache && npm install && tsc && vite build
  

4. 优化tsconfig的include配置 #

当前tsconfig.json的include已包含src，但可尝试明确添加src/**/*确保所有子文件都被TypeScript识别：

"include": ["src/**/*"],

5. 统一Node.js版本 #

本地Node.js版本与Netlify使用的版本不一致可能导致依赖安装或编译问题。可在项目根目录创建.nvmrc文件，指定与本地一致的Node.js版本（比如v18.17.0）：

v18.17.0

Netlify会自动读取该文件使用对应版本的Node.js。

内容的提问来源于stack exchange，提问作者Anthony McLamb