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
Related
I have been trying several times, changing with some libraries or updating others, but nothing, I don't understand why it worked fine for me a few weeks ago and now it doesn't want to build. I hope you can shed some light on this problem, because I really don't know where the problem would be.
Maybe some dependency ?
node v. 14.19.3
Creating an optimized production build...
Failed to compile.
./node_modules/pdfmake/build/pdfmake.js 15400:112
Module parse failed: Unexpected token (15400:112)
You may need an appropriate loader to handle this file type.
| * not null.
| */
> function gen_bitlen(s, desc) /* deflate_state *s;*/ /* tree_desc *desc; /* the tree descriptor */*/{
| var tree = desc.dyn_tree;
| var max_code = desc.max_code;
npm ERR! code ELIFECYCLE
npm ERR! errno 1
Here is my package.json:
{
"name": "foo",
"version": "1.0.0",
"private": true,
"dependencies": {
"#hookform/resolvers": "^2.9.7",
"amazon-cognito-identity-js": "^4.3.2",
"aws-amplify": "^3.0.7",
"aws-amplify-react": "^3.1.1",
"axios": "^0.21.1",
"chart.js": "^2.9.3",
"crypto-js": "^3.1.9-1",
"exif-js": "2.3.0",
"formik": "^2.0.4",
"framer-motion": "^1.6.17",
"i": "^0.3.6",
"lyef-switch-button": "^2.0.1",
"materialize-css": "^1.0.0-rc.2",
"moment": "^2.24.0",
"node-sass": "^4.14.0",
"pdfmake": "0.1.41",
"react": "16.8.6",
"react-chartjs-2": "^2.8.0",
"react-csv": "^2.0.3",
"react-dom": "16.8.6",
"react-gtm-module": "^2.0.7",
"react-hook-form": "^4.9.8",
"react-idle-timer": "^5.4.0",
"react-input-mask": "^2.0.4",
"react-input-range": "^1.3.0",
"react-loading-io": "^2.2.0",
"react-materialize": "3.3.5",
"react-number-format": "^4.2.0",
"react-owl-carousel": "^2.3.3",
"react-range-picker": "0.6.1",
"react-redux": "^7.1.0-rc.1",
"react-responsive": "^7.0.0",
"react-responsive-modal": "6.1.0",
"react-router-dom": "^5.1.0",
"react-scripts": "2.1.8",
"react-scroll": "1.7.7",
"react-select": "^3.1.0",
"react-super-responsive-table": "^5.1.1",
"react-switch": "^5.0.1",
"react-toastify": "^5.4.1",
"react-toasts": "^3.0.6",
"redux": "4.0.1",
"redux-actions": "2.6.5",
"redux-logger": "3.0.6",
"redux-persist": "^5.10.0",
"redux-react-session": "2.5.0",
"redux-thunk": "2.3.0",
"semantic-ui-react": "^0.88.1",
"uuid": "^7.0.3",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-app-rewired start ",
"build": "react-app-rewired build ",
"test": " ",
"eject": "react-scripts eject",
"generate-build-version": "node generate-build-version",
"prebuild": "npm run generate-build-version"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"react-app-env": "^1.2.3",
"react-app-rewired": "^2.1.5"
}
}
I was only running the command to build the app
npm run build
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
I wanted to use a new feature of ES 2020 in my next.js so I used optional changes in my app. When I ran my code this error has occurred
Module parse failed: Unexpected token (50:191)
You may need an appropriate loader to handle this file type.
Then I ran this command
npm install --save-dev #babel/plugin-proposal-optional-chaining
but the problem still exists.
Then I decided to update babel/core to version 7, I updated it via this command
npx babel-upgrade --write
but the loader error still there and I don't have any idea. Here is my package.json file:
{
"name": "Karan",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "SET NODE_ENV=development && SET PORT=3001 && node server.js",
"build": "next build",
"prod-build": "next build",
"start": "SET NODE_ENV=production && SET PORT=8080 && node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#ckeditor/ckeditor5-basic-styles": "^11.1.4",
"#ckeditor/ckeditor5-build-classic": "^12.4.0",
"#ckeditor/ckeditor5-font": "^11.2.2",
"#ckeditor/ckeditor5-paragraph": "^11.0.5",
"#ckeditor/ckeditor5-react": "^1.1.3",
"#fullpage/react-fullpage": "^0.1.17",
"#sentry/browser": "^4.6.6",
"#svgr/webpack": "^4.3.2",
"#zeit/next-css": "^1.0.1",
"#zeit/next-stylus": "^1.0.1",
"axios": "^0.18.1",
"express": "^4.17.1",
"global": "^4.4.0",
"jalaali-js": "^1.1.0",
"leaflet": "^1.5.1",
"moment-jalaali": "^0.8.3",
"moment-jalali": "^0.3.9",
"next": "^8.1.0",
"next-images": "^1.1.2",
"next-routes": "^1.4.2",
"npm": "^6.12.1",
"numeral": "^2.0.6",
"persianjs": "^0.4.0",
"pm2": "^3.5.1",
"prop-types": "^15.6.2",
"qs": "^6.8.0",
"react": "^16.9.0",
"react-bootstrap-star-rating": "^3.5.5-alpha.0.3",
"react-dom": "^16.9.0",
"react-leaflet": "^2.4.0",
"react-modal": "^3.9.1",
"react-paginate": "^5.2.4",
"react-persian-calendar": "^1.0.3",
"react-rating": "^2.0.4",
"react-redux": "^5.0.7",
"react-responsive": "^5.0.0",
"react-select": "^2.4.4",
"react-share": "^2.4.0",
"react-slick": "^0.23.1",
"react-star-ratings": "^2.3.0",
"react-toastify": "^4.3.0",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"stylus": "^0.54.5"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"cross-env": "^5.2.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"poststylus": "^1.0.0"
}
}
Since i see that you are using next you need to add a .babelrc file beside your package.json and include the below content -
{
"presets": ["next/babel"],
"plugins": []
}
next/babel includes
preset-env
preset-react
preset-typescript
plugin-proposal-class-properties
plugin-proposal-object-rest-spread
plugin-transform-runtime
styled-jsx
An alternative approach would be to add something similar (including the preset/transforms you need for your application) in your package.json
,
"babel": {
"presets": [
"nano-react-app"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"#babel/plugin-transform-react-jsx",
{
"pragmaFrag": "React.Fragment"
}
]
]
}
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
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.