I have a Project and when I run tests in it, they all pass. I have set up a comment library as a common project and created a yarn workspace. When I had that common project to my first project, but don't use any components yet, I get multiple tests fail with:
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
I don't understand what is causing this given that I'm not importing any components from my second library yet. But just setting up the workspace and installing the local dependency is causing these errors.
When I run npm ls react in my first project I get this:
❯ npm ls react
@services/first-project@3.0.0 /Users/code/services/first-prject/client
├─┬ enzyme-adapter-react-16@1.15.2
│ └─┬ react-test-renderer@16.13.1
│ └── react@16.13.1 extraneous
└─┬ react-datetime@2.16.3
└─┬ react-onclickoutside@6.9.0
└── react@16.13.1 extraneous
The package.json for the common library:
{
"name": "@libs/common",
"version": "1.0.0",
"description": "Shared Component Library for TS Tools",
"author": "",
"license": "MIT",
"repository": "/tools-common",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs --css-modules false",
"start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false",
"prepublish": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && yarn install && yarn run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"@ag-grid-community/client-side-row-model": "^23.1.0",
"@ag-grid-community/react": "^23.1.0",
"@material-ui/core": "^4.9.13",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.52",
"@material-ui/pickers": "^3.2.10",
"gestalt": "1.48.0",
"react": "^16.0.0"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.7",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.8.3",
"@babel/plugin-transform-destructuring": "^7.8.3",
"@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.8.7",
"@babel/preset-flow": "^7.8.3",
"@babel/preset-react": "^7.8.3",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"microbundle-crl": "^0.13.8",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.13.1",
"react-is": "^16.13.1",
"react-scripts": "^3.4.1"
},
"files": [
"dist"
]
}
If I take the first project out of the workspace and yarn install, everything works fine. I put it in a workspace, add the common component and they fail.