Closed ronaldomoia closed 3 years ago
Greetings @ronaldomoia ,
It appears that this SO answer is related to your situation: https://stackoverflow.com/a/51686837/2589159
I created a new project with your specified dependencies and I believe that the issue is related to some of the packages being referenced with a few looking quite a bit out of date, as react-select 4.0.2 itself has a dependency on React v16.8 not to mention react-scripts now being on v4.
Of relevance to the post above, it appears you have references to @material-ui/core v1.5.0 and @material-ui/icons v2.0.2 (both of which are currently at minor versions of 4.11.x).
This is significant because they appear to have dependency on a rc version of @babel/runtime and muddy the water further by having a dependency on recompose v0.28 which has a dependency on beta versions of @babel/runtime.
After updating the @material-ui
dependencies as well as react-scripts
, I was able to start the project.
It would seem that this would resolve your use case so I will mark this as resolved, but please feel free to reply if you have any other questions or concerns.
./node_modules/react-select/dist/react-select.browser.esm.js Module not found: Can't resolve '@babel/runtime/helpers/esm/classCallCheck' in '/Users/ronaldomoia/Documents/ProjectCaseStore/casestore-web/node_modules/react-select/dist'
Just installed using npm i --save react-select, only breaks when I import in a page.
Here's my package.json
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject", "prettier": "prettier --write ./src///*/", "mock": "node ./mockup-server/mock-server.js", "lint": "eslint ." }, "dependencies": { "@material-ui/core": "^1.5.0", "@material-ui/icons": "^2.0.2", "@material-ui/lab": "^1.0.0-alpha.10", "axios": "^0.19.0", "chart.js": "^2.9.3", "classnames": "^2.2.6", "core-js": "^2.5.7", "date-fns": "2.0.0-alpha.7", "downshift": "^2.1.1", "echarts": "^4.1.0", "echarts-for-react": "^2.0.14", "element-resize-event": "^2.0.9", "eslint": "4.19.1", "eslint-config-airbnb": "^18.1.0", "font-awesome": "~4.7.0", "history": "^4.6.1", "jquery": "^3.3.1", "jquery-slimscroll": "~1.3.8", "material-ui-pickers": "1.0.0-rc.11", "prop-types": "^15.6.2", "rc-queue-anim": "^1.6.5", "react": "^16.4.2", "react-chartjs-2": "^2.9.0", "react-dom": "^16.4.2", "react-hot-loader": "^4.3.4", "react-input-mask": "^2.0.4", "react-loadable": "^5.5.0", "react-redux": "^5.0.7", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-router-redux": "5.0.0-alpha.6", "react-scripts": "2.0.0-next.3e165448", "react-select": "^4.0.2", "react-via-cep": "^2.0.8", "redux": "^4.0.0", "redux-immutable-state-invariant": "^2.1.0", "redux-thunk": "^2.3.0" }, "browserslist": { "development": [ "last 2 chrome versions", "last 2 firefox versions", "last 2 edge versions" ], "production": [ ">0.25%", "not op_mini all", "ie 11" ] }, "devDependencies": { "bootstrap": "^4.1.3", "cors": "^2.8.5", "express": "^4.17.1", "eslint-plugin-import": "^2.18.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.14.2", "node-sass": "^4.13.0", "prettier": "^1.14.2", "react-app-rewire-provide-plugin": "^1.0.0", "react-app-rewired": "^1.5.2" } }