Cannot find ./Page - Field 'browser' doesn't contain a valid alias configuration storybook

Question

I'm currently setting up a create-react-app monorepo with storybook using Yarn Workspaces V1.22. The repository is clean,(just bootstrapped a create-react-app) and no further modifications were performed. In fact, it was initialized with npx sb init.

The only thing that I did was to remove the node_modules folder, and copied all the devDependencies and dependencies to the root package.json and ran yarn install... But it wouldn't start.

I'm hit with the following:

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

I've tried clearing the cache, upgrading/downgrading to/from Yarn 2, removing node_modules, and checking out the dependencies. Nothing so far.

Here's my 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"
    ]
  }
}

And I'm trying to run it using the Yarn workspaces command:

yarn workspace components start

But I haven't been able to figure out what's the problem.

Answer 1

To solve this, remove the eslint portion of the package.json, and extend it into its own file.

Create the following .eslintrc.js (components/.eslintrc.js) and include:

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

In addition, create a tsconfig.json file in /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"]
  }
}

Create a main tsconfig.json in the root directory:

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

Then, in your components/package.json, remove any entries for 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"
    ]
  }
}