Nuxt 2.12.2 throw error on build when trying to use object?.key
.
Module parse failed: Unexpected token (311:25) friendly-errors 10:36:40
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
So it because babel
in Nuxt configured to support older browsers like IE9
that I did not need in my project.
In another project, I just put .bablelrc
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 Chrome versions"]
}
}]
]
}
but in Nuxt .bablelrc
are disabled. so how can I make optional chaining operator
work?
by telling Nuxt to support just modern browsers. or added the @babel/plugin-proposal-optional-chaining
As Nuxtjs Doc describe, .babelrc
is ignored by default.
I solved this question by the below config.
// in nuxt.config.js
{
// ...
build: {
// ....
babel: {
plugins: [
'@babel/plugin-proposal-optional-chaining'
]
}
}
}
Of course, before that, you should install @babel/plugin-proposal-optional-chaining
npm i -D @babel/plugin-proposal-optional-chaining
I hope it helps you.
Try vue-template-babel-compiler
It uses Babel
to enable Optional Chaining(?.)
, Nullish Coalescing(??)
and many new ES syntax for Vue.js SFC
.
npm install vue-template-babel-compiler --save-dev
// nuxt.config.js
export default {
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
loaders: {
vue: {
compiler: require('vue-template-babel-compiler')
}
},
},
// ...
}
Please refer to REAMDE for detail usage
Support for Vue-CLI, Nuxt.js, Webpack
, any environment use vue-loader v15+
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.