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
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"
}
}
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...
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.
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
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't resolve '#CompanyName/Company-package' in '/home/liam/CompanyName/Company-product/src/components/xxxx/xxxx/xxxxx'</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