使用Vite运行react应用程序时，从服务器文件夹读取.ts文件

Question

晚上好，

我在同一个存储库中有一个 React.js 应用程序和 Node.js 后端：

一切都很好，我可以分别运行react js应用程序和node js应用程序，它们不会互相干扰。
然而就在今天，当我尝试运行 React.js 应用程序时，它尝试从

server

文件夹中读取文件：

> [email protected] dev
> vite --config vite.config.js

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
Port 5173 is in use, trying another one...

  VITE v5.2.7  ready in 298 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
Error:   Failed to scan for dependencies from entries:
  /home/ubuntu/work/skillhunter/index.html
/home/ubuntu/work/skillhunter/html/index.html

  ✘ [ERROR] Decorators are not valid here

    server/models/extraction/extractionModel.ts:9:4:
      9 │     @Attribute(DataTypes.INTEGER)
  ...

我没有更改

package.json

，我没有更新或重新安装 npm 软件包，也没有更改任何配置文件。我向 React.js 应用程序添加了新的 .tsx 文件，但我不知道这是否重要。

vite.config.js

/// <reference types="vitest" />
/// <reference types="vite/client" />

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    setupFiles: './testSetup.ts',
    // you might want to disable it, if you don't have tests that rely on CSS
    // since parsing CSS is slow
    css: false,
    coverage: {
      provider: 'v8'
    },
    reporters: ['html', 'verbose'],
    outputFile: {
      junit: './junit-report.html'
    },
    exclude: ['./server/**', './node_modules/**']
  },
})

package.json

{
  "name": "skillhunter-reactjs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^1.6.5",
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.10.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "react-router-dom": "^6.21.2"
  },
  "scripts": {
    "dev": "vite --config vite.config.js",
    "test": "vitest run",
    "coverage": "vitest run --coverage"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/cypress": "^10.0.1",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.2",
    "@testing-library/user-event": "^14.5.2",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "@vitest/coverage-v8": "^1.4.0",
    "@vitest/ui": "latest",
    "cypress": "^13.6.4",
    "jsdom": "latest",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vitest": "^1.4.0"
  }
}

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": ["**/*.tsx", "./testSetup.ts"]
  // "references": [{ "path": "./tsconfig.node.json" }],
}

知道为什么运行我的 React.js 应用程序停止工作吗？
谢谢！

Answer 1

天哪，我当然……不太聪明，犯了一个错误。

我什至不敢说出我做了什么...:)我在React.js代码中导入了服务器端函数。

非常抱歉浪费了您的时间。