How to solve issues of package not properly loading with Yarn Workspaces and @react-workspaces/react-scripts ?

sebastienfi commented 4 years ago

Hi Team,

I am migrating a perfectly running CRA app to a monorepo with Yarn Workspaces, Lerna and @react-workspaces/react-scripts. I am using this react-workspaces-playground as a starter. I am facing some issues, and I can't find a proper manual to help me investigate this further. Could anyone with experience give me some clues about what's wrong in my case?

lerna.json

```json { "useWorkspaces": true, "packages": ["packages/*/*"], "version": "1.0.0", "command": { "run": { "npmClient": "yarn" } } } ```

root package.json

```json { "name": "root", "private": true, "scripts": { "test": "FORCE_COLOR=true lerna run lint && CI=true FORCE_COLOR=true lerna run test -- --coverage", "deploy": "FORCE_COLOR=true lerna run deploy" }, "workspaces": { "packages": [ "packages/apps/*", "packages/components", "packages/storybook" ], "nohoist": [ "**/webpack-dev-server", "**/babel-loader", "**/babel-jest" ] }, "devDependencies": { "jest-prop-type-error": "^1.1.0", "lerna": "^3.20.1", "prettier": "^1.19.1" }, "dependencies": { "babel-eslint": "10.0.3", "eslint": "6.8.0", "eslint-config-prettier": "^6.9.0", "eslint-config-react-app": "^5.1.0", "eslint-config-xo": "^0.27.2", "eslint-config-xo-react": "^0.20.0", "eslint-plugin-flowtype": "^4.5.2", "eslint-plugin-import": "^2.19.1", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "^3.1.2", "eslint-plugin-react": "^7.17.0", "eslint-plugin-react-hooks": "^2.3.0" }, "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx}", "!src/setupTests.{js,jsx}", "!src/index.{js,jsx}", "!src/serviceWorker.{js,jsx}", "!src/**/*.(spec|test|stories).{js,jsx}" ] } } ```

Context

app-cms is a small CMS app which is working nicely otherwise.

app-cms package.json

```json { "name": "@org/cms", "version": "0.11.43", "private": true, "license": "UNLICENSED", "scripts": { "start": "react-scripts start" }, "dependencies": { "@aws-amplify/auth": "2.1.2", "@aws-amplify/core": "2.2.1", "abortcontroller-polyfill": "1.4.0", "apollo-cache": "1.3.4", "apollo-cache-inmemory": "1.6.5", "apollo-cache-persist": "0.1.1", "apollo-client": "2.6.8", "apollo-link": "1.2.13", "apollo-link-error": "1.1.12", "apollo-utilities": "1.3.3", "aws-api-gateway-client": "0.2.17", "aws-appsync": "3.0.2", "aws-appsync-react": "3.0.2", "axios": "0.19.0", "color-convert": "2.0.1", "copy-to-clipboard": "3.2.0", "date-fns": "1.30.1", "dayjs": "1.8.18", "graphql": "14.5.8", "graphql-tag": "2.10.1", "immutable": "4.0.0-rc.12", "js-tree": "2.0.2", "just-omit": "1.1.0", "localforage": "1.7.3", "lodash": "4.17.15", "prismjs": "^1.17.1", "react": "16.12.0", "@apollo/react-common": "3.1.3", "@apollo/react-hoc": "3.1.3", "@apollo/react-hooks": "3.1.3", "react-countup": "4.2.3", "react-display-name": "0.2.5", "react-dom": "16.12.0", "react-dropzone": "8.2.0", "react-easter": "^1.0.6", "react-helmet": "5.2.1", "react-router-dom": "5.1.2", "react-scroll-up": "1.3.3", "react-select": "1.3.0", "react-swipeable": "5.4.0", "react-visibility-sensor": "5.1.1", "react-youtube": "7.9.0", "ripemd160": "2.0.2", "sha.js": "2.4.11", "slate": "0.47.9", "slate-plain-serializer": "^0.7.11", "slate-react": "0.22.10", "sortablejs": "1.10.1", "styled-components": "4.4.0", "uuid": "3.3.3" }, "devDependencies": { "@babel/core": "7.7.7", "@types/graphql": "14.5.0", "@types/lodash": "4.14.149", "@types/react": "16.9.17", "@types/react-dom": "16.9.4", "babel-cli": "6.26.0", "babel-literal-to-ast": "2.1.0", "babel-preset-es2015": "6.24.1", "colors": "1.4.0", "copyfiles": "^2.1.1", "cross-env": "6.0.3", "deep-object-diff": "1.1.0", "dotenv": "8.2.0", "flow": "0.2.3", "git-branch-is": "3.1.0", "graphql-tag.macro": "2.0.1", "gzipper": "^3.4.2", "husky": "3.1.0", "jest-puppeteer": "4.3.0", "minimist": "1.2.0", "npm-run-all": "^4.1.5", "ora": "4.0.3", "prettier": "1.19.1", "pretty-quick": "2.0.1", "puppeteer": "1.20.0", "@react-workspaces/react-scripts": "^3.3.0-alpha-08", "readline-sync": "1.4.10", "request": "2.88.0", "request-promise": "4.2.5", "serve": "11.2.0", "shelljs": "0.8.3", "source-map-explorer": "2.1.2", "standard-version": "7.0.1", "stylelint": "12.0.1", "stylelint-config-recommended": "3.0.0", "stylelint-config-styled-components": "0.1.1", "stylelint-processor-styled-components": "1.9.0", "why-did-you-update": "1.0.6" }, "resolutions": { "@types/graphql": "14.5.0", "apollo-client": "2.6.8", "apollo-cache-inmemory": "1.6.5", "apollo-cache-persist": "0.1.1", "apollo-link-error": "1.1.12", "apollo-utilities": "1.3.3", "graphql": "14.5.8", "sha.js": "2.4.11", "ripemd160": "2.0.2" }, "husky": { "hooks": { "pre-commit": "yarn pretty-quick --staged", "pre-push": "node scripts/pre-push.js" } }, "eslintConfig": { "extends": "react-app" }, "babelMacros": { "styledComponents": { "pure": true } }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ```

Config for app-one, app-two, components, and storybook, are left unchanged. app-cms does not reference components yet.

Bug

Running yarn start from app-cms displays an error. app-one, app-two, components, and storybook, are running just fine.

TypeError: this.currentObservable.query.getCurrentResult is not a function

The code originates from the package @apollo/react-hooks

[...]

Your Environment

Executable	Version
`lerna --version`	3.19.0
`npm --version`	6.7.0
`yarn --version`	1.21.1
`node --version`	v11.13.0

OS	Version
Windows 10 Pro	1909

`yarn workspaces info`

{
  "@org/cms": {
    "location": "packages/apps/app-cms",
    "workspaceDependencies": [],
    "mismatchedWorkspaceDependencies": []
  },
  "@project/app-one": {
    "location": "packages/apps/app-one",
    "workspaceDependencies": [
      "@project/components"
    ],
    "mismatchedWorkspaceDependencies": []
  },
  "@project/app-two": {
    "location": "packages/apps/app-two",
    "workspaceDependencies": [
      "@project/components"
    ],
    "mismatchedWorkspaceDependencies": []
  },
  "@project/components": {
    "location": "packages/components",
    "workspaceDependencies": [],
    "mismatchedWorkspaceDependencies": []
  },
  "@project/storybook": {
    "location": "packages/storybook",
    "workspaceDependencies": [
      "@project/components"
    ],
    "mismatchedWorkspaceDependencies": []
  }
}
Done in 0.02s.

F1LT3R commented 4 years ago

Hey @sebastienfi,

Do you have the code repo anywhere I can take a look at? (Even a stripped down version without any proprietary code would be fine.) Feel free to start a private repo and add me READ ONLY if it helps.

It seems like you're trying to run the CMS in an isolated way (I see that it has no other workspace packages associated with it). This should be fine if the project was based on a CRA configuration. This app-cms has always been a CRA app?

It looks like TypeScript is being read as JavaScript. Are you mixing TypeScript and non-typescript workspaces possibly?

sebastienfi commented 4 years ago

This app-cms has always been a CRA app?

Yes.

Are you mixing TypeScript and non-typescript workspaces possibly?

All projects are non-typescript.

Working on a repro-repo.

F1LT3R commented 4 years ago

Without having the code to look at myself I have two ideas for you to try:

1) Add another monorepo dependency to @org/cms. Perhaps the discovery of the Babel paths is breaking down without that link. It shouldn't, but it might.

2) Try to disable hoisting for @org/cms - so that all packages are installed locally and not in the root node_modules/ directory. It's possible that you have a package or configuration conflict. If so, we should be able to isolate that package and fix your setup.

react-workspaces / react-workspaces-playground