NuxtJS with Babel 7: still have spread operator in built files

Question

I'm desperately trying to make my NuxtJS app work with IE11. I implemented babel config in many ways to build a compatible version but I still have spread operators in built pages files, as if Babel didn't transform Nuxt code.

Here is my config:

nuxt.config.js

const pkg = require('./package')
const path = require('path');

module.exports = {
  mode: 'universal',

  // ...

  build: {
    babel: {
      babelrc: true
    },
    extend(config, ctx) {
      config.resolve.modules.push(path.resolve(__dirname, 'assets'));

      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));

      svgRule.test = /\.(png|jpe?g|gif|webp)$/;

      config.module.rules.push({
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      }, {
        test: /\.js$/,
        loader: 'babel-loader'
      })
    }
  }
}

.babelrc

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    "@babel/transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-spread",
    "@babel/plugin-proposal-object-rest-spread"
  ],
  "env": {
    "test": {
      "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
    }
  }
}

.browserslistrc

# Browsers that we support

>0.2%
not dead
not ie < 11
not op_mini all

Despite that config, I still see some spread operators used in Nuxt built pages, like the following generated by nuxt:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["pages/events/_slug.pages/index"],{

/***/ "./assets/svg/events/market.svg":
/*!**************************************!*\
  !*** ./assets/svg/events/market.svg ***!
  \**************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);

      /* harmony default export */ __webpack_exports__["default"] = ({
        functional: true,
        render(_h, _vm) {
          const { _c, _v, data, children = [] } = _vm;

          const {
            class: classNames,
            staticClass,
            style,
            staticStyle,
            attrs = {},
            ...rest
          } = data;

I searched from some time across different issues about NuxtJS and Babel, but Nuxt claims that it works with IE9 without extra Babel configuration, which is not the case here. I'd like to understand why the code is not transpiled the right way.

Answer 1

I ran into a similar issue: A Nuxt app wouldn't work in the Edge browser because of spread operators in @nuxtjs/axios and bootstrap-vue. I did find a solution.

The build property in nuxt.config.js should be defined as follows:

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

The transpile property is key here. Internally, Nuxt defines an exclude for babel-loader that ignores everything in node_modules, unless it's in transpile.

Using babel.config.js also appears to matter, and the official Babel documentation says you should use it if you want to process node_modules.

babel.config.js:

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

You don't need include or exclude here, as it's taken care of by Nuxt, as noted.