typescript - 無法找到 ./Page - 欄位 'browser' 不包含有效的別名配置 storybook

我目前正在使用 Yarn Workspaces V1.22 設置一個帶有 Storybook 的 create-react-app monorepo。該倉庫是乾淨的（剛剛使用 create-react-app 引導），並且沒有進行進一步的修改。事實上，它是使用 npx sb init 初始化的。

我所做的唯一事情就是刪除了 node_modules 資料夾，並將所有的 devDependencies 和 dependencies 複製到根目錄的 package.json，然後運行了 yarn install……但是它無法啟動。

我收到了以下訊息：

Field 'browser' doesn't contain a valid alias configuration
        C:\Users\asili\Dropbox\Programming\GitHub\amplify-react-monorepo\components\src\stories\Page.jsx doesn't exist
      as directory
        C:\Users\asili\Dropbox\Programming\GitHub\amplify-react-monorepo\components\src\stories\Page doesn't exist

我已經嘗試清理緩存、升級/降級到/從 Yarn 2、刪除 node_modules，並檢查依賴項。目前為止都沒有任何效果。

這是我的 package.json：

{
  "name": "components",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template-typescript": "1.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/node-logger": "^6.2.9",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.2.9",
    "@types/jest": "26.0.23",
    "@types/node": "^15.6.1",
    "@types/react": "17.0.8",
    "@types/react-dom": "17.0.5",
    "typescript": "^4.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我正試著用 Yarn workspaces 指令來執行它：

yarn workspace components start

但我一直無法弄清問題出在哪裡。

答案＃1

要解決這個問題，移除 package.json 中的 eslint 部分，並將其擴展到自己的文件中。

建立以下 .eslintrc.js (components/.eslintrc.js) 並包含：

module.exports = {
  extends: ["react-app"],
  plugins: ["react", "@typescript-eslint", "react-hooks"],
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: "module",
    project: "tsconfig.json",
  },
};

此外，在 /components/tsconfig.json 中建立一個 tsconfig.json 文件。

{
  "exclude": ["node_modules", "lib-esm", "lib", "**/*.story*", "**/*.spec*"],
  "include": ["index.ts", "./src/**/*"],
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "lib",
    "declaration": true,
    "noEmit": false,
    "jsx": "react",
    "esModuleInterop": true,
    "typeRoots": ["./src/typings"]
  }
}

在根目錄中建立一個主要的 tsconfig.json：

{
  "compilerOptions": {
    "target": "es2017",
    "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-jsx",
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "app/src",
    "home-app/src",
    "components"
  ]
}

然後，在你的 components/package.json 中，移除任何 eslint 的項目：

{
  "name": "components",
  "version": "0.1.0",
  "private": true,
  "source": "index.ts",
  "main": "./index.ts",
  "module": "./index.ts",
  "dependencies": {
    "cra-template-typescript": "1.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {
    "@craco/craco": "^6.1.2",
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/node-logger": "^6.2.9",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.2.9",
    "@types/jest": "26.0.23",
    "@types/node": "^15.6.1",
    "@types/react": "17.0.8",
    "@types/react-dom": "17.0.5",
    "typescript": "^4.3.2"
  },
  "scripts": {
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}