Nuxt.js: optional chaining code makes error in SSR step

Created on 16 Jul 2020 · 17Comments · Source: nuxt/nuxt.js

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.vue and about.vue in the pages directory
write down code above
run npm run dev in 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

bug-report

Source

njh7799

Most helpful comment

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.

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

njh7799 on 28 Jul 2020

👍5 ❤1 🎉1

All 17 comments

~~You use optional chaining in your components that does not support by default, In order to use optional chaining you should use @babel/plugin-proposal-optional-chaining~~
~~Install @babel/plugin-proposal-optional-chaining and add in your nuxt.config.js~~

...
  build: {
    babel: {
      plugins: [
        '@babel/plugin-proposal-optional-chaining'
      ]
    }
  },
...

P.S. as Dmitry says in blew commend It should work without additional library.

farnabaz on 21 Jul 2020

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

aldarund on 21 Jul 2020

👍3

There are two solutions.

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

njh7799 on 28 Jul 2020

👍5 ❤1 🎉1

This 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

rchl on 14 Oct 2020

👍4

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? :)

patzick on 14 Oct 2020

👍1

@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

pi0 on 14 Oct 2020

❤3

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

Verify that you can still reproduce the issue in the latest version of nuxt-edge
Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.