Invalid Hooks call in react - reactjs

I added an npm package called white-web-sdk into my project and started receiving Hooks call issue while using its functions. I did run npm ls react and found 2 versions of react present after I downloaded it:
issue
After searching I found out we need to add react to peer dependencies to prevent multiple version of react in the project. I did that to but the issue still remains and white-web-sdk still adds react#16.14.0 and crashes.
Below is my package.json file :
{
"name": "web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^2.13.1",
"#emotion/react": "^11.6.0",
"#emotion/styled": "^11.6.0",
"#fortawesome/fontawesome-svg-core": "^1.3.0-beta3",
"#fortawesome/free-regular-svg-icons": "^6.0.0-beta3",
"#fortawesome/free-solid-svg-icons": "^6.0.0-beta3",
"#fortawesome/react-fontawesome": "^0.1.18",
"#headlessui/react": "^1.4.3",
"#heroicons/react": "^1.0.6",
"#mui/icons-material": "^5.2.0",
"#mui/material": "^5.2.0",
"#mui/x-date-pickers": "^5.0.0-alpha.0",
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/jest": "^26.0.24",
"#types/node": "^12.20.37",
"#types/react": "^17.0.36",
"#types/react-dom": "^17.0.11",
"#types/react-redux": "^7.1.24",
"agora-react-uikit": "^1.0.3",
"agora-rtc-react": "^1.1.1",
"agora-rtc-sdk": "^3.6.10",
"agora-rtc-sdk-ng": "^4.10.2",
"agora-whiteboard-sdk": "^1.0.4",
"axios": "^0.26.0",
"date-fns": "^2.28.0",
"heroicons": "^1.0.5",
"heroicons-react": "^1.4.1",
"history": "^5.2.0",
"js-cookie": "^3.0.1",
"jwt-decode": "^3.1.2",
"net": "^1.0.2",
"node-sass": "^6.0.1",
"query-string": "^7.1.1",
"react-icons": "^4.3.1",
"react-jitsi": "^1.0.4",
"react-pdf": "^5.7.2",
"react-presents": "^0.8.1",
"react-redux": "^7.2.8",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.0",
"redux-persist": "^6.0.0",
"socket.io-client": "^4.1.3",
"sockjs-client": "^1.6.0",
"stompjs": "^2.3.3",
"typescript": "^4.5.2",
"universal-cookie": "^4.0.4",
"uuid": "^8.3.2",
"web-vitals": "^1.1.2",
"white-web-sdk": "^2.16.15"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"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": {
"#tailwindcss/forms": "^0.5.0",
"#types/js-cookie": "^3.0.1",
"#types/react-pdf": "^5.0.9",
"#types/socket.io-client": "^3.0.0",
"#types/sockjs-client": "^1.5.1",
"#types/stompjs": "^2.3.5",
"#types/uuid": "^8.3.4",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^3.0.18"
}
}

Related

Component cannot be used as JSX Component. Its Instance type is not a valid JSX element

Yesterday, in a separate folder, I initialized CRA + installed Material UI. Unfortunately (I think) this made me sprinkle the rest of the projects in separate folders.
I think I've searched all over the internet. I used "resolutions", nothing helps.... Of course, I cloned the repository, removed node modules, installed again and so on.
package.json file:
"name": "app",
"version": "3.1.4",
"private": true,
"typings": "./src/types.d.ts",
"engines": {
"node": "16.16.0"
},
"dependencies": {
"#ant-design/icons": "4.3.0",
"#craco/craco": "6.4.5",
"#dnd-kit/core": "4.0.0",
"#dnd-kit/sortable": "5.0.0",
"#honeybadger-io/js": "^4.7.1",
"#honeybadger-io/react": "^4.7.1",
"#react-pdf/renderer": "2.0.21",
"#stripe/react-stripe-js": "1.1.2",
"#stripe/stripe-js": "1.11.0",
"#types/big.js": "^6.1.3",
"#types/slug": "^5.0.3",
"antd": "4.10.2",
"antd-country-phone-input": "3.4.3",
"apexcharts": "3.23.1",
"axios": "0.21.2",
"big.js": "^6.1.1",
"craco-alias": "2.1.1",
"craco-less": "1.17.0",
"dompurify": "2.2.6",
"dotenv-cra": "3.0.1",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"event-source-polyfill": "1.0.24",
"file-saver": "2.0.5",
"formik": "2.2.9",
"framer-motion": "4.1.3",
"handlebars": "4.7.7",
"history": "4.10.0",
"html2canvas": "^1.3.2",
"jest": "26.6.0",
"js-levenshtein": "^1.1.6",
"jsonwebtoken": "8.5.1",
"linkifyjs": "2.1.9",
"luxon": "1.26.0",
"polished": "4.1.2",
"prettier-plugin-organize-imports": "^3.0.0",
"query-string": "6.13.7",
"react": "^17.0.2",
"react-apexcharts": "1.3.7",
"react-cookie": "^4.1.1",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "1.14.6",
"react-grid-layout": "^1.3.4",
"react-intl": "5.10.1",
"react-lines-ellipsis": "^0.15.3",
"react-portal": "^4.2.1",
"react-query": "^3.39.1",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"slug": "^5.2.0",
"smart-timeout": "2.5.2",
"source-map-explorer": "^2.5.3",
"styled-components": "5.2.1",
"talkjs": "0.14.5",
"ts-jest": "26.4.4",
"typescript": "^4.6.4",
"use-react-screenshot": "^1.0.2",
"uuid": "^8.3.2",
"web-vitals": "0.2.4",
"webpack": "4.44.2",
"yup": "^0.32.9"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick"
}
},
"scripts": {
"start": "npm i",
"dev": "craco start",
"build": "craco --max_old_space_size=5120 build",
"eject": "craco eject",
"lint": "eslint --ext .ts \"src/**/*\"",
"format": "prettier --write \"src/**/*\"",
"test": "REACT_APP_ENV=test jest --config ./jest.config.js --env=jest-environment-jsdom",
"test:watch": "REACT_APP_ENV=test jest --config ./jest.config.js --watch --env=jest-environment-jsdom",
"test:ci": "REACT_APP_ENV=test jest --config ./jest.config.js --ci --changedSince=origin/master --forceExit --env=jest-environment-jsdom --coverage",
"version": "conventional-changelog -p emojis -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
"release": "release-it",
"analyze": "source-map-explorer 'build/static/js/*.js'"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
"defaults",
">0.2%",
"not dead"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "7.12.3",
"#babel/plugin-proposal-private-property-in-object": "^7.18.6",
"#testing-library/jest-dom": "5.11.6",
"#testing-library/react": "11.1.2",
"#testing-library/react-hooks": "^7.0.2",
"#testing-library/user-event": "12.2.2",
"#types/axios": "0.14.0",
"#types/dompurify": "2.2.1",
"#types/draft-js": "0.11.5",
"#types/draftjs-to-html": "0.8.0",
"#types/file-saver": "2.0.3",
"#types/handlebars": "4.1.0",
"#types/history": "4.7.6",
"#types/jest": "26.0.15",
"#types/js-levenshtein": "^1.1.1",
"#types/jsonwebtoken": "8.5.0",
"#types/linkifyjs": "2.1.3",
"#types/lodash.isequal": "4.5.5",
"#types/lodash.uniqueid": "4.0.6",
"#types/luxon": "1.26.0",
"#types/node": "12.0.0",
"#types/query-string": "6.3.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.11",
"#types/react-draft-wysiwyg": "1.13.1",
"#types/react-grid-layout": "^1.3.2",
"#types/react-helmet": "6.1.0",
"#types/react-intl": "3.0.0",
"#types/react-lines-ellipsis": "^0.15.1",
"#types/react-portal": "^4.0.4",
"#types/react-router-dom": "5.1.7",
"#types/react-slick": "^0.23.10",
"#types/styled-components": "5.1.7",
"#types/uuid": "^8.3.1",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "4.7.0",
"babel-loader": "8.1.0",
"conventional-changelog-cli": "2.1.1",
"conventional-changelog-core": "4.2.1",
"conventional-changelog-emojis": "3.1.0",
"core-js": "^3.22.8",
"eslint": "7.32.0",
"eslint-config-airbnb-typescript": "12.0.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-hooks": "4.3.0",
"husky": "4.3.5",
"jest-localstorage-mock": "2.4.3",
"jest-styled-components": "^7.0.8",
"jest-transform-stub": "2.0.0",
"prettier": "2.1.2",
"prettier-plugin-organize-imports": "^3.0.0",
"pretty-quick": "3.1.0",
"process": "0.11.10",
"react-is": "17.0.1",
"react-test-renderer": "^17.0.2",
"release-it": "14.11.5",
"svg-jest": "1.0.1"
},
"resolutions": {
"react-error-overlay": "6.0.9",
"world_countries_lists": "2.3.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
}
}

No changes getting reflected on changing the path of components in styleguide.config.js (react-styleguidist#13.0.0)

I am using react-styleguidist library for the documentation of my React App.
This is my package.json
`
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#emoji-mart/data": "^1.0.5",
"#emoji-mart/react": "^1.0.1",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#material-ui/core": "^4.12.4",
"#mui/material": "^5.8.1",
"#mui/x-date-pickers": "^5.0.0",
"#mui/x-date-pickers-pro": "^5.0.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"chart.js": "^3.8.2",
"classnames": "^2.3.1",
"dagre": "^0.8.5",
"date-fns": "^2.29.2",
"emoji-mart": "^5.2.1",
"hashmap": "^2.4.0",
"history": "^4.10.1",
"is-url": "^1.2.4",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-awesome-popover": "^6.1.1",
"react-bootstrap": "^2.4.0",
"react-chartjs-2": "^4.3.1",
"react-contextmenu": "^2.14.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-flow-renderer": "^10.3.12",
"react-icons": "^4.3.1",
"react-input-emoji": "^4.1.0",
"react-paginate": "^8.1.3",
"react-pro-sidebar": "^0.7.1",
"react-redux": "^8.0.4",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"react-secure-storage": "^1.0.21",
"react-select": "^5.4.0",
"react-toastify": "^9.0.8",
"react-viewer": "^3.2.2",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"rsuite": "^5.17.1",
"universal-cookie": "^4.0.4",
"video-react": "^0.15.0",
"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": {
"react-styleguidist": "^13.0.0"
}
}
`
This is my styleguide.config.js
`
module.exports = {
components: 'src/Pages/Dashboard/**/*.{js,jsx,ts,tsx}'
}
`
I want react-styleguidist to display all components in Pages as well as Components folder, but it always showing components from Components folder.
Would anyone help me with this?
Thanks in Advance...

export 'useEffect' (imported as 'useEffect') was not found in 'react' (module has no exports)

I am receiving errors of:
It seems to be errors related with redux and react redux:
I also have a warning of:
Attempted import error: 'useMemo' is not exported from 'react' (imported as 'useMemo').
LOG from webpack.FileSystemInfo
<w> Managed item C:\Users\Bernadette Kotelo\Documents\Gahn Eden\frontend\node_modules\react-redux\node_modules\#babel\runtime isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
+ 11 hidden lines
Here's my package.json inside my react redux folder in node_modules:
{
"name": "react-redux",
"version": "8.0.2",
"description": "Official React bindings for Redux",
"keywords": [
"react",
"reactjs",
"redux"
],
"license": "MIT",
"author": "Dan Abramov <dan.abramov#me.com> (https://github.com/gaearon)",
"homepage": "https://github.com/reduxjs/react-redux",
"repository": "github:reduxjs/react-redux",
"bugs": "https://github.com/reduxjs/react-redux/issues",
"main": "./lib/index.js",
"types": "./es/index.d.ts",
"unpkg": "dist/react-redux.js",
"module": "es/index.js",
"files": [
"dist",
"lib",
"src",
"es"
],
"scripts": {
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src --extensions \".js,.ts,.tsx\" --out-dir lib",
"build:es": "babel src --extensions \".js,.ts,.tsx\" --out-dir es",
"build:umd": "cross-env NODE_ENV=development rollup -c -o dist/react-redux.js",
"build:umd:min": "cross-env NODE_ENV=production rollup -c -o dist/react-redux.min.js",
"build:types": "tsc",
"build": "yarn build:types && yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:umd:min",
"clean": "rimraf lib dist es coverage",
"api-types": "api-extractor run --local",
"format": "prettier --write \"{src,test}/**/*.{js,ts,tsx}\" \"docs/**/*.md\"",
"lint": "eslint src --ext ts,tsx,js test/utils test/components test/hooks",
"prepare": "yarn clean && yarn build",
"pretest": "yarn lint",
"test": "jest",
"type-tests": "yarn tsc -p test/typetests/tsconfig.json",
"coverage": "codecov"
},
"peerDependencies": {
"#types/react": "^16.8 || ^17.0 || ^18.0",
"#types/react-dom": "^16.8 || ^17.0 || ^18.0",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0",
"react-native": ">=0.59",
"redux": "^4"
},
"peerDependenciesMeta": {
"#types/react": {
"optional": true
},
"#types/react-dom": {
"optional": true
},
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
},
"redux": {
"optional": true
}
},
"dependencies": {
"#babel/runtime": "^7.12.1",
"#types/hoist-non-react-statics": "^3.3.1",
"#types/use-sync-external-store": "^0.0.3",
"hoist-non-react-statics": "^3.3.2",
"react-is": "^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"devDependencies": {
"#babel/cli": "^7.12.1",
"#babel/core": "^7.12.3",
"#babel/plugin-proposal-decorators": "^7.12.1",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-transform-react-display-name": "^7.12.1",
"#babel/plugin-transform-react-jsx": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/preset-typescript": "^7.14.5",
"#microsoft/api-extractor": "^7.18.1",
"#reduxjs/toolkit": "^1.6.1",
"#rollup/plugin-babel": "^5.2.1",
"#rollup/plugin-commonjs": "^15.1.0",
"#rollup/plugin-node-resolve": "^9.0.0",
"#rollup/plugin-replace": "^2.3.3",
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/jest-native": "^3.4.3",
"#testing-library/react": "13.0.0",
"#testing-library/react-12": "npm:#testing-library/react#^12",
"#testing-library/react-hooks": "^3.4.2",
"#testing-library/react-native": "^7.1.0",
"#types/object-assign": "^4.0.30",
"#types/react": "^18",
"#types/react-dom": "^18",
"#types/react-is": "^17",
"#types/react-native": "^0.67.4",
"#typescript-eslint/eslint-plugin": "^4.28.0",
"#typescript-eslint/parser": "^4.28.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.1",
"codecov": "^3.8.0",
"cross-env": "^7.0.2",
"eslint": "^7.12.0",
"eslint-config-prettier": "^6.14.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"glob": "^7.1.6",
"jest": "^26.6.1",
"prettier": "^2.1.2",
"react": "18.0.0",
"react-17": "npm:react#^17",
"react-dom": "18.0.0",
"react-dom-17": "npm:react-dom#^17",
"react-native": "^0.64.1",
"react-test-renderer": "18.0.0",
"react-test-renderer-17": "npm:react-test-renderer#^17",
"redux": "^4.0.5",
"rimraf": "^3.0.2",
"rollup": "^2.32.1",
"rollup-plugin-terser": "^7.0.2",
"ts-jest": "26.5.6",
"typescript": "^4.3.4"
}
}
And heres is my main app package.json:
{
"name": "frontend",
"proxy": "http://localhost:5000/",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/icons": "^2.0.9",
"#chakra-ui/react": "^2.3.2",
"#chakra-ui/system": "^2.2.9",
"#chakra-ui/theme-tools": "^2.0.11",
"#emotion/cache": "^11.10.3",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#hypertheme-editor/chakra-ui": "^0.2.0-dev.1",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.5",
"#mui/styled-engine": "^5.10.5",
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"apexcharts": "^3.35.5",
"axios": "^0.27.2",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"bootstrap": "^5.2.0",
"chart.js": "^3.9.1",
"chroma-js": "^2.4.2",
"framer-motion": "^7.2.1",
"jwt-decode": "^3.1.2",
"primeflex": "^3.2.1",
"primeicons": "^5.0.0",
"primereact": "^8.4.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-bootstrap": "^2.5.0",
"react-calendar": "^3.8.0",
"react-chartjs-2": "^4.3.1",
"react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.2",
"react-github-btn": "^1.4.0",
"react-icons": "^4.4.0",
"react-is": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-table": "^7.8.0",
"react-toastify": "^9.0.8",
"react-transition-group": "^4.4.5",
"redux": "^4.2.0",
"redux-persist": "^6.0.0",
"sass": "^1.54.9",
"sass-loader": "^13.0.2",
"stylis": "^4.1.2",
"stylis-plugin-rtl": "^2.0.2",
"swiper": "^8.4.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"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"
]
}
}
I have tried uninstalling redux and react-redux and installing them again. It failed.
The errors say all my react hooks cannot be imported in react, inside my node_mudules/react-redux folder. Which is confusing because I have react installed.
Please help me. Thanks
I just ran into this issue. I deleted my node_modules folder rm -rf node_modules/ and ran npm i, and the issue was fixed.

Module not found: Can't resolve 'color'

I have the following package.json for my React project.
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fluentui/react": "^8.33.0",
"#handsontable/react": "^9.0.2",
"#material-ui/core": "^4.9.8",
"#microsoft/office-js-helpers": "^1.0.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-stripe-elements": "^6.0.4",
"#uifabric/react-cards": "^0.109.49",
"axios": "^0.19.2",
"color": "^3.1.2",
"copy-to-clipboard": "^3.3.1",
"cross-storage": "^1.0.0",
"dva": "^2.4.1",
"dva-model-creator": "^0.4.3",
"formik": "^2.1.4",
"handsontable": "^9.0.2",
"highcharts": "^7.0.3",
"highcharts-react-official": "^3.0.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"monaco-editor": "^0.31.1",
"monaco-languageclient": "^0.13.0",
"node-sass": "^4.14.1",
"office-ui-fabric-core": "^11.0.0",
"office-ui-fabric-react": "^7.105.4",
"query-string": "^6.11.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-meta-tags": "^1.0.1",
"react-monaco-editor": "^0.35.0",
"react-scripts": "3.4.1",
"react-stripe-elements": "^6.1.1",
"redux-devtools-extension": "^2.13.8",
"styled-components": "^5.0.1",
"typescript": "^3.8.3",
"yup": "^0.28.3"
},
"scripts": {
"start": "PORT=3000 react-app-rewired start",
"start:https": "HTTPS=true react-app-rewired start",
"build": "react-scripts --max_old_space_size=8096 build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"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/color": "^3.0.1",
"#types/cross-storage": "^0.8.29",
"#types/jest": "^25.1.4",
"#types/lodash": "^4.14.149",
"#types/node": "^13.9.5",
"#types/office-js": "^1.0.92",
"#types/query-string": "^6.3.0",
"#types/react": "^16.9.27",
"#types/react-dom": "^16.9.5",
"#types/react-redux": "^7.1.7",
"#types/styled-components": "^5.0.1",
"#types/yup": "^0.26.33",
"babel-loader": "8.1.0",
"css-loader": "^3.5.3",
"react-app-rewired": "^2.1.8",
"style-loader": "^1.2.1"
}
}
sudo PORT=8000 HTTPS=true ./node_modules/.bin/react-scripts start returns me the following error, could anyone help?
Failed to compile.
./src/theme.tsx
Module not found: Can't resolve 'color' in '/Users/SoftTimur/Submission/20220114/10Studio/frontend/src'
If you are using color package, make sure that you are importing the package on theme.tsx

Module not found: Can't resolve "NPM LINKED MODULE" when using npm-link

I'm working on a TypeScript React application which heavily relies on a private NPM package. I can successfully link the NPM package, but after doing so I get the error <pre>/src/components/xxxx/xxxx/xxxxx/xxxxHoc.tsx Module not found: Can&apos;t resolve &apos;#CompanyName/Company-package&apos; in &apos;/home/liam/CompanyName/Company-product/src/components/xxxx/xxxx/xxxxx&apos;</pre>
riddle all over the application where the npm package is imported. NPM isntalling this package traditionally does works as intended but I need to be able to locally test the package.
Typically when I npm-link the package it gets removed from package.json, I'm not sure if thats how it's supposed to work? would love some insight if possible
I was successfully able to npm-link this package to a laravel applicaiton, but linking it to this particular react app does not work.
Main projects package.json file
{
"name": "Company-product",
"version": "0.1.0",
"private": true,
"dependencies": {
"#aws-sdk/client-dynamodb": "^3.37.0",
"#aws-sdk/util-dynamodb": "^3.37.0",
"#elastic/apm-rum": "^5.9.1",
"#elastic/apm-rum-react": "^1.3.1",
"#fingerprintjs/fingerprintjs": "^3.3.0",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.16",
"#CompanyName/NPM-LINKED-MODULE": "^2.10.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/fingerprintjs": "^0.5.28",
"#types/jest": "^26.0.24",
"#types/js-cookie": "^2.2.7",
"#types/node": "^12.20.33",
"#types/react": "^16.14.17",
"#types/react-csv": "^1.1.2",
"#types/react-dom": "^16.9.14",
"#types/react-router-dom": "^5.3.1",
"#types/react-select": "^3.0.28",
"aws-sdk": "^2.1012.0",
"bootstrap": "^4.6.0",
"deepmerge": "^4.2.2",
"formik": "^2.2.9",
"highcharts": "^8.2.2",
"highcharts-react-official": "^3.1.0",
"husky": "^4.3.8",
"ismobilejs": "^1.1.1",
"js-cookie": "^2.2.1",
"jwt-decode": "^3.1.2",
"luxon": "^1.28.0",
"mobx": "^6.3.5",
"mobx-react-lite": "^3.2.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"node-sass": "^4.14",
"nvm": "^0.0.4",
"react": "^17.0.2",
"react-bootstrap": "^1.6.4",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-map-gl": "^6.1.17",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.1",
"react-select": "^3.1.1",
"react-table": "^7.7.0",
"react-toastify": "^6.2.0",
"typescript": "^4.4.4",
"urijs": "^1.19.7",
"utility-types": "^3.10.0",
"web-vitals": "^0.2.4",
"worker-loader": "^3.0.8",
"yup": "^0.32.11"
},
"husky": {
"hooks": {
"pre-commit": "sh ./hooks/pre-commit"
}
},
"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/luxon": "^1.27.1",
"#types/react-map-gl": "^5.2.11",
"#types/react-table": "^7.7.7",
"#types/urijs": "^1.19.17"
}
The linked NPM package package.json file
{
"name": "#CompanyName/linked-module",
"version": "2.10.0",
"description": "Company Package",
"author": "Company",
"license": "MIT",
"repository": "CompanyName/company-package",
"main": "dist/bundle.js",
"types": "dist/index.d.ts",
"dependencies": {
"#types/jquery": "^3.3.33",
"#types/node": "^12.20.33",
"#types/urijs": "^1.19.6",
"axios": "^0.21.4",
"deepmerge": "^4.2.2",
"dotenv": "^8.2.0",
"highcharts": "^8.2.2",
"ismobilejs": "^1.1.1",
"moment": "^2.24.0",
"urijs": "^1.19.7"
},
"devDependencies": {
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
Thanks for any awnsers

Resources