How to Solve having more than one copy of React in the same app
MeetBhingradiya opened this issue · 4 comments
Describe the bug
I'm developing a React module locally. For that, I'm linking my module using npm link. The module is imported successfully but hooks are failing inside the module. It's throwing the following error:
react.development.js:205 Warning: 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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
i not any kind of break react rules and i have same version of react and react-dom in test folder
To Reproduce
I don't have any type of knowledge.
Expected behavior
Authorise my Created RouteLocker replace with route and appears component that passed in my Library.
Screenshots
- Console
- Json File of Package
{
"name": "react-route-locker",
"version": "1.0.0",
"keywords": [],
"description": "",
"main": "dist/index.min.js",
"module": "dist/index.es.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"author": "Meet Bhingradiya",
"repository": {
"url": "",
"type": "git"
},
"homepage": "",
"license": "MIT",
"private": true,
"scripts": {
"start": "rollup -c rollup.config.js -w",
"build": "tsc && rollup -c rollup.config.js && yarn make:docs",
"make:docs": "typedoc",
"coverage": "codecov -e TRAVIS_NODE_VERSION -f coverage/*.json",
"test": "jest --coverage",
"test:watch": "jest --coverage --watch",
"test:ci": "cross-env CI=1 jest",
"predeploy": "cd example && yarn install && yarn run build",
"deploy": "gh-pages -d example/build",
"postinstall": "ts-node tools/init",
"prepare": "husky install"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
},
"devDependencies": {
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.1.0",
"@rollup/plugin-commonjs": "^22.0.2",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.3.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@types/jest": "^29.0.0",
"@types/node": "^18.7.15",
"@types/react": "^18.0.18",
"@types/react-dom": "^18.0.6",
"@typescript-eslint/eslint-plugin": "^5.36.1",
"@typescript-eslint/parser": "^5.36.1",
"colors": "^1.4.0",
"cross-env": "^7.0.3",
"eslint": "^8.23.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.5",
"eslint-plugin-promise": "^6.0.1",
"eslint-plugin-react": "^7.31.6",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-standard": "^5.0.0",
"gh-pages": "^4.0.0",
"husky": "^8.0.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.0.2",
"jest-environment-jsdom": "^29.0.2",
"lint-staged": "^13.0.3",
"postcss": "^8.4.16",
"prompt": "^1.3.0",
"react-router-dom": "^6.4.4",
"replace-in-file": "^6.3.5",
"rollup": "^2.79.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-sourcemaps": "^0.6.3",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.33.0",
"ts-jest": "^28.0.8",
"ts-node": "^10.9.1",
"typedoc": "^0.23.14",
"typescript": "^4.8.2"
},
"lint-staged": {
"src/**/*.{ts,tsx}": [
"./node_modules/.bin/prettier --write",
"./node_modules/.bin/eslint"
]
}
}- test package
{
"name": "test-app-route-locker",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.4",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-route-locker": "file:..",
"react-router-dom": "^6.4.4",
"react-scripts": "5.0.1",
"styled-components": "^5.3.6",
"typescript": "^4.9.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/styled-components": "^5.1.26"
}
}- What i doing in
App.tsxin test app [Click on the image to open in new tab]
Environment (please complete the following information):
- OS: [Microsoft Windows 10 Pro]
- Node version : v18.12.0
More Information on Stackoverflow
Help i do not understand Answer that owner Accepted.
Hi, you should link react and react-dom from your package modules. So, in your test package.json
"react": "link:../node_modules/react",
"react-dom": "link:../node_modules/react-dom",
"react-route-locker": "link:..",
Please try this and let me know if this works.
- How I can disable eslint prettier ? This is giving me to much errors. In react code including indent
I use 4 Space in one tab.
I need more time : expected 1 week or morethen 4 days atleast
- Becouse I having a exams
- I reset all setup of This Repository get Accuracy
- I have daily time to do this work 1 hour only
You can uninstall package(s), disable Eslint from your editor, or change prettier settings for using 4 spaces for tabs instead of 2.
Closing the issue since your original problem should have been solved.
Hi, you should link react and react-dom from your package modules. So, in your test
package.json"react": "link:../node_modules/react", "react-dom": "link:../node_modules/react-dom", "react-route-locker": "link:..",Please try this and let me know if this works.
You use Yarn and I use NPM instead this error this creates when npm install command run
Sorry for my miss understandings. issue solved from my perspectives.
- i doesn't know yarn better then npm.
Suggestion
- in
tools/init.tsYou can add question its user for example app just a TypeScript template or JavaScript template.
- Wish you all the best and this is Perfect Template For My React Library
react-route-locker.
@alioguzhan Thanks for Support Me