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.
Related
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
When i run my react project i get this following vulnerabilities:
How can i fix this problem?
And can anyone please explain me what this actually is warning me about?
Do i need to update babel-cli?
I have tried to install braces#2.3.0 to see if this warning get away, but nothing changes when i install it.
My package.json file:
{
"name": "Recordshop",
"version": "1.0.0",
"scripts": {
"prestart": "babel-node src-gen/config/startMessage.js",
"start": "npm-run-all --parallel open:src-gen lint:watch",
"open:src-gen": "babel-node src-gen/config/server.dev.js",
"lint": "node_modules/.bin/esw webpack.config.* src-gen src-gen/config",
"lint:watch": "npm run lint -- --watch",
"clean-prod": "npm run remove-prod && mkdirp prod/app",
"remove-prod": "node_modules/.bin/rimraf ./prod",
"build:html": "babel-node src-gen/config/buildHTML.js",
"prebuild": "npm-run-all clean-prod lint build:html",
"build": "babel-node src-gen/config/build.js",
"postbuild": "babel-node src-gen/config/server.prod.js"
},
"private": true,
"optionalDependencies": {
"fsevents": "*"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"es6-promise": "^4.0.5",
"isomorphic-fetch": "^2.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-fontawesome": "^1.6.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.7",
"reduce-reducers": "^0.1.2",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"ajv": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "6.24.1",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-register": "^6.24.1",
"chalk": "^2.1.0",
"cheerio": "^1.0.0-rc.2",
"colors": "^1.1.2",
"compression": "^1.6.2",
"compression-webpack-plugin": "^1.1.11",
"cross-env": "^5.0.0",
"css-loader": "^2.1.1",
"eslint": "^4.19.0",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-react": "^7.0.1",
"eslint-watch": "^3.1.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"image-webpack-loader": "^4.2.0",
"jquery": "^3.1.1",
"mkdirp": "^0.5.1",
"node-sass": "^4.5.3",
"npm-run-all": "^4.0.2",
"open": "^6.3.0",
"redux-immutable-state-invariant": "^2.0.0",
"rimraf": "^2.5.4",
"sass-loader": "^6.0.5",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.32.2",
"webpack-combine-loaders": "^2.0.3",
"webpack-dev-middleware": "^2.0.5",
"webpack-hot-middleware": "^2.18.0"
}
}
Thank you for all help!
I got same error. And it was the babel-core error. Try update babel-core using yarn add --dev babel-jest babel-core#^7.0.0-bridge.0 #babel/core regenerator-runtime
I have a problem with my deployed app on Heroku ! I use my back end with an API made in node ! It works fine locally and but when i deploy the app, i have this message "Invalid Host Header". When i remove the proxy line in my Package.json, it works but automatically i don't have access to my API !
My Api is deployed in another dyno and works fine !
Package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"proxy": "https://myapp.herokuapp.com/",
"dependencies": {
"awesome-typescript-loader": "^3.4.1",
"axios": "^0.17.1",
"babel": "^6.23.0",
"babel-plugin-react-css-modules": "^3.3.2",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^3.3.7",
"css-loader": "^0.28.8",
"i": "^0.3.6",
"jquery": "^3.2.1",
"jwt-decode": "^2.2.0",
"prop-types": "^15.6.0",
"radium": "^0.21.0",
"react": "^16.2.0",
"react-big-calendar": "^0.18.0",
"react-bootstrap": "^0.31.5",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-responsive": "^4.0.4",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"react-style": "^0.5.5",
"redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2",
"redux-thunk": "^2.2.0",
"semantic-ui-css": "^2.2.12",
"semantic-ui-less": "^2.2.12",
"semantic-ui-react": "^0.77.1",
"styled-components": "^2.4.0",
"url-loader": "^0.6.2",
"validator": "^9.2.0",
"webpack": "^3.10.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"webpack": "webpack",
"eject": "react-scripts eject",
"lint": "eslint src",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2016": "^6.24.1",
"css-loader": "^0.28.8",
"eslint": "^4.13.1",
"eslint-config-airbnb": "^15.0.1",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.5.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"img-loader": "^2.0.0",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"node-sass": "^4.7.2",
"nodemon": "^1.13.3",
"prettier": "^1.9.2",
"react-svg-loader": "^2.1.0",
"resolve-url-loader": "^2.2.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.10.1"
}
}
Thank you for your help !
It's funny, the proxy setting works when running the app on my local env and calling the heroku api
when I deploy it, it doesn't call the Heroku API
You need to change the proxy to match your heroku app name:
"proxy": "https://<insert your app name here>.herokuapp.com/",
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.
I am trying to run JEST for the react code,it always shows PASS and not running any script written inside test folder.Inside coverage folder also i am not getting any components folder being created.kindly let me know how to fix it
following are my configurations
package.json
{
"devDependencies": {
"axios": "^0.11.1",
"babel": "^6.5.2",
"babel-core": "^6.7.4",
"babel-eslint": "^4.1.6",
"babel-jest": "^9.0.3",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"bower-webpack-plugin": "^0.1.9",
"css-loader": "^0.23.1",
"es6-promise": "^3.2.1",
"es6bindall": "0.0.5",
"eslint": "^1.10.3",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^5.0.0",
"express": "^4.13.4",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.4",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-jest": "^0.2.0",
"grunt-webpack": "^1.0.11",
"imports-loader": "^0.6.5",
"jasmine-ajax": "^3.2.0",
"jest-cli": "^0.9.2",
"node-sass": "^3.4.2",
"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-fileupload": "^2.2.0",
"react-hot-loader": "^1.2.9",
"react-router": "^2.6.1",
"sass-loader": "^3.2.0",
"sinon": "^1.17.4",
"style-loader": "^0.13.1",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"scripts": {
"prestart": "webpack",
"build": "webpack",
"test": "jest",
"lint": "node_modules/.bin/eslint -f html app-client.js components > report.html || exit 0",
"start": "node app-server.js"
},
"jest": {
"scriptPreprocessor": "<rootDir>/jest-script-preprocessor",
"collectCoverage": true,
"preprocessorIgnorePatterns": [
"../frontend/node_modules/"
],
"testFileExtensions": [
"js",
"es6"
],
"moduleFileExtensions": [
"js",
"json",
"es6"
],
"unmockedModulePathPatterns": [
"react",
"fbjs",
"react-dom",
"react-addons-test-utils",
"es6bindall",
"axios",
"promise",
"react-router",
"sinon"
],
"verbose": true
}
}
The folder for your tests should be __tests__ not tests. If you want to change that you need to use testRegex option.
If you want run it with coverage you can do:
jest --coverage
or in your script case:
npm test -- --coverage
Be aware that I am talking about latest version of Jest (14.x). You can find an example I wrote about setting up Jest and running tests with or without coverage.