optional chaining code makes error in SSR step


  • nuxt: v2.13.3
  • node: v14.5.0


codesandbox does not work well 🙁

// index.vue
    <nuxt-link to="/about">about</nuxt-link>
    <div>{{ fullName }}</div>

export default {
  computed: {
    fullName() {
      const a = { name: { firstName: 'Jack', lastName: 'Nam' } };
      const fullName = `${a.name?.firstName} ${a.name?.lastName}`;
      return fullName;
// about.vue
  <nuxt-link to="/">index</nuxt-link>

Steps to reproduce

  1. use create-next-app to create project
  2. create file named index.vue and about.vue in the pages directory
  3. write down code above
  4. run npm run dev in terminal
  5. access

What is Expected?

[Fig. 1]

What is actually happening?

[Fig. 2]

When I access to 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

2 thoughts on “optional chaining code makes error in SSR step

  1. 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.

    1. import @babel/plugin-proposal-optional-chaining plugin
    2. downgrade Node to LTS version