Closed rvision closed 3 years ago
Methuselah96
commented
3 years ago It seems like @emotion/cache is having trouble importing things from stylis. Can you verify that the stylis package is in node_modules at the correct version (^4.0.3)?
rvision
commented
3 years ago it is in node_modules
"name": "stylis",
"version": "4.0.7",Something's wrong with your setup. Are you using Webpack? Is this just a normal web app or SSR? Do you have a public repo you could share? It's going to be hard to figure out what's going on without that.
I'm closing this for now since it's not a problem with react-select (as far as I can tell), but I'll keep on responding here if you have more info.
rvision
commented
3 years ago It's a normal web app, no SSR. It worked fine until I added react-select (as I already mentioned). No public repo, sorry.
rvision
commented
3 years ago If I remove just 2 lines from the page component, project is rebuilt without any issues or warnings:
import Select from 'react-select';
<Select options={options} />where options are from the docs:
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];It seems likely that's either a problem with how your node_modules are installed or an issue with how Webpack is configured. Are you doing anything abnormal with your Webpack config or do you have any custom stuff that changes how modules are resolved?
ebonow
commented
3 years ago @rvision I was able to build the project without issue using the exact same specified dependencies on codesandbox.
https://codesandbox.io/s/determined-mountain-4h351?file=/src/App.js
rvision
commented
3 years ago It seems likely that's either a problem with how your
node_modulesare installed or an issue with how Webpack is configured. Are you doing anything abnormal with your Webpack config or do you have any custom stuff that changes how modules are resolved?
No, nothing unusual. For the record: it's not "Create react app" and I am doing any custom stuff for resolving modules. In fact, to be honest I don't know much about those builds/setups so I haven't fiddle with that at all.
I also tried to remove node_modules folder and reinstall everything again, but same error.
Maybe I should try to resolve modules with npm? I am using yarn usually.
@rvision I was able to build the project without issue using the exact same specified dependencies on codesandbox.
https://codesandbox.io/s/determined-mountain-4h351?file=/src/App.js
I see. Thanks for the effort.
rvision
commented
3 years ago I've removed node_modules folder and reinstalled all with npm i, this is what I got:
$ npm i
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated eslint-loader@4.0.2: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated core-js@1.2.7: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN react-beautiful-dnd@13.0.0 requires a peer of react@^16.8.5 but none is installed. You must install peer dependencies yourself.
npm WARN react-beautiful-dnd@13.0.0 requires a peer of react-dom@^16.8.5 but none is installed. You must install peer dependencies yourself.
npm WARN react-datepicker@3.5.0 requires a peer of react@^16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-datepicker@3.5.0 requires a peer of react-dom@^16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN talkr@2.1.2 requires a peer of react@^16.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN talkr@2.1.2 requires a peer of react-dom@^16.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN use-clipboard-copy@0.1.2 requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN create-react-context@0.3.0 requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN goober@2.0.33 requires a peer of csstype@^2.6.2 but none is installed. You must install peer dependencies yourself.and same warnings and error:
Uncaught TypeError: Object(...) is not a function...this is package.json:
{
"name": "*",
"description": "*",
"version": "1.0.0",
"license": "UNLICENCED",
"author": "*",
"keywords": [],
"private": true,
"main": "index.js",
"browserslist": [
">1%",
"last 2 versions",
"Firefox ESR",
"not ie < 11",
"not op_mini all"
],
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"bulma": "^0.9.1",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.2.0",
"css-loader": "^4.3.0",
"dotenv-webpack": "^3.0.0",
"eslint": "^7.10.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.12.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.1.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.11.2",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^4.0.2",
"react-hot-loader": "^4.12.21",
"sass": "^1.26.11",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^4.2.2",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.0.9",
"webpack-visualizer-plugin": "^0.1.11"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.1",
"@szhsin/react-menu": "^1.6.1",
"abortcontroller-polyfill": "^1.5.0",
"dayjs": "^1.10.4",
"file-saver": "^2.0.5",
"history": "4.10.1",
"immer": "^8.0.0",
"nanoid": "^3.1.20",
"prettier": "^2.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-beforeunload": "^2.2.4",
"react-datepicker": "^3.5.0",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-hot-toast": "^1.0.2",
"react-laag": "^2.0.2",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-select": "^4.1.0",
"react-virtuoso": "^1.5.5",
"react-window": "^1.8.6",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-undo": "^1.0.1",
"reselect": "^4.0.0",
"talkr": "^2.1.0",
"use-clipboard-copy": "^0.1.2",
"whatwg-fetch": "^3.4.1",
"yup": "^0.32.8"
},
"scripts": {
"start": "webpack-dev-server --config ./config/webpack.js --env.env=development --progress --port 8080 --open",
"build": "webpack --config ./config/webpack.js --env.env=production --progress",
"report": "npm run build -- --env.addon=bundleanalyze --env.addon=bundlevisualizer",
"test": "echo \"Error: no test specified\" && exit 0"
}
}and this is my .babelrc configuration:
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}if I remove all UI-related packages, it still throws an error. All dependencies here are not UI related if I am not mistaken:
"dependencies": {
"abortcontroller-polyfill": "^1.5.0",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-beforeunload": "^2.2.4",
"react-dom": "^17.0.1",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-select": "^4.1.0",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"redux-undo": "^1.0.1",
"reselect": "^4.0.0",
"use-clipboard-copy": "^0.1.2",
"whatwg-fetch": "^3.4.1",
"yup": "^0.32.8"
}Thanks for all the info! I've tried to recreate your environment in a repo, but was unable to reproduce the issues you're describing. Is there anything else you can provide to help reproduce the issue? You can email me privately at nbierema (gmail) if there's something you don't want to share publicly.
javidnoutash
commented
3 years ago @rvision did you find any solution to this?
Methuselah96
commented
3 years ago Sorry, I meant to follow up here when we resolved this over email. The issue was with the Webpack config. The file-loader section looked like the screenshot below but without the , /node_modules/ at the end of the exclude array.
Changing the file-loader configuration to exclude the node_modules folder (as shown above) resolved the issue. The root issue was that the file being imported for stylis is node_modules/stylis/dist/stylis.mjs, so file-loader was trying to process it because it wasn't in the exclude array.
rvision
commented
3 years ago @Methuselah96
Exactly. Thanks again for the help. It wasn't react-select specific, but at last I hope this helped someone with the same issue.
UITailor
commented
3 years ago Hi, I am using Create-React-App and facing the same issue when upgraded React-Select 2.4.4 to any higher version. Kindly Help
ebonow
commented
3 years ago Greetings @UITailor ,
What have you tried so far?
Have you tried nuking and reinstalling your node_modules? Have you verified that your config is excluding node_modules as suggested here?
avanrider
commented
3 years ago I'm also getting this error, even using default options from the website example. If I add
23 | // $FlowFixMe 24 | return /#PURE/forwardRef(function (props, ref) { 25 | // the cache will never be null in the browser
26 | var cache = useContext(EmotionCacheContext); 27 | return func(props, cache, ref); 28 | }); 29 | };`
This is in a create react app, if I'm following the above, I'd edit the webpack.config.dev.js file in node_modules/react-scripts? As my app does not have a webpack.config file currently that's editable. How are we to use this component if the default create-react-app webpack causes it to break? Just a little confused as to what the actual solution is here.
Methuselah96
commented
3 years ago @avanrider Are you able to make a public repo demonstrating the issue? I'd be happy to look into it.
avanrider
commented
3 years ago I resolved it by going back to version 2.4, which worked as expected.
jrosspaperless
commented
3 years ago For me, even though stylis was in my node_modules folder, I needed to explicitly add it to my package.json. 🤷
elie222
commented
3 years ago Ran into this issue too just now. Happened when I upgraded Storybook.
Deleting node_modules and running yarn again fixed this for me.
Avhishek05
commented
2 years ago @Methuselah96 I am also facing this issue when tried to upgrade from 2.1.2 to 5.4.0 I tried above screenshot solution it is not working for me.
I am already ignoring .mjs files, also tried by adding /node_modules/ also
Webpack config
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /node_modules/]
Daniel8018
commented
1 year ago I was using vitejs. I was researching for hours about this problem and I fixed the problem, I changed this imports, and deleted node_modules and reinstalled it and the problem disappeared.
// Failure
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
// OK
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
// Also OK
import { Box } from '@mui/material';
import CssBaseline from '@mui/material/CssBaseline';
I've added latest "react-select": "^4.1.0", to the project and suddenly I am getting the following error:
I've also cleared node_modules folder and rebuilt the dependencies with yarn, but it's the same error. Package.json:
I don't know if this might be some build issue, but this happened after I've added react-select to the project, nothing else afterwards.
Can someone help me fix this?
And yes, there are bunch of warnings: