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"
},
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.
So i have babel 7 installed, along with the plugin "#babel/plugin-proposal-object-rest-spread" included within my preset-env, however I'm still getting the following error as it hasn't transpiled my spread operators back into es2015.
SCRIPT1028: Expected identifier, string or number
I've tried referencing the plugin in the plugin array within my .babelrc file.
My .babelrc file:
{
"presets": [
"#babel/preset-react",
"#babel/preset-env", {
"include": [
"#babel/plugin-proposal-object-rest-spread"
]
}
],
"plugins": [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-json-strings",
]
}
My package.json dependencies/dev dependencies:
"dependencies": {
"#babel/polyfill": "^7.2.5",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.1.3",
"core-js": "^2.6.3",
"dotenv": "^6.1.0",
"get-base64": "^1.3.0",
"history": "^4.7.2",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"qs": "^6.5.2",
"react": "^16.6.0",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.6.0",
"react-onclickoutside": "^6.7.1",
"react-redux": "^5.1.0",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-select": "^2.1.2",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.5",
"redux-thunk": "^2.3.0",
"svg-url-loader": "^2.3.2",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.1.4"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.3.1",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.0",
"eslint": "^5.8.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"interpolate-html-plugin": "^3.0.0",
"node-sass": "^4.9.4",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglify-es-webpack-plugin": "^0.10.0",
"url-loader": "^1.1.2"
Looks like you're using Webpack, and you have babel-loader installed.
That being the case, here are two quick things to check:
Are you sure you're using that loader in your webpack config for js files?
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
],
Are there any js assets bypassing Webpack, "missing out" on that loader?
(Edit): And if "no" to those, might you also need "#babel/plugin-transform-spread" to capture spreads in an array, since "#babel/plugin-proposal-object-rest-spread" is object-specific?
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
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!