Upgrading Webpack from 2.7 to 4.35 blank page IE11 - vuejs2

I'm working on a project where I want to update the Webpack 2.7 config to the newer 4.35 for optimization and cleaning purpose.
I rebuild from scratch my configuration, works on every browser (Firefox, Chrome, Edge) but not IE11.
No error in the console, a blank page.
I'm using SASS, SCSS, CSS, JS and Vue
I tried to use the previous configuration but I have to update to many things and I failed to compile in the end.
I try not to upgrade every package but only Webpack and the ones that needed to upgrade for compatibility purpose.
I also already tried Vue-CLI as it's a Vue project, but same issue. I needed to rewrite every predefined configuration to work for my project...
Previous package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
"dependencies": {
"#mdi/font": "^3.2.89",
"#progress/kendo-dateinputs-vue-wrapper": "^2018.3.1025",
"#progress/kendo-inputs-vue-wrapper": "^2018.3.1025",
"#progress/kendo-popups-vue-wrapper": "^2018.3.1025",
"#progress/kendo-theme-bootstrap": "^2.18.0",
"#progress/kendo-ui": "^2018.3.1219",
"#progress/kendo-validator-vue-wrapper": "^2018.3.1025",
"animate.css": "^3.5.2",
"axios": "^0.18.0",
"axios-retry": "^3.1.2",
"babel-polyfill": "^6.26.0",
"block-ui": "^2.70.1",
"bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.21",
"chart.piecelabel.js": "^0.11.0",
"country-region-data": "^1.4.5",
"emitter-io": "^1.25.0",
"es6-promise": "^4.2.4",
"fast-json-patch": "^2.0.6",
"font-awesome": "^4.7.0",
"fs": "0.0.1-security",
"inputmask": "^4.0.0",
"intersection-observer": "^0.5.0",
"jquery": "^3.2.1",
"jsplumb": "^2.8.8",
"lodash": "^4.17.11",
"moment-timezone": "^0.5.20",
"oidc-client": "^1.6.1",
"progress-tracker": "^1.4.0",
"rgbcolor": "^1.0.1",
"stackblur": "^1.0.0",
"svg.js": "^2.6.5",
"uuid": "^3.3.2",
"vee-validate": "^2.2.8",
"vue": "^2.6.8",
"vue-axios": "^2.1.4",
"vue-chartjs": "^3.3.2",
"vue-clickaway": "^2.2.2",
"vue-cropperjs": "^2.2.2",
"vue-i18n": "^7.8.1",
"vue-js-toggle-button": "^1.3.2",
"vue-loading": "^0.1.4",
"vue-lodash": "^2.0.0",
"vue-multiselect": "^2.1.6",
"vue-observe-visibility": "^0.4.3",
"vue-router": "^3.0.1",
"vue-session": "^1.0.0",
"vue-swatches": "^1.0.3",
"vue-tippy": "^2.1.0",
"vue2-dropzone": "^3.5.2",
"vuedraggable": "^2.16.0",
"vuejs-datepicker": "git+https://github.com/brurubio/vuejs-datepicker.git#build",
"vuejs-jwt": "^1.1.0",
"vuex": "^3.0.1",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"autoprefixer": "^7.2.6",
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.4.1",
"connect-history-api-fallback": "^1.5.0",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^2.3.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^2.0.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.19.1",
"node-sass": "^4.11.0",
"opn": "^5.3.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.4.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.7",
"sass-resources-loader": "^1.3.3",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.1",
"vue-loader": "^13.7.1",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.6.8",
"webpack": "^2.7.0",
"webpack-bundle-analyzer": "^2.11.3",
"webpack-dev-middleware": "^1.12.2",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.2"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
New package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"private": true,
"scripts": {
"dev": "node --max_old_space_size=8192 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config webpack.dev.js --open --display-error-details",
"start": "node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js build/dev-server.js",
"build": "webpack --config webpack.prod.js --mode production",
"lint": "eslint --fix --ext .js,.vue src"
},
"dependencies": {
"#mdi/font": "^3.2.89",
"#progress/kendo-dateinputs-vue-wrapper": "^2018.3.1025",
"#progress/kendo-inputs-vue-wrapper": "^2018.3.1025",
"#progress/kendo-popups-vue-wrapper": "^2018.3.1025",
"#progress/kendo-theme-bootstrap": "^2.18.0",
"#progress/kendo-ui": "^2018.3.1219",
"#progress/kendo-validator-vue-wrapper": "^2018.3.1025",
"animate.css": "^3.5.2",
"axios": "^0.18.0",
"axios-retry": "^3.1.2",
"babel-polyfill": "^6.26.0",
"block-ui": "^2.70.1",
"bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.21",
"chart.piecelabel.js": "^0.11.0",
"country-region-data": "^1.4.5",
"emitter-io": "^1.25.0",
"es6-promise": "^4.2.4",
"fast-json-patch": "^2.0.6",
"font-awesome": "^4.7.0",
"inputmask": "^4.0.0",
"intersection-observer": "^0.5.0",
"jquery": "^3.2.1",
"jsplumb": "^2.8.8",
"lodash": "^4.17.11",
"moment-timezone": "^0.5.20",
"oidc-client": "^1.6.1",
"progress-tracker": "^1.4.0",
"regenerator-runtime": "^0.13.2",
"svg.js": "^2.6.5",
"uuid": "^3.3.2",
"vee-validate": "^2.2.8",
"vue": "^2.6.8",
"vue-axios": "^2.1.4",
"vue-chartjs": "^3.3.2",
"vue-clickaway": "^2.2.2",
"vue-cropperjs": "^2.2.2",
"vue-i18n": "^7.8.1",
"vue-js-toggle-button": "^1.3.2",
"vue-loading": "^0.1.4",
"vue-lodash": "^2.0.0",
"vue-multiselect": "^2.1.6",
"vue-observe-visibility": "^0.4.3",
"vue-router": "^3.0.1",
"vue-session": "^1.0.0",
"vue-swatches": "^1.0.3",
"vue-tippy": "^2.1.0",
"vue2-dropzone": "^3.5.2",
"vuedraggable": "^2.16.0",
"vuejs-datepicker": "git+https://github.com/brurubio/vuejs-datepicker.git#build",
"vuejs-jwt": "^1.1.0",
"vuex": "^3.0.1",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"autoprefixer": "^7.2.6",
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.4.1",
"clean-webpack-plugin": "^3.0.0",
"connect-history-api-fallback": "^1.5.0",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^2.2.1",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^2.3.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^2.0.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"http-proxy-middleware": "^0.19.1",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.11.0",
"opn": "^5.3.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.4.0",
"postcss-loader": "^3.0.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.7",
"sass-resources-loader": "^1.3.5",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"style-loader": "^0.23.1",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.1",
"vue-loader": "^15.7.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.6.8",
"webpack": "^4.35.3",
"webpack-bundle-analyzer": "^2.11.3",
"webpack-cli": "^3.3.5",
"webpack-dev-middleware": "^1.12.2",
"webpack-dev-server": "^3.7.2",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.2"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I want to have some error or something to tell me that it's the use of a particular library or something, I'm desesperate...
Thanks for the help !

I solved it !
Was a babel not configured properly! Now it works !
Strange enough I had to force transpile another npm package...

Related

Either Build or Serve gets error according to different vue-loader version

My vue#2 project has a vue-loader dependency of 15.7.1 and npm run dev serve the purpose. To deploy the project I run npm run build command and get's the following error:
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
However, I changed the vue-loader to an older version of 14.2.2 and build the project again that beautifully worked. Now when I want to serve the project in development mode with the command npm run dev it gets an error:
Cannot find module 'vue-loader/lib/plugin'. requireStack: 'C:\\client\\build\\webpack.dev.conf.js', ..
I need a vue-loader version that will fullfill the both purpose at a time. Here is my package.json:
{
"name": "client",
"version": "1.0.0",
"description": "A Vue.js project",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"file-saver": "^2.0.2",
"form-data": "^2.5.1",
"generate-password": "^1.4.2",
"izitoast": "^1.4.0",
"jimp": "^0.6.8",
"js-cookie": "^2.2.0",
"lodash": "^4.17.15",
"mdi": "^2.2.43",
"moment": "^2.24.0",
"nprogress": "^0.2.0",
"pdfjs": "^2.3.1",
"pdfjs-dist": "^2.1.266",
"pdfmake": "^0.1.60",
"sweetalert2": "^8.13.5",
"vue": "^2.5.2",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-flag-icon": "^1.0.6",
"vue-i18n": "^8.12.0",
"vue-number-animation": "^1.1.2",
"vue-offline": "^2.0.8",
"vue-router": "^3.0.7",
"vue-loader": "^14.2.2",
"vuetify": "^2.0.4",
"vuetify-datetime-picker": "^2.0.3",
"vuex": "^3.1.1",
"vuex-persistedstate": "^2.5.4",
"vuex-router-sync": "^5.0.0",
"xlsx": "^0.15.1"
},
"devDependencies": {
"#mdi/font": "^3.7.95",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"material-design-icons-iconfont": "^5.0.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

Vue Cli Error: Rule can only have one resource source (provided resource and test + include + exclude)

Npm run serve is not working after I freshly installed npm in the project folder. I am using the latest webpack. Also tried uninstalling and installing npm gloabally. Though this was running before npm install. Nothing has changes in package.json since begining. I don't have idea whats going wrong here. Gives error below
at checkResourceSource (E:\projects\project-emr\emr\node_modules#vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
{
"dependencies": {
"#fortawesome/fontawesome-free": "^5.11.2",
"#toast-ui/vue-calendar": "^1.1.1",
"animate.css": "^3.7.2",
"auth0-js": "^9.12.2",
"autoprefixer": "latest",
"axios": "^0.19.2",
"bootstrap-vue": "^2.1.0",
"cache-loader": "^4.1.0",
"classnames": "2.2.6",
"core-js": "^3.3.2",
"css-loader": "^3.2.0",
"highcharts": "^8.0.0",
"highcharts-vue": "^1.3.5",
"instantsearch.css": "^7.3.1",
"instantsearch.js": "^3.6.0",
"jquery": "^3.4.1",
"js-cookie": "^2.2.1",
"lodash": "latest",
"lottie-web": "^5.5.10",
"material-design-icons-iconfont": "^6.1.0",
"moment": "^2.24.0",
"node-snackbar": "^0.1.16",
"postcss-loader": "^3.0.0",
"ramda": "^0.26.1",
"register-service-worker": "^1.6.2",
"smooth-scrollbar": "^8.5.1",
"swiper": "^5.3.0",
"url-loader": "^3.0.0",
"vee-validate": "^3.2.2",
"vue": "^2.6.10",
"vue-class-component": "^7.2.3",
"vue-file-agent": "^1.7.3",
"vue-flatpickr-component": "^8.1.5",
"vue-form-wizard": "^0.8.4",
"vue-i18n": "^8.15.3",
"vue-instantsearch": "^2.6.0",
"vue-morris": "^1.1.0",
"vue-photo-grid": "^1.0.2",
"vue-property-decorator": "^8.3.0",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.3",
"vue-select": "^3.4.0",
"vue-slick": "^1.1.15",
"vue-slider-component": "3.0.32",
"vuedraggable": "^2.23.2",
"vuefire": "^2.2.1",
"vuetify": "^2.3.10",
"vuex": "^3.0.1",
"webpack": "latest",
"wowjs": "^1.1.3"
},
"devDependencies": {
"#babel/polyfill": "^7.7.0",
"#fullcalendar/list": "^4.3.0",
"#mdi/font": "^5.6.55",
"#vue/cli-plugin-babel": "~4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-plugin-pwa": "^4.1.2",
"#vue/cli-plugin-router": "^4.1.0",
"#vue/cli-plugin-vuex": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.3",
"bootstrap": "^4.3.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"lint-staged": "^9.5.0",
"mutationobserver-shim": "^0.3.3",
"node-sass": "^4.13.1",
"popper.js": "^1.16.0",
"portal-vue": "^2.1.6",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-bootstrap-vue": "^0.6.0",
"vue-cli-plugin-i18n": "~0.6.1",
"vue-clipboard2": "^0.3.1",
"vue-loader": "^15.7.2",
"vue-template-compiler": "^2.6.10"
}

Vue project "npm run dev" results in "This site cannot be reached error"

When I run "npm run dev" for my Vue project it says it compiled correctly but 0.0.0.0:8080 says "This site can't be reached". I have also tried localhost:8080 and gotten the same result.
I don't know if this matters, but the current version of vue on my computer is version 3.11.0
How do I fix this?
Thanks!
Edit: Here is my package.json file
{
"name": "a-site",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "An Author",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.18.1",
"es6-promise": "^4.2.4",
"gsap": "^2.0.0",
"hammerjs": "^2.0.8",
"numeral": "^2.0.6",
"prejs": "^1.2.6",
"v-money": "^0.8.1",
"vee-validate": "^2.0.9",
"vue": "^2.6.6",
"vue-router": "^3.0.1",
"vue-scroll-stop": "^0.1.5",
"vue-youtube-embed": "^2.2.1",
"vue2-filters": "^0.3.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^8.5.1",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"node-sass": "^4.9.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.0.1",
"sass-resources-loader": "^1.3.3",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "1.0.1",
"vue-loader": "^13.7.3",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.11.5",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

How to use HAML inside a .vue file in vue 3-rc.3

I am trying to use HAML inside the .vuefile in the vue version 3 but it is not working.
What I did.
Intall vue cli version 3.0.0-rc.3
Created a new project with:
My package is:
{
"name": "project 3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"haml": "^0.4.3",
"haml-haml-loader": "^1.0.1",
"hamljs": "^0.6.2",
"register-service-worker": "^1.0.0",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-beta.15",
"#vue/cli-plugin-eslint": "^3.0.0-beta.15",
"#vue/cli-plugin-pwa": "^3.0.0-beta.15",
"#vue/cli-plugin-unit-mocha": "^3.0.0-beta.15",
"#vue/cli-service": "^3.0.0-beta.15",
"#vue/test-utils": "^1.0.0-beta.16",
"chai": "^4.1.2",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.5.16"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
In the old vue cli version 2 with pwa template it worked fine, my package.json for the one that works:
{
"name": "project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Ruan Carlos <ruanltbg#gmail.com>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"haml": "^0.4.3",
"haml-haml-loader": "^1.0.1",
"hamljs": "^0.6.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-core": "^6.26.0",
"sw-precache-webpack-plugin": "^0.11.4",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^2.1.0",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.1.1",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"eslint": "^4.9.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-config-airbnb-base": "^11.1.3",
"eslint-import-resolver-webpack": "^0.8.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.5",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"webpack-bundle-analyzer": "^2.9.0",
"cross-env": "^5.0.5",
"karma": "^1.7.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5",
"mocha": "^4.0.1",
"chai": "^4.1.2",
"sinon": "^4.0.1",
"sinon-chai": "^2.14.0",
"inject-loader": "^3.0.1",
"babel-plugin-istanbul": "^4.1.5",
"phantomjs-prebuilt": "^2.1.15",
"chromedriver": "^2.33.1",
"cross-spawn": "^5.1.0",
"nightwatch": "^0.9.16",
"selenium-server": "^3.6.0",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.3.0",
"rimraf": "^2.6.2",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.7.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0",
"uglify-es": "^3.1.3"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Does anybody has any clue?

React native exception: syntax error when running on iphone 7 plus

I am getting a syntax error when running my react native app on iOS 10.2 iPhone 7 Plus simulator and iPhone 7 Plus physical device but not on iPhone 7. I have to idea where to begin looking for problem.
Here is my package.json file.
{
"name": "NativeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "webpack-dev-server --progress --colors --hot --inline --host 0.0.0.0 --port 3000",
"test": "jest",
"build": "webpack -p"
},
"rnpm": {
"assets": [
"fonts"
]
},
"jest": {
"preset": "jest-react-native",
"globals": {
"__DEV__": true
}
},
"dependencies": {
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-jest": "^18.0.0",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-react-native": "^1.9.1",
"babel-preset-stage-2": "^6.22.0",
"classnames": "^2.2.5",
"crypto-js": "^3.1.9-1",
"css-loader": "^0.26.1",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.10.0",
"firebase": "^3.6.8",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^2.28.0",
"jest": "^18.0.0",
"jest-react-native": "^18.0.0",
"json-loader": "^0.5.4",
"moment": "^2.17.1",
"postcss": "^5.2.11",
"postcss-cssnext": "^2.9.0",
"postcss-import": "^9.0.0",
"postcss-loader": "^1.2.1",
"react": "^15.4.2",
"react-addons-css-transition-group": "^15.4.1",
"react-dom": "^15.4.1",
"react-native": "^0.41.1",
"react-native-calendar": "^0.10.0",
"react-native-calendar-picker": "^3.0.0",,
"react-native-cli": "^2.0.1",
"react-native-fbsdk": "^0.5.0",
"react-native-google-places-autocomplete": "^1.2.7",
"react-native-sglistview": "^0.3.2",
"react-native-swipeout": "git+https://github.com/magrinj/react-native-swipeout.git",
"react-native-vector-icons": "^4.0.0",
"react-native-video": "1.0.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-test-renderer": "^15.4.1",
"redux": "^3.6.0",
"redux-logger": "^2.8.1",
"redux-mock-store": "^1.2.2",
"redux-thunk": "^2.2.0",
"reselect": "^2.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"devDependencies": {
"extract-text-webpack-plugin": "^2.0.0-rc.3"
}
}