react-scripts-ts构建时扫描所有文件夹依赖并报错，求解决方法

Let's tackle this issue head-on—your setup makes total sense for a full-stack TypeScript app, but react-scripts-ts is causing headaches by scanning every folder in your project, including your server-side node_modules and client-side dependencies. Here's how to fix it:

1. Isolate TypeScript Configs for Server and Client #

The core problem is that your root tsconfig.json and client-side tsconfig.json are overlapping in what they process. Let's split them clearly:

Root tsconfig.json (Server-Side Only) #

Update this to only handle your server code, explicitly excluding the client directory:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./build",
    "rootDir": "./src/server",
    "strict": true,
    "esModuleInterop": true
    // Add your other server-side TS configs here
  },
  "include": ["src/server/**/*"],
  "exclude": ["src/client", "node_modules", "build"]
}

Client-Side src/client/tsconfig.json #

Modify the auto-generated config to ignore server-side files and root dependencies:

{
  "extends": "./node_modules/react-scripts-ts/tsconfig.json",
  "exclude": ["../server", "../node_modules"]
}

2. Split Your Build Scripts #

Instead of letting react-scripts-ts run wild across your entire project, split your npm scripts to handle server compilation and client build separately. Update your root package.json scripts:

{
  "scripts": {
    "build:server": "tsc",
    "build:client": "cd src/client && react-scripts-ts build",
    "start": "npm run build:server && node build/www",
    // Optional: Dev setup with hot reloading for both sides
    "dev": "concurrently \"tsc --watch\" \"cd src/client && react-scripts-ts start\" \"nodemon build/www\""
  }
}

If you want the dev hot-reload setup, install the required packages first:

npm install concurrently nodemon --save-dev

3. Double-Check Dependency Installation #

You already have the right idea keeping client dependencies in src/client/node_modules—stick with that! Never install client-specific packages (like react, react-dom) in the root node_modules, as that will only confuse react-scripts-ts further.

4. Clean Up with .gitignore #

Make sure you're ignoring redundant files to keep your repo clean and avoid accidental conflicts:

# Server-side
node_modules/
build/

# Client-side
src/client/node_modules/
src/client/build/
src/client/.env

Why This Works #

react-scripts-ts defaults to scanning the entire project root for TypeScript files and dependencies. By isolating the configs and splitting the build commands, you're telling the tool to only focus on the client directory when building your React app, and leave the server-side code to your root tsc compilation.

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