nuxt: optional chaining code makes error in SSR step
Versions
- nuxt: v2.13.3
- node: v14.5.0
Reproduction
codesandbox does not work well 😦
// index.vue
<template>
<div>
<nuxt-link to="/about">about</nuxt-link>
<div>{{ fullName }}</div>
</div>
</template>
<script>
export default {
computed: {
fullName() {
const a = { name: { firstName: 'Jack', lastName: 'Nam' } };
const fullName = `${a.name?.firstName} ${a.name?.lastName}`;
return fullName;
},
},
};
</script>
// about.vue
<template>
<nuxt-link to="/">index</nuxt-link>
</template>
Steps to reproduce
- use create-next-app to create project
- create file named
index.vueandabout.vuein the pages directory - write down code above
- run
npm run devin terminal - access
127.0.0.1:3000
What is Expected?
[Fig. 1]
What is actually happening?
[Fig. 2]
When I access to 127.0.0.1:3000 by SSR (entering address directly), the error page(Fig. 2) came out. However when I access by CSR, the right page(Fig. 1) came out.
I think babel does not work properly in SSR.
+ when I ran npm run build command, similar error came out in terminal
ERROR in ./pages/index.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=script&lang=js&) 26:33
Module parse failed: Unexpected token (26:33)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/@nuxt/components/dist/loader.js
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| }
| };
> const fullName = `${a.name?.firstName} ${a.name?.lastName}`;
| return fullName;
| }
@ ./pages/index.vue?vue&type=script&lang=js& 1:0-227 1:243-246 1:248-472 1:248-472
@ ./pages/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/server.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 18 (5 by maintainers)
The problem was the webpack. Since webpack4 does not understand optional-chaing, babel should transpile it. However the default setting of babel-preset-app in server is
server: { node: 'current' }and Node 14 understands optional-chaining. So, babel did not transplie optional-chaing code. Then, webpack threw error since it can not understand optional chaining.There are two solutions.
@babel/plugin-proposal-optional-chainingpluginThis should be IMO re-opened and fixed in Nuxt. It works with Node <14 so it’s a matter of tweaking the babel preset to enable it for Node 14 also.
@pi0
Hi @msmsimondean , from your error log
{{ hello.world?.greeting }}, it looks you’re usingOptional chainingintemplate, this is not related to babel config which works forscriptof vue file.From this vue issue, I think vue 2 doesn’t support
Optional chainingintemplatetag yet.it should ( and it work) out of box https://codesandbox.io/s/dreamy-burnell-vtgul?file=/pages/index.vue
Maybe you have some messed up deps e.g. old babel preset which isn’t including this. Try to delete your lock file and node modules and reinstall
@patzick Indeed that’s one of alternatives to use a fixed target for babel preset. Also thanks for reminding about nullish plugin. We will discuss about it with @clarkdo
That’s great. Thanks for the info @danielroe. Not sure how I missed that.
This appears to no longer be an issue, with the exception of the Vue issue linked by @clarkdo which is not related to Nuxt.
Example reproduction - with working out-of-the-box optional chaining and nullish coalescing: https://codesandbox.io/s/stupefied-hill-bz9qp?file=/pages/index.vue
hey @pi0 I’ve seen you took care of that. I think the same is to Nullish coalescing etc. Would be great if ES2020 would be enabled by default. How do you see that? 😃