Spread operator remains after build causing errors on IE, Edge and mobile

My vue project doesn’t display on IE, Edge (on windows), safari 10 (on IOS) and Chrome (on IOS10). It’s a static website served by amazon S3 through Cloudfront.

I have different error on each browser but they are all related to spread operators.
For exemple:

  • on safari 10 (on IOS) : SyntaxError: Unexpected token ‘…’. Expected a property name.
  • on Edge: “SCRIPT1028: SCRIPT1028: Expected identifier, string or number” or noscript saying that my project need javascript to be enabled (while it is) pointing to some spread operator with /*! no static exports found */ in vendor chunk js file.

First, I had a full manual webpack configuration where I tried everything I found to change how babel transpilled my project.
Then, I restart with a brand new vue-cli project where I cloned and cleaned my src codes. I have the exact same errors.

My thought is it is a problem with babel that is not transpiling everything correctly. So I’ve tried different options as useBuiltIns, added “transform-object-rest-spread”, installed npm-check updates and updates all of my dependencies. I have tested my different combination with .browserslistrc and verify the browsers I was targeting was included with npx browserslist.

babel.config.js

module.exports = {
  presets: [
    ["@vue/app",{useBuiltIns: "entry"}]
  ],
  plugins: ["transform-object-rest-spread"]
}

After three days, I’m stuck… Could you please give me a direction to follow ?
If you want to try and test on your browsers: http://d39u9rklhbavtr.cloudfront.net

Here are my other config files :

Package.json

  "version": "0.2.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-modern": "vue-cli-service build --modern",
    "deploy-pp": "aws s3 sync ./dist s3://talkiteasy-pp",
    "release-pp": "npm run build && npm run deploy-pp"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@fortawesome/fontawesome-free": "^5.9.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",
    "@fortawesome/vue-fontawesome": "^0.1.6",
    "@mdi/font": "^3.6.95",
    "axios": "^0.19.0",
    "connect-history-api-fallback": "^1.6.0",
    "core-js": "^3.1.4",
    "dotenv-flow": "^2.0.0",
    "express": "^4.17.1",
    "express-history-api-fallback": "^2.2.1",
    "i": "^0.3.6",
    "image-upload": "0.0.3",
    "lodash": "^4.17.11",
    "npm": "^6.9.0",
    "nprogress": "^0.2.0",
    "scroll-to-element": "^2.0.3",
    "vue": "^2.6.10",
    "vue-audio-native": "^0.1.21",
    "vue-audio-visual": "^1.3.0",
    "vue-router": "^3.0.6",
    "vue-flag-icon": "^1.0.6",
    "vue-i18n": "^8.11.2",
    "vue-material-design-icons": "^3.2.0",
    "vue-sidebar-menu": "^3.9.1",
    "vue-slick": "^1.1.15",
    "vue-trix": "^0.8.4",
    "vue-video-player": "^5.0.2",
    "vuelidate": "^0.7.4",
    "vuetify": "^1.5.14",
    "vuex": "^3.1.1",
    "vuex-persistedstate": "^2.5.4",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "~7.4",
    "@babel/plugin-proposal-decorators": "~7.4",
    "@babel/plugin-proposal-json-strings": "~7.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-syntax-import-meta": "~7.2",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-flow": "^7.0.0",
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.4",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "compression-webpack-plugin": "^3.0.0",
    "cross-env": "^5.2.0",
    "css-loader": "^3.0.0",
    "dotenv-flow-webpack": "0.1.0-beta.3",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-html": "^5.0.5",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "file-loader": "^4.0.0",
    "friendly-errors-webpack-plugin": "~1.7",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "joi-browser": "^13.4.0",
    "jquery": "^3.4.1",
    "material-design-icons-iconfont": "^5.0.1",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "serve-static": "^1.14.1",
    "terser-webpack-plugin": "^1.3.0",
    "url-loader": "^2.0.0",
    "vue-hot-reload-api": "^2.3.3",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "~4.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.34.0",
    "webpack-bundle-analyzer": "~3.3",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.2",
    "webpack-hot-middleware": "~2.25",
    "webpack-merge": "^4.2.1"
  }

vue.config.js

module.exports = {
    css: {
      loaderOptions: {
        sass: {
          data: `
            @import "@/scss/main.scss";
          `
        }
      }
    }
  };

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

.browserslistrc

> 0.5%
last 3 versions
safari 10
not dead

When you restarted using Vue CLI from scratch did you start by using the default package.json? I notice you have a number of extra dependencies which I believe you shouldn’t need as Vue uses babel-preset-env which should do the heavy lifting for you. https://cli.vuejs.org/config/#babel

1 Like

Thank you @JamesThomson !

I cleaned (a lot) my dependencies and now I have this message on safari for mobile (that I had on Edge before):

vue: /*!******************************************************************************!*\
  !*** external {"commonjs":"vue","commonjs2":"vue","amd":"vue","root":"Vue"} ***!
  \******************************************************************************/
                /*! no static exports found */ 

With an error message: Unexpected token ‘…’. Expected a property name.

I tried this solution: https://github.com/vuejs/vue-cli/issues/4084 but it gave me errors.

What is the problem ? Vue is not built ?

Hmm, I’m not familiar with the error, but it sounds like it can’t find some of the builds for Vue. I think this is more of a warning and possibly not related to the Safari error.

Again, if you have any configurations that aren’t the default, I’d try returning to the default. e.g. I notice you have safari 10 in your .browserslistrc, try removing that.

I was getting the SCRIPT1028 error on Edge with an existing ASP.Net project. Since re-creating everything using the vue-cli was a no-go, I found out adding the following to my vue.config.js file did it:

module.exports = {
"transpileDependencies": [   <== THIS OPTION
    "vuetify"                            <== THIS OPTION
],