typescript - Kan inte hitta ./Page - Fältet 'browser' innehåller ingen giltig alias-konfiguration storybook

Jag håller för närvarande på att sätta upp ett create-react-app monorepo med storybook med Yarn Workspaces V1.22. Förvaret är rent (bara bootstrapat ett create-react-app) och inga ytterligare ändringar har gjorts. Faktum är att det initialiserades med npx sb init.

Det enda jag gjorde var att ta bort mappen node_modules och kopiera alla devDependencies och dependencies till den övergripande package.json och köra yarn install... Men det ville inte starta.

Jag träffas av följande:

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

Jag har försökt rensa cachen, uppgradera/nedgradera till/från Yarn 2, ta bort node_modules och kolla på beroendena. Inget hittills.

Här är min 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"
    ]
  }
}

Och jag försöker köra det med kommandot Yarn workspaces:

yarn workspace components start

Men jag har inte kunnat lista ut vad problemet är.

Svar #1

För att lösa detta, ta bort eslint-delen i package.json och utöka den till en egen fil.

Skapa följande .eslintrc.js (components/.eslintrc.js) och inkludera:

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

Dessutom, skapa en tsconfig.json-fil i /components/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"]
  }
}

Skapa en huvud-tsconfig.json i rotkatalogen:

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

Sedan, i din components/package.json, ta bort eventuella poster för 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"
    ]
  }
}