Module not found: Can't resolve 'color' - reactjs

Question

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'

Answer 1

If you are using color package, make sure that you are importing the package on theme.tsx