Related
Very simply by using the following command, I am unable to install React-chartJs-2 module in my React Parcel project:
npm install --save chart.js react-chartjs-2
After the installation when i started my project using (npm start), i getting the following error:
#parcel/core: Failed to resolve 'react-chartjs-2' from './src/pages/dashboard/quiz-detail.js'
My package.json after installation is looks like:
{
"name": "quizcopy",
"version": "1.0.0",
"homepage": ".",
"description": "",
"source": "/src/index.html",
"scripts": {
"start": "parcel",
"build": "parcel build src/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#parcel/transformer-sass": "^2.7.0",
"autoprefixer": "^10.4.8",
"buffer": "^6.0.3",
"parcel": "^2.7.0",
"postcss": "^8.4.16",
"process": "^0.11.10",
"sass": "^1.54.9",
"tailwindcss": "^3.1.8"
},
"dependencies": {
"#headlessui/react": "^1.7.0",
"#heroicons/react": "^2.0.10",
"axios": "^0.27.2",
"chart.js": "^4.1.1",
"crypto-js": "^4.1.1",
"dotenv": "^16.0.2",
"js-cookie": "^3.0.1",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-chartjs-2": "^5.1.0",
"react-datetime-picker": "^4.0.1",
"react-dom": "^18.2.0",
"react-export-table-to-excel": "^1.0.6",
"react-google-recaptcha-v3": "^1.10.0",
"react-hot-toast": "^2.4.0",
"react-image-file-resizer": "^0.4.8",
"react-quill": "^2.0.0",
"react-router-dom": "^6.3.0",
"react-transition-group": "^4.4.5",
"read-excel-file": "^5.5.3",
"swr": "^1.3.0"
}
}
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.
When I run npm install to install packages I got this error :
npm ERR! code ELOCKVERIFY
npm ERR! Errors were found in your package-lock.json, run npm install to fix them.
npm ERR! Missing: bootstrap-duallistbox#github:istvan-ujjmeszaros/bootstrap-duallistbox
npm ERR! A complete log of this run can be found in:
npm ERR! /home/--/.npm/_logs/2018-09-25T10_34_06_085Z-debug.log
And this is my package.json file :
{
"name": "smartadmin-reactjs",
"version": "1.2.4",
"description": "Smartadmin ReactJs template",
"main": "index.js",
"scripts": {
"build": "./node_modules/.bin/webpack --config webpack.config.js --progress --colors --env production",
"build-dev": "./node_modules/.bin/webpack --config webpack.config.js --progress --colors --env development",
"dev": "./node_modules/.bin/webpack-dev-server --config webpack.config.js --progress --env development"
},
"repository": {
"type": "git",
"url": "git+https://smartadmin-reactjs#bitbucket.org/smartadmin-dev/smartadmin-reactjs.git"
},
"keywords": [],
"author": "griga",
"license": "ISC",
"homepage": "https://bitbucket.org/smartadmin-dev/smartadmin-reactjs#readme",
"dependencies": {
"X-editable": "github:vitalets/x-editable",
"bootstrap": "3.3.7",
"bootstrap-colorpicker": "2.5.1",
"bootstrap-duallistbox": "github:istvan-ujjmeszaros/bootstrap-duallistbox",
"bootstrap-markdown": "2.10.0",
"bootstrap-progressbar": "0.9.0",
"bootstrap-slider": "9.8.0",
"bootstrap-tagsinput": "0.7.1",
"bootstrap-timepicker": "0.5.2",
"bootstrap4-duallistbox": "github:istvan-ujjmeszaros/bootstrap-duallistbox",
"chart.js": "2.6.0",
"classnames": "2.2.5",
"clockpicker": "0.0.7",
"clone": "2.1.1",
"core-js": "2.4.1",
"debounce": "1.0.2",
"dropzone": "5.0.1",
"dygraphs": "1.1.1",
"fuelux": "3.16.0",
"he": "1.1.1",
"highcharts": "5.0.12",
"ion-rangeslider": "2.1.7",
"jquery": "2.2.4",
"jquery-color": "1.0.0",
"jquery-jcrop": "0.9.13",
"jquery-knob": "1.2.11",
"jquery-ui": "1.12.1",
"jquery-ui-npm": "1.12.0",
"jquery-validation": "1.16.0",
"jquery.maskedinput": "1.4.1",
"lodash": "4.17.4",
"markdown": "0.5.0",
"morris.js": "0.5.0",
"nouislider": "10.0.0",
"prop-types": "15.5.10",
"raphael": "2.2.7",
"react": "15.5.4",
"react-bootstrap": "0.31.0",
"react-dom": "15.5.4",
"react-google-maps": "5.1.1",
"react-hot-loader": "3.0.0-beta.6",
"react-redux": "5.0.5",
"react-router": "3.0.5",
"react-router-redux": "4.0.8",
"react-tap-event-plugin": "2.0.1",
"redux": "3.6.0",
"redux-thunk": "2.2.0",
"reflux": "6.4.1",
"scriptjs": "2.5.8",
"select2": "4.0.3",
"smartadmin-plugins": "1.0.20",
"summernote": "0.8.4",
"then-request": "2.2.0",
"to-markdown": "3.0.4"
},
"devDependencies": {
"babel-core": "6.25.0",
"babel-loader": "7.0.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-2": "6.24.1",
"clean-webpack-plugin": "0.1.16",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.4",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"html-webpack-plugin": "2.28.0",
"imports-loader": "0.7.1",
"json-loader": "0.5.4",
"redux-devtools": "3.4.0",
"redux-devtools-dock-monitor": "1.1.2",
"redux-devtools-log-monitor": "1.3.0",
"redux-logger": "3.0.6",
"script-loader": "0.7.0",
"style-loader": "0.18.2",
"url-loader": "0.5.9",
"webpack": "2.6.1",
"webpack-dev-server": "2.4.5"
}
}
I have tried to install bootstrap-duallistbox individually with npm or bower but nothing worked out well.
I'm trying to launch the react version of smartAdmin.
I try the bower install and npm install for you.
bower install --save bootstrap-duallistbox
Here is the result.
bower bootstrap-duallistbox#* cached https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox.git#4.0.1
bower bootstrap-duallistbox#* validate 4.0.1 against https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox.git#*
with npm: I add this in package.json and it works out.
"devDependencies": {
"bootstrap-duallistbox": "^3.0.6"
}
I'm trying to run tests on React components within Mocha, but I keep stumbling up on this error:
var os = (navigator.platform.match(/mac|win|linux/i) || ["other])[0].toLowerCase();
TypeError: Cannot read property 'match' of undefined
I understand that the error means that the module is having trouble figuring out what platform the code is running on. However this error is being thrown from node_modules/brace/index.js, so it is not something that I have written myself. Is there a way for Mocha to ignore this and continue with the tests?
Here is my package.json:
{
"name": "project",
"version": "0.2.0",
"description": "project",
"scripts": {
"clean:build": "node ./bin/clean.js createdir",
"build:html": "node ./bin/buildHtml.js",
"deployProduction": "node ./bin/deployProduction.js",
"start": "webpack-dev-server --config ./config/webpack.config.dev.js --hot --in line --progress",
"serve": "npm run deployProduction&& supervisor --watch ./production-copy src/js/server",
"prebuild": "npm run clean:build",
"postbuild": "node ./bin/postBuild.js",
"rebuild-win": "set BUILD_TYPE=preview& npm run prebuild & npm run build-win & npm run serve",
"build": "set BUILD_TYPE=final& npm run prebuild & npm run build-win",
"deploy": "npm run build & npm run serve",
"build-win": "set NODE_ENV=production & npm run element-build & npm run build-doc & npm run build:html & webpack -p --config ./config/webpack.config.prod.js --json > webpack.log.json & npm run postbuild",
"lint": "eslint config src/js/**/*.js",
"jscs": "jscs src/js/",
"test": "mocha --compilers js:babel-core/register --require ./test/unit/dom.js --recursive ./test/*.spec.js ",
"test:watch": "npm run test -- --watch",
"element-init": "node node_modules/element-theme/bin/element-theme -i src/js/core/ui/element-theme.css",
"element-build": "node node_modules/element-theme/bin/element-theme -c src/js/core/ui/element-theme.css -o src/js/core/ui/element-theme ",
"build-doc": "node bin/buildDoc.js "
},
"repository": {
"type": "git",
"url": "<our repository>"
},
"license": "MIT",
"bugs": {
"url": "<our url>"
},
"homepage": "<our homepage>",
"dependencies": {
"autoprefixer": "^6.3.6",
"axios": "^0.11.1",
"babel-standalone": "^6.10.3",
"bluebird": "^3.4.0",
"brace": "^0.8.0",
"browserify": "^13.0.1",
"classnames": "2.2.3",
"cls-bluebird": "^1.0.1",
"codemirror": "^5.16.0",
"continuation-local-storage": "^3.1.7",
"dateformat": "^1.0.12",
"diff": "^3.0.1",
"element-theme": "^0.4.0",
"element-ui": "^1.1.5",
"express-history-api-fallback": "^2.0.0",
"filedrop": "^2.0.0",
"fs-extra": "^0.30.0",
"history": "^2.0.2",
"humps": "^1.0.0",
"isomorphic-fetch": "^2.2.1",
"jszip": "^3.0.0",
"jszip-utils": "0.0.2",
"lodash": "^4.11.1",
"material-ui": "^0.16.2",
"materialize-css": "^0.97.6",
"normalizr": "^1.0.0",
"raven-js": "^3.9.1",
"react": "^15.4.2",
"react-ace": "^4.1.4",
"react-dom": "^15.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.4.0",
"redux-logger": "^2.6.1",
"redux-saga": "^0.9.5",
"request": "^2.72.0",
"request-promise": "^3.0.0",
"save-as": "^0.1.7",
"showdown": "^1.4.2",
"three": "^0.79.0",
"vue": "^2.0.5",
"vue-loader": "^9.8.1",
"vue-router": "^2.0.1",
"vue-slider-component": "^2.0.4",
"walk": "^2.3.9"
},
"devDependencies": {
"babel-core": "^6.7.6",
"babel-eslint": "^6.1.0",
"babel-loader": "^6.0.2",
"babel-plugin-react-transform": "^2.0.2",
"babel-polyfill": "^6.6.1",
"babel-preset-airbnb": "^2.2.3",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"babel-register": "^6.7.2",
"chai": "^3.5.0",
"chai-jquery": "2.0.0",
"cheerio": "^0.22.0",
"colors": "1.1.2",
"concurrently": "^2.0.0",
"copy-webpack-plugin": "2.1.1",
"css-loader": "0.23.1",
"element-theme-default": "^1.1.5",
"enzyme": "^2.7.1",
"eslint": "^2.13.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-react": "^5.2.2",
"express": "^4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"jquery": "2.2.3",
"jscs": "3.0.3",
"jsdoc-to-markdown": "^2.0.0",
"jsdom": "^9.11.0",
"mocha": "^3.2.0",
"ncp": "^2.0.0",
"node-sass": "3.7.0",
"postcss-loader": "0.8.2",
"react-addons-test-utils": "^15.4.2",
"react-hot-loader": "^1.3.1",
"react-transform-hmr": "^1.0.4",
"redux-devtools": "^3.3.1",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"remotedev": "^0.1.2",
"rimraf": "^2.5.2",
"sass-loader": "3.2.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "^1.13.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "1.14.1",
"webpack-hot-middleware": "^2.10.0"
}
To solve this, as the OP mentioned you need to set up the navigator in your test setup and include two properties: platform and appName.
Here is a little snip-it of what your test setup script should contain to set this up properly:
var exposedProperties = ['window', 'navigator', 'document'];
global.window = document.defaultView;
global.navigator = {
userAgent: 'node.js',
platform: 'windows', // This can be set to mac, windows, or linux
appName: "Microsoft Internet Explorer", // Be sure to define this as well
};
Found the issue: I was recreating the navigator variable and forgetting to put the platform member inside of it.
We are facing a problem with Relay/GraphQL/React in production. When testing in master everything works fine, however in production we get the following error in the console which causes everything related to Relay/GraphQL/React not to be working at all:
Uncaught Error: Relay transform error ``Map is not defined`` in file '/var/app/ondeck/app/react/relay/routes/xxx-route.jsx'. Try updating your GraphQL schema if an argument/field/type was recently added.
We believe is something related to the build of the application when it's getting deployed, however we have no idea where to start looking at.
This is my package.json in case it helps:
{
"private": true,
"devDependencies": {
"babel-eslint": "^6.0.4",
"eslint": "^2.11.1",
"eslint-plugin-react": "^5.1.1",
"webpack-notifier": "^1.3.1"
},
"dependencies": {
"autobind-decorator": "^1.3.3",
"babel-core": "^6.4.0",
"babel-loader": "^6.2.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-relay-plugin": "^0.9.0",
"extract-text-webpack-plugin": "^1.0.1",
"graphiql": "^0.7.2",
"graphql": "^0.6.0",
"isomorphic-fetch": "^2.2.1",
"node-sass": "^3.3.3",
"postal": "^2.0.4",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-linkify": "^0.1.1",
"react-notification-system": "^0.2.6",
"react-relay": "^0.9.0",
"react-star-rating-component": "^1.0.0",
"react-stars": "^2.1.0",
"react-webpack-rails": "^0.4.1",
"sass-loader": "^4.0.0",
"webpack": "^1.12.1"
},
"scripts": {
"build": "webpack -p --config webpack/production.config.js",
"start": "webpack -w --config webpack/dev.config.js",
"lint": "eslint --ext .js,.jsx app/react/**"
},
"license": "",
"engines": {
"node": ">= 0.10"
}
}
Just for the record, I needed to update Node.js to the latest version in order for everything to work again. Thanks.