Next.js: How can I make nextjs supported optional chaining?

[kuongknight]

I used nextjs 9.1 and I add custom .babelrc
{ "presets": ["next/babel"], "plugins": [ ["@babel/plugin-proposal-optional-chaining"] ] }
But I found complie issue:
Add @babel/plugin-proposal-nullish-coalescing-operator (https://git.io/vb4Se) to the 'plugins' section of your Babel config to enable transformation.

[ijjk]

Update

It's landed on stable for both JS and TS

Old reply

Hi, I'm not able to reproduce this. Adding @babel/plugin-proposal-optional-chaining to the .babelrc's plugins like above on a minimal Next.js project appears to work fine with Next.js v9.1.1.

I'm going to close this, if you are still having difficulty, it's better to ask questions like this on our Spectrum Thread per our issue template

[aequasi]

This shouldn't be necessary anymore with TS 3.7 and Babel 7.7 anymore, right? Im still getting notices for this.

[iamsteeve]

Using the babel plugin is an option, but in theory it should work with Typescript 3.7.2 but it seems that this feature is taken by the babel compiler. Could someone with more experience explain us? :D o are we wrong with something?

[zen0wu]

Correct me if I'm wrong.

It seems that nextjs is still using babel internally to handle TS->JS. The tsconfig.json is only used for fork-ts-checker-webpack-plugin for type checking, and it doesn't emit any files. Hence a babelrc is needed probably for TS 3.7's new features.

Here's my .babelrc, seems to work fine:

{
  "presets": ["next/babel"],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

[timneutkens]

Update

It's landed on stable for both JS and TS

Old reply

Discussed with @Timer and we can add this by default for TypeScript. For JavaScript it's not in a stable stage yet so it's best to wait on it to be stable.

[rahul3103]

I have added in my project. It's working perfectly. But is this the right way?

yarn add @babel/core babel-eslint @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining -D

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true }],
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

.eslintrc

"parser": "babel-eslint",

[markozxuu]

Using the babel plugin is an option, but in theory it should work with Typescript 3.7.2 but it seems that this feature is taken by the babel compiler. Could someone with more experience explain us? :D o are we wrong with something?

You are correct, the latest version of typescript supports optional-chaining. In theory it is only necessary to use the most recent version to use this feature, the "problem" is that Next.js does not use tsc to transpile typescript. Next is using Babel to transpile TypeScript is the reason why it is not enough to have the latest version : )

If you want to use it you just need to add plugins to your babel configuration 😸

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-proposal-nullish-coalescing-operator"
    ]
}

[timneutkens]

Landed in latest stable Next.js. If you upgrade Next.js you can use it.

[markozxuu]

@timneutkens Thank You for great job !

[JerryGreen]

Should this work out of the box? I have some ?., and it seems it's working perfectly locally, but upon deployment my deployment fails with an error (pointing out to exact place with ?.):

05:50:40.242 | Failed to compile.
05:50:40.242 | ./src/pages/test-blog.tsx:19:11
05:50:40.242 | Type error: Expression expected.

I've just tried the newest stable Next (9.5.1)