1

I am using babel with nuxt js. However, my project not working in IE11. I think babel not transpile my code properly. When i open the developer console i am facing "SCRIPT1010: Expected identifier errors.

As far as i understand there is a spread operator transpile problem.

This is babel part of my nuxt.config.js:

    babel: {
      babelrc: true,
      configFile: './babel.config.js'
    },
    transpile: ['@nuxtjs/axios', 'bootstrap-vue', 'gsap'],

this .babelrc file:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "> 1%",
            "not op_mini all"
          ],
          "node": "8"
        },
        "modules": false
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": false,
        "regenerator": true,
      }
    ],
    "@babel/plugin-proposal-object-rest-spread"
  ],
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ],
      "plugins": [
        "@babel/plugin-syntax-dynamic-import",
        "dynamic-import-node-babel-7"
      ]
    }
  }
}

and this is babel.config.js file:

module.exports = function (api) {
    api.cache(true);
    return {
        sourceType: 'unambiguous',
        presets: ['@nuxt/babel-preset-app'],
        plugins: ['@babel/plugin-proposal-object-rest-spread']
    };
}

also dependencies:

     @babel/helper-plugin-utils": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
    "@babel/polyfill": "^7.6.0",
    "@vue/cli-plugin-babel": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",

i installed almost everything about babel :(

Please help me...

EDIT:

When i back to the default config settings, there is no variance. Also i added screenshot below.developer console

and details

Ömer Doğan
  • 501
  • 1
  • 6
  • 21
  • 1
    This may help you: https://stackoverflow.com/questions/49649831/reactjs-script1010-expected-identifier-production-build-not-running-on-ie11 – Beniamin H Oct 20 '19 at 10:37
  • @BeniaminH i tried this, i added that meta tag but not helped. – Ömer Doğan Oct 20 '19 at 10:41
  • 1
    why you use all that manual babel config? Nuxt by default will compile to ie9+ level with default babel config – Aldarund Oct 20 '19 at 10:46
  • you say you dont need any babel dependencies or any custom config right? @Aldarund – Ömer Doğan Oct 20 '19 at 11:20
  • i provide a screenshot my problem. – Ömer Doğan Oct 20 '19 at 12:02
  • 1
    yes, remove all your babel stuff from package, config and delete babel.rc – Aldarund Oct 20 '19 at 14:03
  • yes i tried but still not working :( still same error. @Aldarund – Ömer Doğan Oct 20 '19 at 14:11
  • 1
    Than it might be some of your third party libraries taht you are using that isnt ie compatible. Its hard to say. You need to pinpoint where from this code comes – Aldarund Oct 20 '19 at 15:26
  • oh i see, have you any suggestion for detect which package include es6 code in package json? thanks for help. @Aldarund – Ömer Doğan Oct 20 '19 at 18:36
  • I find [a post](https://forum.vuejs.org/t/my-vue-cli-3-app-breaks-in-ie-and-edge/49654/17) and it seems to describe the same issue as yours, you could try the solution in it. Op solved it by [updating all the dependencies](https://forum.vuejs.org/t/my-vue-cli-3-app-breaks-in-ie-and-edge/49654/20). You could also refer to [this thread](https://stackoverflow.com/questions/52452501/how-to-add-a-polyfill-to-nuxt-2-0) about how to add polyfills to nuxt.js. – Yu Zhou Oct 21 '19 at 03:31
  • Yes, i saw this two post and i tried, but no change, i really become blunt. – Ömer Doğan Oct 21 '19 at 07:05
  • It could be better if you provide [a minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) in an online editor so that we can test it on our sides. Besides, you could refer to [this answer](https://stackoverflow.com/questions/49797249/vue-js-issue-with-scoped-slots-and-ie11/49827116#49827116) for more information, it explains the cause of the issue of "Expected identifier". – Yu Zhou Oct 21 '19 at 09:21
  • my project so big, for this reason i cannot give you example. || function(...t){var n=t.pop(); || browser doesnt understrand ...t, i think this is not babel problem. @YuZhou – Ömer Doğan Oct 21 '19 at 10:57
  • Without any example, it's hard to tell where the issue is from. It looks like it should be `t` instead of `...t`. IE seems not transpiling it correctly. I can just give some suggestions that you could find where `...t` generates from and see if you use some ES6 syntax which IE doesn't support. If ES6 syntax is used, you could refer to [this thread](https://stackoverflow.com/questions/52881807/compiling-es6-and-vue-js-not-working-in-ie-11) to configure babel to target ES5 to make it compatible with IE. – Yu Zhou Oct 22 '19 at 02:45
  • @Ömer Doğan I know it's an old post, but from what I see, on your screen shot of the console, it seems to me you are using a built version of your site/app to debug. I would suggest using dev version, because it'll give precise info where the problem might be, for example, you'll see a name of the file (e.g. ```vendors.app.js```) and very important is the code/comments that surround it. This way you will have more clues where to look at, e.g. a certain package might be making trouble, so you go to gihub and search for clues in the ***Issues*** section, and so on. Cheers. – Nikola Jovanovic Mar 31 '20 at 23:54

0 Answers0