Since upgrading React and Babel, I'm getting this error in one of my files. It is clearly a phantom error as everything worked fine before and this file wasn't changed at all. Does anyone have a clue what is happening here and how I can fix it?
The error
Uncaught Error: Relay transform error Syntax Error FileXYZ - Unexpected character "\u2028".
9: user_id
10: user_name
^
in file XYZ. Try updating your GraphQL schema if an argument/field/type was recently added.
My previous package.json was like this:
"dependencies": {
"babel-core": "^5.8.22",
"babel-loader": "^5.3.2",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-react": "^6.0.0",
"babel-relay-plugin": "^0.3.0",
"es5-shim": "^4.5.7",
"graphiql": "0.6.6",
"graphql": "^0.4.18",
"history": "1.13.1",
"isomorphic-fetch": "^2.1.1",
"react": "^0.14.8",
"react-addons-shallow-compare": "^0.14.0",
"react-chartjs": "^0.6.0",
"react-dom": "^0.14.0",
"react-loader": "^2.0.0",
"react-relay": "^0.4.0",
"react-router": "1.0.0-rc3",
"react-router-relay": "^0.7.0",
"superagent": "^1.2.0",
"webpack": "^1.13.1"
},
"devDependencies": {
"babel-eslint": "^3.1.30",
"babel-jest": "^5.3.0",
"jest-cli": "^0.9.0",
"react-addons-test-utils": "^0.14.0-beta3"
},
Now it is like this:
"dependencies": {
"babel-polyfill": "^6.9.1",
"babel-runtime": "^6.9.2",
"es5-shim": "^4.5.7",
"graphiql": "0.7.3",
"graphql": "^0.6.2",
"history": "1.13.1",
"isomorphic-fetch": "^2.1.1",
"react": "^15.2.1",
"react-addons-shallow-compare": "^15.2.1",
"react-dom": "^15.2.1",
"react-loader": "^2.0.0",
"react-relay": "^0.9.2",
"react-router": "1.0.0-rc3",
"react-router-relay": "^0.7.0",
"superagent": "^1.2.0"
},
"devDependencies": {
"babel-core": "^6.11.4",
"babel-eslint": "^6.1.2",
"babel-jest": "^13.2.2",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"babel-relay-plugin": "^0.9.2",
"jest-cli": "^12.1.1",
"react-addons-test-utils": "^15.2.1",
"webpack": "^1.13.1"
},
I haven't been able to update react-router and relay as of yet as it introduced many breaking changes, which I haven't been able to address completely and I'm asking about this in a different question.
Any help on the this issue would be greatly appreciated. Thanks!
Related
I started a new job and here the client is written in react. The big problem is that everything is very old and uses classes instead of React hooks. One simple example of an issue is the need to use mobx 6 or higher however this will require going over all the classes removing the #observable and changing it to make it observable. I don't even know how to start transitioning to a newer version of React with hooks since there is no way of doing it gradually only all at once. In any case if someone can help me with a suggestion or what can be done I will appreciated very much here is dependencies in my package.json if it's of any help
"dependencies": {
"babel-plugin-react-intl": "~3.0.1",
"babel-plugin-wildcard": "~2.1.2",
"bestzip": "^2.2.0",
"bootstrap": "~4.2.1",
"classnames": "~2.2.6",
"config": "~1.27.0",
"coreui.io": "^1.0.0-alpha.6",
"cross-env": "~5.2.0",
"event-emitter-es6": "~1.1.5",
"font-awesome": "~4.7.0",
"js-file-download": "~0.4.4",
"jsx-control-statements": "~3.2.8",
"lodash": "~4.17.4",
"mobx-react-intl": "~1.4.0",
"moment": "~2.20.1",
"papaparse": "~4.3.7",
"preact-context": "~1.1.2",
"query-string": "~6.1.0",
"react": "16.8.0",
"react-app-polyfill": "~0.2.0",
"react-beautiful-dnd": "^13.1.0",
"react-bootstrap-table": "~4.3.1",
"react-dates": "~20.0.0",
"react-dom": "16.8.0",
"react-fast-compare": "~2.0.4",
"react-fontawesome": "~1.6.1",
"react-google-charts": "~3.0.11",
"react-inlinesvg": "~0.6.2",
"react-interval": "~2.0.2",
"react-intl": "~2.8.0",
"react-json-view": "^1.19.1",
"react-ladda": "~6.0.0",
"react-rangeslider": "~2.2.0",
"react-router-dom": "~4.3.1",
"react-select": "~1.2.1",
"react-smooth-range-input": "~0.2.4",
"react-transition-group": "~1.2.1",
"reactstrap": "~7.1.0",
"shx": "^0.3.3",
"simple-line-icons": "~2.4.1",
"superagent": "~3.8.0",
"superagent-auth-bearer": "~0.0.1",
"svgo": "~1.0.3",
"three2": "npm:three#0.125.2",
"webpack-cli": "~3.2.1"
},
"devDependencies": {
"babel": "~6",
"babel-cli": "~6.24.1",
"babel-eslint": "~10.0.1",
"babel-loader": "~7.1.1",
"babel-plugin-flow-react-proptypes": "~3.3.0",
"babel-plugin-syntax-async-functions": "~6.13.0",
"babel-plugin-transform-decorators-legacy": "~1.3.4",
"babel-polyfill": "~6.23.0",
"babel-preset-env": "~1.6.0",
"babel-preset-es2015": "~6.24.1",
"babel-preset-react": "~6.24.1",
"babel-preset-stage-1": "~6.24.1",
"babel-preset-stage-2": "~6.24.1",
"babili-webpack-plugin": "~0.1.2",
"cobertura-merge": "*",
"copy-webpack-plugin": "~4.6.0",
"css-hot-loader": "~1.3.0",
"css-loader": "~2.1.0",
"eslint": "~4.4.1",
"eslint-config-wix": "~1.1.16",
"eslint-loader": "~1.9.0",
"extract-text-webpack-plugin": "~4.0.0-beta.0",
"file-loader": "~3.0.1",
"flow-bin": "~0.48.0",
"flow-status-webpack-plugin": "~0.1.7",
"html-webpack-plugin": "~3.2.0",
"install": "~0.10.1",
"jest": "~20.0.4",
"jest-cli": "~20",
"jest-html-reporters": "^1.2.1",
"jest-junit": "*",
"mobx": "~5.9.0",
"mobx-react": "~5.4.3",
"mobx-react-devtools": "~4.2.15",
"node-sass": "~4.14.0",
"nodemon": "~1.11.0",
"npm": "~5.3.0",
"optimize-css-assets-webpack-plugin": "~3.1.1",
"preact": "~10.0.0-alpha.0",
"preact-compat": "~3.18.4",
"react-c3js": "~0.1.20",
"resolve-url": "~0.2.1",
"resolve-url-loader": "~3.0.0",
"sass-loader": "~7.1.0",
"style-loader": "~0.18.2",
"svg-react-loader": "~0.4.6",
"url-loader": "~1.1.2",
"webpack": "~4.29.0",
"webpack-dev-server": "~3.1.14",
"webpack-merge": "~4.1.0"
},
I am facing random test failures when running Test Suite with an exception of 'cannot read property of undefined'
I am guessing it has something to do with race conditions happening somewhere but to my knowledge wherever the code failure points i have a await in front of those methods.
I read somewhere it could be a version issue with
"react-test-renderer": "^16.5.2"
Below are the dependencies that i am using:
"devDependencies": {
"apollo-boost": "^0.1.9",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-jest": "^23.0.1",
"babel-loader": "^7.1.4",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-react-css-modules": "^3.4.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"classnames": "^2.2.6",
"commander": "^2.16.0",
"cross-env": "^5.2.0",
"css-loader": "^0.28.11",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"enzyme-to-json": "^3.3.4",
"eslint-plugin-graphql": "^3.0.3",
"file-loader": "^1.1.11",
"flow": "^0.2.3",
"flow-bin": "^0.93.0",
"flow-typed": "^2.5.1",
"graphql-code-generator": "^0.17.0",
"graphql-codegen-flow": "^0.17.0",
"graphql-codegen-flow-resolvers": "^0.17.0",
"graphql-tag": "^2.9.2",
"graphql-tools": "^4.0.4",
"grid-styled": "^4.1.1",
"isomorphic-fetch": "^2.2.1",
"jest": "^23.1.0",
"leasot": "^6.3.0",
"nock": "^9.4.3",
"nodemon": "^1.18.6",
"normalize.css": "^8.0.0",
"npm-watch": "^0.6.0",
"react": "^16.7.0",
"react-apollo": "^2.3.2",
"react-dates": "^17.2.0",
"react-dom": "^16.3.1",
"react-ga": "^2.5.7",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-test-renderer": "^16.5.2",
"react-toastify": "^4.2.0",
"recharts": "^1.1.0",
"redis-mock": "^0.43.0",
"redux": "^4.0.0",
"reselect": "^3.0.1",
"rimraf": "^2.6.2",
"sinon": "^6.0.0",
"umzug": "^2.1.0",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.3",
"webpack-dev-middleware": "^3.1.3"
}
"dependencies": {
"babel-plugin-transform-async-to-generator": "^6.24.1",
"bluebird": "^3.5.0",
"body-parser": "^1.16.0",
"camelcase": "^5.0.0",
"casual-browserify": "^1.5.19-2",
"cheerio": "^1.0.0-rc.2",
"connect-redis": "^3.4.0",
"cookie-parser": "^1.4.3",
"date-fns": "^1.29.0",
"elasticsearch": "^15.1.1",
"express": "^4.14.0",
"express-graphql": "^0.6.12",
"express-session": "^1.15.6",
"express-socket.io-session": "^1.3.5",
"file-loader": "^1.1.11",
"graphql": "^0.13.2",
"graphql-bigint": "^1.0.0",
"graphql-relay": "^0.5.5",
"graphql-sequelize": "^8.3.1",
"graygelf": "^1.2.0",
"immutable": "^4.0.0-rc.9",
"lodash": "^4.17.10",
"mkdirp": "^0.5.1",
"moment": "^2.22.2",
"mysql2": "^1.5.3",
"n": "^2.1.12",
"nc": "^1.0.2",
"node-resque": "^5.5.1",
"node-schedule": "^1.3.2",
"pm2": "^2.2.3",
"redis": "^2.8.0",
"request": "^2.87.0",
"request-promise": "^4.2.2",
"winston": "^3.0.0"
}
I am expecting tests to be consistent with either failures/success.
Can someone help understand what is going wrong?
Looks like there was some race condition in the code and adding waits(which is probably the worst way of solving anything!) helped.
I tried all the potential solutions but they did not work. What happens if I have babel-polyfill error on production. Some browsers do not work?
📷
I am currently using react-loadable to create chunks by page. After that I am getting babel-polyfill error.
webpack.prod.js
entry: ['babel-polyfill', path.resolve(CWD, './react/containers/root/root.prod.js')],
.babelrc
{
"presets":[
"react",
"es2015",
"stage-2"
],
"plugins":[
"react-loadable/babel",
"syntax-dynamic-import",
"dynamic-import-node",
[
"babel-plugin-webpack-alias",
{
"config":"${PWD}/config/aliases/aliases.config.js"
}
],
[
"import-inspector",
{
"serverSideRequirePath":true,
"webpackRequireWeakId":true
}
]
]
}
​
and uses babelrc with babel-core like this for node server
babel-core/register(babelrc)
And adding this plugins to the babel-loader
const plugins = [
// 'transform-decorators-legacy',
'syntax-dynamic-import',
'transform-react-loadable',
'react-loadable/babel',
'recharts',
'transform-runtime',
['import-inspector', {
'serverSideRequirePath': true,
'webpackRequireWeakId': true,
}],
]
​
And there is no other place using babel-polyfill in my code.
I went through most of the similar questions in reddit and stackoverflow. Most of the cases this issue resolves when they remove duplicate poly fill.
I never had this issue until I implemented code split...
Added dev dependencies
"devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.0",
"babel-jest": "^22.4.3",
"babel-loader": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-webpack-alias": "^2.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-jest": "^22.4.3",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chalk": "^2.4.0",
"compression-webpack-plugin": "^1.0.1",
"copy-webpack-plugin": "^4.5.1",
"css-modules-require-hook": "4.0.6",
"eslint": "^4.6.1",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-airbnb-base": "^12.0.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.3.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-watch": "^3.1.2",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"husky": "^0.15.0-rc.9",
"ignore-loader": "^0.1.2",
"jest": "^22.4.3",
"lazysizes": "^4.0.1",
"mobile-detect": "^1.4.1",
"postcss-loader": "^2.0.9",
"postcss-modules-values": "^1.3.0",
"postcss-nested": "^2.1.2",
"puppeteer": "^1.4.0",
"rc-tooltip": "^3.7.2",
"react-hot-loader": "^3.1.3",
"react-id-swiper": "^1.6.4",
"react-masonry-component": "^6.0.0",
"react-scroll": "^1.7.9",
"react-tabbordion": "^1.0.2",
"react-vertical-timeline-component": "^2.2.0",
"react-visibility-sensor": "^3.11.0",
"recharts": "^1.0.0-beta.10",
"redux-devtools": "^3.4.1",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.4.0",
"redux-logger": "^3.0.6",
"style-loader": "^0.19.0",
"svg-to-json-webpack-plugin": "^1.1.1",
"uglifyjs-webpack-plugin": "^1.2.2",
"webpack": "4.19.1",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "3.1.2",
"webpack-dev-middleware": "^3.0.0",
"webpack-hot-middleware": "^2.21.2",
"webpack-merge": "^4.1.2",
"why-did-you-update": "^0.1.1",
"workbox-webpack-plugin": "^3.1.0"
}
You are using babel-polyfill as an entry. Are you also requiring babel-polyfill in your files?
If not maybe some other library is requiring it.
source
I am using swiper in a react app. In Internet Explorer 11 it pop up syntax error
(about arrow function since it is not supported by IE11)
I added the code suggested by the github repository but it doesn't work still getting syntax error on dom modular. Which use function arrow instead of been transformed into ES5. Anyone can help me correct this issue?
Syntax Error:
Object.key(Methods).forEach((methodName) => { WEBPACK_IMPORTED_MODULE_0_mod7_dist_dom7_modular...});
.babelrc:
{
"presets": [
"es2015",
"react"
]
}
webpack file part:
test: /\.js$/,
exclude: /(node_modules|bower_components|node_modules\/(?!(dom7|ssr-window|swiper)\/).*)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
},
},
},
package json
"dependencies": {
"#firebase/firestore": "^0.1.4",
"#google-cloud/bigquery": "^0.9.6",
"#google-cloud/pubsub": "^0.14.5",
"autoprefixer": "^6.6.1",
"axios": "^0.15.3",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.9.1",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-preset-stage-1": "^6.5.0",
"babel-register": "^6.26.0",
"classnames": "^2.2.5",
"cross-env": "^3.2.4",
"css-loader": "^0.28.5",
"cssnano": "^3.7.1",
"dotenv-webpack": "^1.5.4",
"es6-promise": "^3.2.1",
"firebase": "^4.6.2",
"firebase-admin": "5.4.1",
"firebase-functions": "0.7.1",
"firebase-tools": "^3.15.1",
"firebaseui": "2.3.0",
"glob": "^7.0.5",
"hashbuster": "^1.0.1",
"immutability-helper": "^2.1.1",
"json-loader": "^0.5.4",
"material-ui": "^0.20.0",
"minimist": "^1.2.0",
"node-geopoint": "^1.0.1",
"node-sass": "^4.5.3",
"normalize.css": "^5.0.0",
"postcss": "^5.0.21",
"postcss-flexbugs-fixes": "^2.0.0",
"postcss-load-config": "1.0.0",
"postcss-loader": "1.2.1",
"postcss-pxtorem": "^3.3.1",
"prop-types": "^15.6.0",
"pubsub-js": "^1.5.3",
"react": "^16.0.0",
"react-avatar-editor": "^10.3.0",
"react-css-modules": "^4.1.0",
"react-dom": "^16.0.0",
"react-geosuggest": "^2.6.0",
"react-google-maps": "^9.4.2",
"react-modal": "^3.1.6",
"react-onclickoutside": "^5.11.1",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.7",
"react-router-sitemap": "^1.1.3",
"react-scrollchor": "^4.0.0",
"react-svg-inline": "^2.0.0",
"react-times": "^2.2.8",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"resolve-url-loader": "^2.1.0",
"script-loader": "^0.7.0",
"slug": "^0.9.1",
"swiper": "^4.1.6"
},
I have a Meteor / React application and it's throwing the following warning:
WARNING: npm peer requirements not installed:
- react#15.3.2 installed, react#0.14.x needed
- react-dom#15.3.1 installed, react-dom#0.14.x needed
- react-addons-transition-group#15.3.1 installed, react-addons-transition-group#0.14.x needed
- react-addons-css-transition-group#15.3.1 installed, react-addons-css-transition-group#0.14.x needed
- react-addons-linked-state-mixin#15.3.1 installed, react-addons-linked-state-mixin#0.14.x needed
- react-addons-create-fragment#15.3.1 installed, react-addons-create-fragment#0.14.x needed
- react-addons-update#15.3.1 installed, react-addons-update#0.14.x needed
- react-addons-pure-render-mixin#15.3.1 installed, react-addons-pure-render-mixin#0.14.x needed
- react-addons-test-utils#15.3.1 installed, react-addons-test-utils#0.14.x needed
- react-addons-perf#15.3.1 installed, react-addons-perf#0.14.x needed
The dependencies in my package.json file are as follows:
"dependencies": {
"bcrypt": "^0.8.7",
"browser": "^0.2.6",
"growl": "^1.9.2",
"jade": "^1.11.0",
"jquery": "^3.1.0",
"meteor-node-stubs": "^0.2.1",
"mocha": "^2.4.5",
"moment-timezone": "^0.5.3",
"react": "^15.3.2",
"react-addons-create-fragment": "^15.3.1",
"react-addons-css-transition-group": "^15.3.1",
"react-addons-linked-state-mixin": "^15.3.1",
"react-addons-perf": "^15.3.1",
"react-addons-pure-render-mixin": "^15.3.1",
"react-addons-test-utils": "^15.3.1",
"react-addons-transition-group": "^15.3.1",
"react-addons-update": "^15.3.1",
"react-data-components": "^1.1.0",
"react-dom": "^15.3.1",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"react-select2-wrapper": "^1.0.2",
"react-textarea-autosize": "^4.0.5",
"redux": "^3.6.0",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel": "^6.3.26",
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"css-loader": "^0.23.0",
"eslint": "^2.7.0",
"eslint-config-airbnb": "^6.2.0",
"eslint-plugin-meteor": "^3.4.0",
"eslint-plugin-react": "^4.2.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^0.9.1",
"file-loader": "^0.8.5",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.1",
"redbox-react": "^1.2.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-hot-middleware": "^2.4.1"
}
The package file in the .meteor directory is a follows:
less#2.7.5
tidee-fontello
tidee-asset-loader
tidee-fonts
tidee-css
accounts-password#1.3.0
accounts-base#1.2.11
raix:handlebar-helpers
meteorhacks:zones
random#1.0.10
osv:mongo-counter
reywood:publish-composite
zenniz:jquery-placeholder
tidee-jquery-resize
reactive-var#1.0.10
gwendall:template-animations
meteor-base#1.0.4
mobile-experience#1.0.4
mongo#1.1.12
session#1.1.6
tracker#1.1.0
logging#1.1.15
reload#1.1.10
ejson#1.0.12
spacebars#1.0.12
check#1.2.3
tap:i18n
react-meteor-data
meteorhacks:unblock
dburles:collection-helpers
standard-minifier-css#1.2.0
standard-minifier-js#1.2.0
tomwasd:history-polyfill
blaze-html-templates#1.0.4
es5-shim#4.6.14
practicalmeteor:mocha
ecmascript#0.5.8
react
tidee-data-tables
aldeed:collection2
fongandrew:find-and-modify
jagi:astronomy
jagi:astronomy-validators
mouse0270:bootstrap-notify
gwendall:tapi18n-react
shell-server
tidee-bootstrap-3.3.7
tidee-jquery-ui-1.11.4.custom
There is no indication of which package is causing these warnings to occur. Is there any way to find this out? Alternatively, is there a way to hide this warning from being sent to the browser console?