"React.createContext is not a function" - but I am not using it - reactjs

I am getting "React.createContext is not a function" error while running a react-native application. I searched for 'createContent' in the code, it doesn't exist.
Any idea what may be the reason for the error.
It is an iOS build of an app that is already running on android.
Here is my package.json file:
{
"name": "newapp",
"version": "0.0.2",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest --verbose --coverage",
"test:update": "jest --verbose --coverage --updateSnapshot",
"test:watch": "jest --verbose --watch",
"coverage": "jest --verbose --coverage && xdg-open ./coverage/lcov-report/index.html",
"lint": "npx eslint --fix ./src/*"
},
"dependencies": {
"apollo-boost": "0.1.17",
"axios": "^0.18.0",
"babel": "^6.23.0",
"buffer": "5.1.0",
"cross-fetch": "^3.0.0",
"enzyme": "^3.3.0",
"graphql": "0.13.2",
"graphql-tag": "2.10.0",
"jasmine-react-helpers": "^0.2.2",
"lodash": "4.17.5",
"moment": "2.21.0",
"query-string": "^6.1.0",
"react": "16.2.0",
"react-addons-test-utils": "^15.6.2",
"react-apollo": "2.2.4",
"react-dom": "^16.4.0",
"react-native": "0.51.0",
"react-native-elements": "0.19.0",
"react-native-fabric": "^0.5.1",
"react-native-htmlview": "^0.12.1",
"react-native-link-preview": "^1.3.5",
"react-native-login": "^0.0.1-alpha.2",
"react-native-login-keycloak": "^1.0.2",
"react-native-onesignal": "3.2.6",
"react-native-push-notification": "https://github.com/Dhanraj-bidchat/react-native-push-notification.git",
"react-native-sleek-loading-indicator": "^0.1.3",
"react-native-spinkit": "^1.1.1",
"react-native-svg": "6.2.2",
"react-native-swipe-cards": "^0.1.1",
"react-native-swiper": "1.5.13",
"react-native-vector-icons": "4.5.0",
"react-navigation": "1.5.6",
"react-redux": "5.0.7",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-persist": "5.9.1",
"redux-thunk": "^2.2.0",
"victory-native": "0.17.2",
"whatwg-fetch": "2.0.4"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-jest": "^22.4.4",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react-native": "4.0.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jest": "^21.17.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-only-warn": "^1.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-react": "^7.9.1",
"eslint-plugin-standard": "^3.1.0",
"jest": "^23.5.0",
"jest-resolve": "^23.0.0",
"jest-serializer-enzyme": "^1.0.0",
"react-native-mock-render": "^0.0.26",
"react-test-renderer": "^16.3.2",
"redux-mock-store": "^1.5.1",
"sinon": "^5.0.10"
},
"jest": {
"preset": "react-native",
"setupFiles": [
"./jest-setup.js"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"modulePaths": [
"<rootDir>/src",
"<rootDir>/node_modules"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!(react-native-safe-area-view|react-navigation|react-native-htmlview|react-native-fabric|react-native-login|react-native-elements|react-native-vector-icons|react-native-spinkit|victory-pie|victory-chart|victory-core|react-native-svg|react-native|redux-persist|victory-native|react-native-swipe-cards|react-native-swiper)/)"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js",
"\\.(css|less)$": "<rootDir>/assetsTransformer.js"
}
}
}

In your package react and react-dom are not having the same version which is why you get the error. react-dom#16.4.0 will want to have access to React.createContext but react#16.2.0 won't have it.
In order make it work run the following command:
yarn upgrade react#16.4.0
Or if you are using NPM:
npm install react#16.4.0

If this is happening using react 18 or Next JS 13. You are probably trying to use a client component functionalities in a server component. By default all components are treated as server components unless you explicitly specify.
To solve this and add the "use client" directive at the top of the file (before any imports). Here is more details on When to use Server vs. Client Components?

Try upgrading React to React to 16.4.1

Using npm I solved it by upgrading to 16.4.1:
npm i react#16.4.1

Adding #emotion/react resulted in a similar error TypeError: React.createContext is not a function. The error disappeared after I removed #emotion/react and downgraded #emotion/styled from 11 to 10.

run
npm install react#latest
and
npm install react-dom#latest
fixed my error with this update.

If npm i react#latest react-dom#latest doesn't work try doing npm update , it will update all packages.

Related

CRA project node v14.17.0 - Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm'

I'm getting the following error when trying to start a CRA project running with node 14.17.0 -> Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm'
Compiled with problems:X
ERROR in ./src/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet1.rules[0].oneOf[5].use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules[0].oneOf[5].use[2]!./src/app.css)
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm'
Require stack:
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/#csstools/postcss-trigonometric-functions/dist/index.cjs
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-preset-env/dist/index.cjs
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/utils.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/index.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/cjs.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/loadLoader.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/LoaderRunner.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack/lib/NormalModule.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack-manifest-plugin/dist/index.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-scripts/config/webpack.config.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/overrides/webpack.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/scripts/start.js
(#/Users/niltonxd/Workspace/harv-Harvest-frontend/src/app.css)
{
"name": "harvest-front",
"version": "1.7.4",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#fortawesome/fontawesome-svg-core": "^1.2.22",
"#fortawesome/free-solid-svg-icons": "^5.10.2",
"#fortawesome/react-fontawesome": "^0.1.4",
"#types/jest": "^27.4.1",
"#types/node": "^17.0.23",
"#types/react": "^17.0.43",
"#types/react-dom": "^17.0.14",
"antd": "^4.18.7",
"apexcharts": "^3.19.2",
"apisauce": "^1.1.0",
"connected-react-router": "^6.5.2",
"dotenv": "^10.0.0",
"formik": "^2.2.9",
"har-validator": "^5.1.5",
"history": "4.10.1",
"js-file-download": "^0.4.9",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"moment": "^2.22.2",
"moment-timezone": "^0.5.33",
"papaparse": "^5.2.0",
"password-validator": "^5.0.2",
"prop-types": "^15.6.2",
"query-string": "^6.8.3",
"react": "^17.0.2",
"react-apexcharts": "^1.3.7",
"react-clear-cache": "^1.2.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "npm:#hot-loader/react-dom#^17.0.2",
"react-error-boundary": "^3.1.4",
"react-intl": "^2.4.0",
"react-leaflet": "2.8.0",
"react-number-format": "^4.3.1",
"react-redux": "^7.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"recharts": "^1.0.1",
"redis": "^3.1.2",
"redux": "^4.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.0.2",
"source-map-explorer": "^2.5.2",
"typescript": "^4.6.3",
"url-search-params": "^1.1.0",
"xlsx": "^0.16.4",
"yup": "^0.27.0"
},
"resolutions": {
"moment": "2.24.0",
"antd": "4.2.4",
"immer": "9.0.6",
"property-expr": "2.0.3",
"ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"glob-parent": "6.0.1",
"styled-components": "^5"
},
"scripts": {
"prebuild": "npm install react-dom#17.0.2 --save",
"sonar": "node sonar-project.js",
"start": "react-app-rewired start",
"start::dev": "env-cmd -e dev react-app-rewired start",
"start::qa": "env-cmd -e qa react-app-rewired start",
"start::np": "env-cmd -e np react-app-rewired start",
"build": "react-app-rewired --max-old-space-size=8192 build",
"test": "react-app-rewired test",
"test::ci": "react-app-rewired test --coverage=false --ci --watchAll=false --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/assets/**/*.js",
"qa": "PORT=8081 react-scripts start",
"cy::op": "cypress open",
"cy::ru": "cypress run",
"lint": "eslint --max-warnings 0 --ignore-path .gitignore --fix --ext .js,.jsx,.ts,.tsx src",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\"",
"format": "yarn run prettier -- --write",
"check-format": "yarn run prettier -- --list-different",
"validate": "yarn run lint && yarn run test --watchAll --bail",
"createJob": "node ci/createJob.js",
"deleteJob": "node ci/deleteJob.js",
"checkEnvironment": "node ci/checkEnvironment.js",
"cm": "cz",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"generate:gc": "plop --plopfile ./generators/globalComponent.js"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.16.0",
"#babel/plugin-proposal-private-methods": "^7.14.5",
"#babel/plugin-proposal-private-property-in-object": "^7.15.4",
"#babel/preset-typescript": "^7.16.7",
"#commitlint/cli": "^16.0.2",
"#commitlint/config-conventional": "^16.0.0",
"#testing-library/cypress": "^8.0.1",
"#testing-library/dom": "^8.5.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.0",
"#testing-library/react-hooks": "^7.0.2",
"#testing-library/user-event": "^13.3.0",
"#types/lodash": "^4.14.182",
"#types/react-router-dom": "^5.3.3",
"#types/styled-components": "^5.1.24",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "^5.18.0",
"#typescript-eslint/parser": "^5.18.0",
"babel-eslint": "^10.1.0",
"babel-plugin-styled-components": "^2.0.6",
"commitizen": "^4.2.4",
"customize-cra": "^1.0.0",
"customize-cra-less-loader": "^2.0.0",
"cypress": "9.5.2",
"cypress-file-upload": "^5.0.8",
"cypress-mochawesome-reporter": "^2.3.0",
"cz-conventional-changelog": "^3.3.0",
"env-cmd": "^10.1.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-jest-dom": "^3.9.2",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.29.3",
"eslint-plugin-sonarjs": "^0.6.0",
"eslint-plugin-testing-library": "^4.12.2",
"husky": "^4.2.3",
"jest-axe": "^5.0.1",
"jest-styled-components": "^7.0.8",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"less-vars-to-js": "^1.3.0",
"lint-staged": "^11.1.2",
"plop": "^3.0.5",
"postcss-normalize": "^10.0.1",
"prettier": "^2.3.0",
"react-app-rewired": "^2.1.8",
"react-extras": "^3.0.0",
"react-ga": "^3.3.0",
"react-hot-loader": "^4.13.0",
"reactotron-apisauce": "^3.0.0",
"reactotron-react-js": "^3.3.2",
"reactotron-redux": "^3.1.1",
"reactotron-redux-saga": "^4.2.2",
"resolve-url-loader": "^3.1.2",
"sonarqube-scanner": "^2.8.0",
"styled-components": "^5.3.5"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"#components/(.*)": "<rootDir>/./src/components/$1",
"#util/(.*)": "<rootDir>/./src/util/$1",
"#hooks/(.*)": "<rootDir>/./src/hooks/$1",
"#constants/(.*)": "<rootDir>/./src/constants/$1",
"#containers/(.*)": "<rootDir>/./src/containers/$1",
"#routes/(.*)": "<rootDir>/./src/routes/$1",
"#appRedux/(.*)": "<rootDir>/./src/appRedux/$1"
}
}
}
As it appears this error will temporarily get fixed by installing the latest version of Node.js.
So to fix this follow these steps:
Download and install the latest Node.js version (recommended for most users, which is 16.15.0 at this moment).
Delete your node_modules directory from your project. Then you can optionally clear npm cache with npm cache clean and verify it with npm cache verify.
Delete package-lock.json/yarn.lock file.
Reinstall all of the dependencies and create a new dependency tree using one of the following commands: npm i/npm install/yarn/yarn install.
Note1: If in any case, you use node-sass in React projects yet, it is recommended to use sass instead.
Note2: In some cases skipping step 1 will also work as expected, but I recommend upgrading the Node.js version if you do not have other dependencies to prevent that.
Note3: As #IvaniltonBezerra mentions in the comments, some app builds may throw errors, since upgrading Node.js to its latest version will upgrade the npm as well it may not compatible with your current dependency tree in production, so to prevent such a problem you have to use --legacy-peer-deps to restore the old behaviour of the old dependencies.
Update
This is now seem to be permanently solved in PostCSS Preset Env and following the above steps with skipping step 1 will also solve the problem.
You're most likely trying to use create-react-app inside of an image, and the image's current Node version/configurations are crossing wires with create-react-app; that's what I just did by mistake using Docker, and I got the same exact compiling error with node:vm as a missing module
If you're using create-react-app, don't use it while you're in any Docker/Dev Environment images, just run the npx command in your terminal as is (probably helps having node downloaded on your local machine as well)
npx create-react-app my-app --template typescript
Hopefully that helps, I know that solved my problem
I had the same issue. I am using macOS, so some of the commands below are not applicable if we are using Windows or Linux.
I did the following steps to fix the issue:
Remove node_modules and clear the npm cache
rm -f -r node_modules && npm cache verify
Install the current latest node version (16.15.0)
// if you are using nvm to manage the node versioning
nvm install 16.15.0
nvm use 16.15.0
We can access here if we are using N, homebrew or MacPorts
Reinstall the project packages
npm i

error code ELIFECYCLE while running npm run build

I have built react app based on fuse react theme it is running fine in the dev environment by npm start
but I'm getting error while making production build, running npm run build to make a production build but getting ELIFECYCLE error, I have tried all the options like.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fuse-react-app#6.1.4 build: `cross-env
GENERATE_SOURCEMAP=false craco build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fuse-react-app#6.1.4 build script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
Remove package-lock.json
Delete node_modules
Ran npm install
Ran npm start and app is working fine I can access the app on the browser
Ran npm run build getting ELIFECYCLE error
Here is my package.json file
{
"name": "fuse-react-app",
"version": "6.1.4",
"private": true,
"dependencies": {
"#date-io/core": "1.3.13",
"#date-io/date-fns": "1.3.13",
"#date-io/moment": "1.3.13",
"#fullcalendar/core": "5.7.0",
"#fullcalendar/daygrid": "5.7.0",
"#fullcalendar/interaction": "5.7.0",
"#fullcalendar/react": "5.7.0",
"#fullcalendar/timegrid": "5.7.0",
"#hookform/resolvers": "2.5.1",
"#material-ui/core": "4.11.4",
"#material-ui/data-grid": "latest",
"#material-ui/icons": "4.11.2",
"#material-ui/lab": "4.0.0-alpha.58",
"#material-ui/pickers": "3.3.10",
"#mui/material": "^5.2.4",
"#mui/x-data-grid-pro": "^4.0.0",
"#reduxjs/toolkit": "1.5.1",
"apexcharts": "3.26.3",
"auth0-lock": "11.30.0",
"autosuggest-highlight": "3.1.1",
"axios": "0.21.1",
"axios-mock-adapter": "1.19.0",
"chart.js": "2.9.4",
"clsx": "1.1.1",
"cross-fetch": "3.1.4",
"date-fns": "2.21.3",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"firebase": "8.6.2",
"formsy-react": "2.2.5",
"framer-motion": "4.1.17",
"google-map-react": "2.1.9",
"history": "4.10.1",
"i18next": "20.3.0",
"jsonwebtoken": "8.5.1",
"jss": "10.6.0",
"jss-plugin-extend": "10.6.0",
"jss-rtl": "0.3.0",
"jwt-decode": "2.2.0",
"keycode": "2.2.0",
"lodash": "4.17.21",
"marked": "0.8.2",
"material-table": "^1.69.3",
"material-ui-dropzone": "^3.5.0",
"material-ui-popup-state": "1.8.3",
"millify": "^4.0.0",
"mobile-detect": "1.4.5",
"moment": "^2.29.1",
"notistack": "1.0.9",
"path-to-regexp": "3.2.0",
"perfect-scrollbar": "1.5.1",
"prismjs": "1.23.0",
"prop-types": "15.7.2",
"qs": "6.10.1",
"raw-loader": "4.0.2",
"react": "17.0.2",
"react-apexcharts": "1.3.9",
"react-autosuggest": "10.1.0",
"react-beautiful-dnd": "13.1.0",
"react-chartjs-2": "2.11.2",
"react-compound-timer": "^1.2.0",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "1.14.7",
"react-draggable": "4.4.3",
"react-frame-component": "4.1.3",
"react-hook-form": "7.7.1",
"react-i18next": "11.9.0",
"react-iframe": "^1.8.0",
"react-json-editor-ajrm": "^2.5.13",
"react-json-view": "^1.21.3",
"react-masonry-css": "1.0.16",
"react-number-format": "4.5.5",
"react-popper": "1.3.11",
"react-redux": "7.2.4",
"react-router": "5.2.0",
"react-router-config": "5.1.1",
"react-router-dom": "5.2.0",
"react-scripts": "^4.0.3",
"react-select": "3.2.0",
"react-show-more-text": "^1.5.0",
"react-sparklines": "^1.7.0",
"react-spring": "9.1.2",
"react-swipeable": "6.1.2",
"react-swipeable-views": "0.13.9",
"react-swipeable-views-utils": "0.13.9",
"react-table": "7.7.0",
"react-terminal-component": "^1.5.0",
"react-text-mask": "5.4.3",
"react-virtualized": "9.22.3",
"react-window": "1.8.6",
"redux": "4.1.0",
"redux-logger": "4.0.0",
"styled-components": "5.3.0",
"typeface-poppins": "1.1.13",
"velocity-animate": "1.5.2",
"velocity-react": "1.4.3",
"web-vitals": "^0.2.4",
"yup": "0.32.9"
},
"peerDependencies": {
"autoprefixer": "9.8.6",
"postcss": "7.0.35",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"resolutions": {
"react": "17.0.2",
"react-dom": "17.0.2",
"babel-loader": "8.1.0"
},
"devDependencies": {
"#babel/core": "7.12.17",
"#babel/node": "7.12.17",
"#babel/plugin-transform-react-jsx": "7.12.17",
"#babel/preset-env": "7.12.17",
"#craco/craco": "^6.1.2",
"#tailwindcss/postcss7-compat": "2.1.2",
"#typescript-eslint/eslint-plugin": "^4.25.0",
"#typescript-eslint/parser": "^4.25.0",
"#yarnpkg/pnpify": "2.4.0",
"autoprefixer": "9.8.6",
"babel-eslint": "10.1.0",
"cross-env": "7.0.3",
"eslint": "7.27.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-import-resolver-node": "^0.3.4",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"js-beautify": "1.13.13",
"postcss": "7.0.35",
"prettier": "^2.3.0",
"promise": "8.1.0",
"source-map-explorer": "2.5.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#2.1.2",
"tailwindcss-dir": "4.0.0"
},
"scripts": {
"start": "craco start",
"build": "cross-env GENERATE_SOURCEMAP=false craco build",
"test": "craco test --env=node",
"eject": "craco eject",
"build-docs": "find ./src/app/main/documentation/material-ui-components \\( -name '*.ts' -o -name '*.tsx' \\) -type f -delete && babel-node --presets #babel/preset-env src/app/main/documentation/material-ui-components/build.js",
"analyze": "craco build && source-map-explorer 'build/static/js/*.js' --html analyze-result.html",
"pnpify-sdk": "yarn pnpify --sdk",
"lint": "eslint"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 3 safari version"
]
}}
Node version = 14.2.0
npm version = 6.14.4
Any solution how can I resolve the above error and make a production build.
I think the main reason is the using cross-env package. Otherwise other scripts would cause same error, too.
FOr testing purpose, remove cross-env GENERATE_SOURCEMAP=false and pass false manually instead of process.env.GENERATE_SOURCEMAP. so your build script should be
"build": "craco build",
if it does not work, clean the cache
npm cache clean –force
delete .npm
rm -rf ~/.npm
then delete lock.json and node_modules, and reinstall
npm install

Unsupported platform for fsevents#2.3.2 installation issue

I've been trying to deploy my application to vercel for a while now and have been reading through lots of posts here on stackoverflow with the the same/similar fsevents issue. Despite everything I keep getting the same errors posted below.
things I've tried:
uninstall node_modules & package-lock.json, then running: npm i -f
adding "optionalDependencies": {"fsevents": "^2.3.2"}, then npm i -f
installing with no fsevents in package.json
... and many other attempts
Screen shot of what always happens in my deploys
I'm not super familiar with that what/why of the whole fsevents/chokidar packages, but it seems like it's needed for my MacOS after what I've been reading and I'd really appreciate some ideas for resolving this.
current package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint .",
"lint:fix": "eslint --fix ."
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"prettier --write",
"eslint --fix ."
]
},
"dependencies": {
"firebase": "^8.2.5",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"fsevents": "^2.3.2",
"js-cookies": "^1.0.4",
"next": "10.0.6",
"next-pwa": "^5.0.5",
"nookies": "^2.5.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"styled-components": "^5.2.1"
},
"optionalDependencies": {
"fsevents": "^2.3.2"
},
"devDependencies": {
"#types/node": "^14.14.25",
"#types/react": "^17.0.1",
"#types/react-redux": "^7.1.16",
"#types/styled-components": "^5.1.7",
"babel-eslint": "^9.0.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-nextjs": "^1.0.7",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-html": "^5.0.5",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^1.7.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",
"prettier": "^1.19.1",
"redux-devtools-extension": "^2.13.8",
"typescript": "^4.1.3",
"webpack": "^5.21.1"
}
}
lots of people complaining about this going back years.
sometimes the fix is upgrading to newer npm. (running npm 7.7 and still had it)
often the fix is just :
npm install -f
so forcing it worked just fine here.
We had the same problem because at the team we had different os types Linux/MacOS/Windows
I manually edited the package-lock.json and added the different os types
"node_modules/fsevents": {
...
"os": [
"darwin",
"win32",
"linux"
],
...
}
after that, I ran npm install

How to make create-react-app support .mjs files with webpack?

I'm trying to work with this twitch npm package (https://www.npmjs.com/package/twitch) and am running into some issues when deploying via creat-react-app / react-scripts.
From my understanding, the webpack config that is bundled with create-react-app doesn't like .mjs files that this npm package is using. So, I get the error below when I try to build the app.
./node_modules/twitch/es/API/Kraken/Channel/ChannelApi.mjs
app_1 | Can't import the named export 'Cacheable' from non EcmaScript module (only default export is available)
If I manually deleted the "es" folder, then the build worked and everything functioned as expected. However, this isn't a real solution because when I push to production and deploy there the node modules are re-installed and the build fails once again.
Build processes aren't really my strong suit and after googling around for a while I'm unable to find a solution. If anyone can assist or can point me in the right direction, that would be much appreciated!
If it helps, here is my package.json
{
"name": "ui",
"version": "1.0.0",
"license": "UNLICENCED",
"private": true,
"dependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/register": "^7.0.0",
"axios": "^0.19.2",
"babel-plugin-dynamic-import-node": "^2.2.0",
"btoa": "^1.2.1",
"clipboard-copy": "^3.0.0",
"connected-react-router": "^6.8.0",
"dateformat": "^3.0.3",
"dotenv": "^8.0.0",
"draft-js": "^0.11.0",
"draft-js-export-html": "^1.4.1",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"firebase": "^5.2.0",
"history": "^4.7.2",
"human-date": "^1.4.0",
"ignore-styles": "^5.0.1",
"immutability-helper": "^3.0.0",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"normalizr": "^3.2.4",
"prop-types": "^15.6.1",
"qs": "^6.5.2",
"react": "^16.8.0",
"react-animations": "^1.0.0",
"react-dnd": "^7.4.5",
"react-dnd-html5-backend": "^7.4.4",
"react-dom": "^16.8.0",
"react-ga": "^2.5.3",
"react-gtm-module": "^2.0.10",
"react-helmet": "^5.2.0",
"react-image-crop": "^8.3.0",
"react-is": "^16.8.0",
"react-loadable": "^5.5.0",
"react-loading-skeleton": "^2.0.1",
"react-on-screen": "^2.1.1",
"react-pdf": "^4.0.5",
"react-pose": "^4.0.6",
"react-redux": "^6.0.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"react-stripe-elements": "^2.0.0",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.2",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"semantic-ui-calendar-react": "^0.15.3",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.1",
"styled-components": "^4.2.0",
"twitch": "^4.2.4",
"url-loader": "^1.1.2",
"validator": "^11.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint src",
"server": "NODE_ENV=production node server/bootstrap.js"
},
"engines": {
"node": "^10.0.0",
"yarn": "^1.12.3"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-transform-runtime": "^7.4.4",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.8.1",
"eslint-plugin-react-hooks": "^3.0.0",
"prettier": "^2.0.2"
},
"proxy": "http://api:8080",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"moduleNameMapper": {
"\\.worker.js": "<rootDir>/__mocks__/workerMock.js"
}
}
}
A suggestion presented at this GitHub comment was to add react-app-rewired to your project and then use this config-overrides.js file:
module.exports = function override(config) {
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
});
return config;
}
In my project I was already using react-app-rewired, so I just added the rule from that snippet. This workaround fixed the error for me.
In the specific case of the twitch library, the author has suggested trying the #next release, although I haven't personally verified that solution yet.
Upgrading to the latest react-scripts version of 5.0.1 in my package.json as of writing this, has solved the issue for me.
Upgrading tolatest react-scripts version of 5.0.1 in my package.json as of writing this
use the code
npm install --save --save-exact react-scripts#5.0.1
or
yarn add --exact react-scripts#5.0.1

Tried To register two Views with the same name RTCVideoView in React Native

I am trying to run my app on Android but I am getting this error I don't know why I am getting this, I don't know what is causing this error in my project
I have tried tried many ways to resolve this issue but Still wasn't able to resolve this issue.
Tried To register two Views with the same name RTCVideoView
My Package.json is
{
"name": "Hello World",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^1.0.0",
"#react-native-community/async-storage": "^1.6.2",
"#react-native-community/slider": "^2.0.0",
"axios": "^0.19.0",
"connectycube-reactnative": "^1.7.3",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-autogrow-textinput": "^5.2.0",
"react-native-cache-store": "^1.0.2",
"react-native-calendars": "^1.212.0",
"react-native-deck-swiper": "^1.6.7",
"react-native-image-picker": "^1.1.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-navigation": "^3.0.0",
"react-native-scrollable-tab-view": "^0.10.0",
"react-native-swiper": "^1.5.14",
"react-native-vector-icons": "^6.6.0",
"react-native-view-overflow": "^0.0.4",
"react-native-webrtc": "^1.75.0",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"rn-prompt": "^1.0.4"
},
"devDependencies": {
"#babel/core": "^7.6.0",
"#babel/runtime": "^7.6.0",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.4.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Any Help Would be Appreciated.
All you need is just clean up the cache by the following command
npm cache clean --force
This will resolve your problem most probably
The version of react-native-webrtc you have specified in your package.json is different from the version that connectycube-reactnative depends on. The latest connectycube-reactnative (1.8.0) depends on "react-native-webrtc": "1.69.1".
Double check the dependency of the version you have installed by looking at the node_modules/connectycube-reactnative/package.json and match the version specified in your package.json to the version the connectycube-reactnative requires.
The #arzundo answer is correct
And seems this issue is addressed in latest releases here https://github.com/ConnectyCube/connectycube-reactnative-samples/tree/master/RNVideoChat so you can simply try to pull the latest master

Resources