Posted in Uncategorized

optional chaining code makes error in SSR step

   September 16, 2020  2 Comments on 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

  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 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
Full dicussion on github.com

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

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