I am using Vue CLI version 3 to run a Vue application inside a Docker container. To start the development server, I run:
https://cli.vuejs.org/guide/cli-service.html
This gives the following error:
ERROR Failed to compile with 1 errors 17:05:14
error in ./app/main.js
Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js):
Error: .plugins[0] may only be a two-tuple or three-tuple
at assertPluginItem (/home/src/node_modules/@babel/core/lib/config/validation/option-assertions.js:235:13)
at arr.forEach (/home/src/node_modules/@babel/core/lib/config/validation/option-assertions.js:222:30)
at Array.forEach (<anonymous>)
at assertPluginList (/home/src/node_modules/@babel/core/lib/config/validation/option-assertions.js:222:9)
at Object.keys.forEach.key (/home/src/node_modules/@babel/core/lib/config/validation/options.js:107:5)
at Array.forEach (<anonymous>)
at validateNested (/home/src/node_modules/@babel/core/lib/config/validation/options.js:83:21)
at validate (/home/src/node_modules/@babel/core/lib/config/validation/options.js:74:10)
at file (/home/src/node_modules/@babel/core/lib/config/config-chain.js:174:34)
at cachedFunction (/home/src/node_modules/@babel/core/lib/config/caching.js:33:19)
at buildRootChain (/home/src/node_modules/@babel/core/lib/config/config-chain.js:120:36)
at loadPrivatePartialConfig (/home/src/node_modules/@babel/core/lib/config/partial.js:85:55)
at Object.loadPartialConfig (/home/src/node_modules/@babel/core/lib/config/partial.js:110:18)
at Object.<anonymous> (/home/src/node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js:140:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (/home/src/node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js:3:103)
@ multi (webpack)-dev-server/client/index.js ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./app/main.js
I suspect that the offending code is the following, in my .babelrc
file:
"plugins": [
["transform-runtime", "transform-vue-jsx", "transform-regenerator", {
"polyfill": false,
"regenerator": true
}]
Could someone suggest how I could go about resolving this? Thanks!
Solution
Your [
is in the wrong place. It should be
"plugins": [
"transform-runtime",
"transform-vue-jsx",
["transform-regenerator", {
"polyfill": false,
"regenerator": true
}]
]