“找不到模塊 'react'”和“找不到 tsconfig.json”

Question

我正在嘗試使用 TypeScript 使用 NodeJS 和 React 構建基於工作區的應用程序。 我確實在根目錄上配置了package.json並使用工作區 model 來創建服務器和客戶端應用程序。 不幸的是，我遇到了 VsCode 的問題，該問題試圖將tsconfig.json文件解析到根目錄而不是項目文件夾中。

這是我的結構：

project-root
├── .vscode
│   └── settings.json
├── client
│   ├── .eslintrc.js
│   ├── package.json
│   ├── src
│   │   └── App.tsx
│   ├── tsconfig.json
│   └── yarn.lock
├── package.json
└── server
    └── ...

這是上述文件的內容。

---

.vscode/settings.json ：

{
    "javascript.validate.enable": false,
    "editor.tabSize": 4,
    "eslint.enable": true,
    "eslint.packageManager": "yarn",
    "eslint.codeActionsOnSave.mode": "all",
    "eslint.workingDirectories": [
        { "directory": "../server", "changeProcessCWD": true },
        { "directory": "../client", "changeProcessCWD": true }
    ],
}

---

project-root/package.json ：

{
  "name": "root-project",
  "version": "0.0.1",
  "private": true,
  "main": "index.js",
  "author": "Rhuan Karlus Silva",
  "license": "MIT",
  "workspaces": {
    "packages": [
      "server",
      "client"
    ]
  }
}

---

project-root/client/.eslintrc.js ：

module.exports = {
    env: {
        browser: true,
        es6: true,
        jest: true,
    },
    extends: [
        'react-app',
        'airbnb',
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint',
    ],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly',
    },
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 2018,
        sourceType: 'module',
        project: 'tsconfig.json',
    },
    plugins: ['react', 'import', 'jsx-a11y'],
    rules: {
        'react/jsx-filename-extension': [
            'error',
            {
                extensions: ['.tsx'],
            },
        ],
        "import/prefer-default-export": "off",
        "@typescript-eslint/explicit-function-return-type": "off",
        "@typescript-eslint/explicit-member-accessibility": "off",
        "indent": ["error", "tab"],
        "no-tabs": ["error", { allowIndentationTabs: true }],
        "react/jsx-indent": [2, 'tab', {
            checkAttributes: true,
            indentLogicalExpressions: true
        }]
    },
    settings: {
        'import/parsers': {
            '@typescript-eslint/parser': ['.ts', '.tsx'],
        },
        'import/resolver': {
            typescript: {},
        },
    },
};

---

project-root/client/package.json ：

{
  "name": "project-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "emotion-theming": "^10.0.27",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "../node_modules/.bin/eslint"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.20.0",
    "prettier": "^2.0.5"
  }
}

---

project-root/client/tsconfig.json ：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

---

好吧，既然我暴露了這個問題，我看到了兩個問題。 他們是這樣的：

1. 找不到模塊“反應”。

2. 未找到 tsconfig.json

現在請注意，第二個（tsconfig.json）錯誤顯示的是project-root目錄的路徑，而不是它應該指向的project-root/client目錄的路徑。

那么，我是不是發現了什么問題？ 我該如何解決這個問題並讓我的工作區正常工作？

Answer 1

好的，我找到了第二個問題的解決方案，感謝@Daniel，我也可以解決第一個問題。 這是完整的答案：

首先，我做了@Daniel 在他的回答中告訴我的事情，我從我的.vscode/settings.json文件中刪除了這些行：

"eslint.workingDirectories": [
    { "directory": "../server", "changeProcessCWD": true },
    { "directory": "../client", "changeProcessCWD": true }
],

然后，我使用以下內容創建了文件project-root/.eslintrc.js ：

module.exports = {
    "eslint.workingDirectories": [
      { directory: "./client/", changeProcessCWD: true },
      { directory: "./server/", changeProcessCWD: true },
    ],
};

這樣， Cannot find module 'react'問題就消失了。

現在到tsconfig.json not found問題，我不知道為什么它有效，因為它對我沒有確切的含義，但如果它有效，它就有效。 我將project-root/client/.eslintrc.js parserOption的 parserOption 更改為：

parserOptions: {
    ecmaFeatures: {
        jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './client/tsconfig.json',
},

鑒於已設置changeProcessCWD標志，我不認為我需要更改它。 但它奏效了。 就是這樣了。

感謝所有試圖提供幫助的人。

Answer 2

我只是在類似的設置中遇到了同樣的問題，我解決的方法是在根目錄中創建一個.eslintrc.js並添加以下內容：

module.exports = {
  "eslint.workingDirectories": [
    { directory: "client/", changeProcessCWD: true },
    { directory: "server/", changeProcessCWD: true },
  ],
};

您還應該從.vscode/settings.json中刪除eslint.workingDirectories ，或使用上述代碼更新它。

希望這樣做可以，如果上述步驟不能解決您的問題，您也可以嘗試從project-root/package.json中刪除工作區。