[Fixed Bug] Array spreading and string interpolation not working correctly

[jonathanprl]

Array Spreading

Current behavior

Vue Code

          <FormGroup
            v-model="filters.subMeterId"
            :options="[
              { label: 'All', value: '' },
              ...(selectedAccount.subMeters || []).map(subMeter => ({ label: subMeter.name, value: subMeter._id }))
            ]"
          />

Compiled Code

_c("FormGroup", {
                    staticClass: "mb-0",
                    attrs: {
                      id: "search",
                      type: "select",
                      options: [
                        {
                          label: "All",
                          value: ""
                        }
                      ].concat(
                        _toConsumableArray(
                          (_vm.selectedAccount.subMeters || []).map(function(
                            subMeter
                          ) {
                            return {
                              label: subMeter.name,
                              value: subMeter._id
                            }
                          })
                        )
                      ),
                      disabled: _vm.loadingAction.getReadings
                    },
                    on: {
                      input: _vm.refresh
                    },
                    model: {
                      value: _vm.filters.subMeterId,
                      callback: function callback($$v) {
                        _vm.$set(_vm.filters, "subMeterId", $$v)
                      },
                      expression: "filters.subMeterId"
                    }
                  })

Error

vue.runtime.esm.js?2b0e:1888 ReferenceError: _toConsumableArray is not defined
    at Proxy.render (AssetAccountReadings.vue?dcaa:201:1)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548:1)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066:1)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479:1)
    at Watcher.run (vue.runtime.esm.js?2b0e:4554:1)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310:1)
    at Array.eval (vue.runtime.esm.js?2b0e:1980:1)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906:1)

Expected behavior

No error and the array should be created as expected.

String interpolation

Current behavior

Vue Code

            <div
              class="d-flex justify-content-center"
              :class="{ [`spinner-${size}`]: size !== 'md', spinner: size === 'md', [`spinner-${variant}`]: variant }"
            ></div>

Compiled Code

        {
          staticClass: "d-flex justify-content-center",
          class:
            ((_class = {}),
            _defineProperty(
              _class,
              "spinner-".concat(_vm.size),
              _vm.size !== "md"
            ),
            _defineProperty(_class, "spinner", _vm.size === "md"),
            _defineProperty(
              _class,
              "spinner-".concat(_vm.variant),
              _vm.variant
            ),
            _class)
        }

Error

vue.runtime.esm.js?2b0e:1888 ReferenceError: _defineProperty is not defined
    at Proxy.render (VM36652 Spinner.vue:17:22)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548:1)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066:1)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479:1)
    at new Watcher (vue.runtime.esm.js?2b0e:4468:1)
    at mountComponent (vue.runtime.esm.js?2b0e:4073:1)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415:1)
    at init (vue.runtime.esm.js?2b0e:3118:1)
    at createComponent (vue.runtime.esm.js?2b0e:5978:1)
    at createElm (vue.runtime.esm.js?2b0e:5925:1)
    at updateChildren (vue.runtime.esm.js?2b0e:6216:1)
    at patchVnode (vue.runtime.esm.js?2b0e:6319:1)
    at updateChildren (vue.runtime.esm.js?2b0e:6193:1)
    at patchVnode (vue.runtime.esm.js?2b0e:6319:1)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6482:1)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948:1)

Expected behavior

No error and the class should have correct keys

Extras

Using the latest version v1.1.3

[JuniorTour]

Thanks for your feedback. But I can't reproduce your error.

Online Demo for issue#36 - stackblitz.com

Do I miss anything?

Could try to re-produce your error by forking the online demo above? So that I can locate your error and fix it ASAP.

• Do you have any special config? like customize assumptions for babel.config.js ？
• What is your babel version?

[martijnhartlief]

We resolved this issue by manually adding @babel/core and babel-loader to the project. Updating other packages never upgraded babel to a high enough version to make array spreading work together with vue-template-babel-compiler.

I haven't pinpointed the exact version but babel core 7.17.9 works.

[JuniorTour]

We resolved this issue by manually adding @babel/core and babel-loader to the project. Updating other packages never upgraded babel to a high enough version to make array spreading work together with vue-template-babel-compiler.

I haven't pinpointed the exact version but babel core 7.17.9 works.

@martijnhartlief Thanks for you feedback.

It sounds like this error has something to do with babel version?

I'm trying to reproduce it.

If anyone can provide a reproduction demo, it will help a lot for fix this issue ASAP.

For example: Online Demo for issue#36 - stackblitz.com

[martijnhartlief]

Sorry I don't have time to pinpoint the exact version but

  "dependencies": {
    "@babel/core": "^7.14.3"
 }

Resolved in 7.14.6 for us, which didn't work.
Maybe if you lock the exact version you can reproduce from which version it works.

[JuniorTour]

I've tried the following @babel/core version, they all works fine without error:

• 7.14.6
• 7.17.9
• 7.11.0
• 7.9.0
• 7.0.0

---

Could you try add these options to your vue.config.js?

module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                options.compilerOptions.babelOptions = {
                    filename: 'AfterVueTemplateBabelCompiler.js',
                    assumptions: {
                        iterableIsArray: true,
                        arrayLikeIsIterable: false,
                    },
                }
                options.compiler = require('vue-template-babel-compiler')
                return options
            })
    }
}

As far as I know, the error above is because babel use helper function in the compile result: _toConsumableArray, _defineProperty

So add these options will let babel know we don't need helper function.

[martijnhartlief]

Installing 1.2 also fixed the issue without the extra vue.config changes