TypeScript 3.7.x: Optional chaining and nullish coalescing is broken

The latest version of TypeScript (3.7.x) is broken if using optional chaining and nullish coalescing. It fails with the following error:

SyntaxError: /path/to/file.ts: Support for the experimental syntax 'optionalChaining' isn't currently enabled

...

Add @babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) to the 'plugins' section of your Babel config to enable transformation.

The simple fix (I think) is to update the TypeScript dependency in microbundle. However... my preference would be for microbundle to detect if I have another version of TypeScript already registered in my package.json and use that version as the default (falling back to the included dependency if required).

I spoke too soon. After digging a little deeper, it seems the issue is actually related to TypeScript emitting optional chaining and nullish coalescing without transpilation with esnext... Until the babel plugin above is added to microbundle, is there a local workaround I can use? It doesn't appear that I can extend the babel config...

I updated the title to reflect this new information.

to detect if I have another version of TypeScript already registered in my

Microbundle doesn't do anything special, it uses the typescript plugin which is responsible for handling that.

is there a local workaround I can use?

~~I guess switch the esnext? I'm not sure.~~ But yea, the thing is that it's forced here.

And Babel is forced with babelrc: false, so... nope, no workaround.

You can add a custom babelrc (the first babel plugin is for constants)

I figured out from reading the source that a custom babelrc is fully supported in the next version. I think this can be closed now... though I wonder, is it out of scope for microbundle to allow TypeScript to handle all transpiling? My overall preference would be for microbundle to respect the value of target in my tsconfig.json... is there a reason why that is not the case?

@developit

I came to the same conclusion. Shame, it was my first shot on this lib. It's a pity it does not merge babel settings or at least, allow you to customize it or append plugins. Anyway, this should be a top priority because as for today, the statement: Typescript supported, it's not true. Will keep an eye here for the fix. And if the fix is already there in the new version, why not publish it? @developit

@smithki

@smithki I'd assume you already are on the next version, because we didn't have babel in 0.11.0

It should work if you add a .babelrc to your project with this content (and install the package)

{
	"plugins": [
		[
			"@babel/plugin-proposal-optional-chaining"
		]
	]
}

@ForsakenHarmony

@ForsakenHarmony yeah, I've managed to get what I need in microbundle@next, but unfortunately for the use-case I'm after, the rest of my team is wary of pre-release NPM packages. When will 0.12.x be released mainstream? It would be a lifesaver.

adding .babelrc does not work for me(with the plugin installed of course), using microbundle@next solves the issue

I mentioned that in my commment

@smithki

@smithki I'd assume you already are on the next version, because we didn't have babel in 0.11.0

It should work if you add a .babelrc to your project with this content (and install the package)
{
	"plugins": [
		[
			"@babel/plugin-proposal-optional-chaining"
		]
	]
}

Doing the above worked for me in the newly released v0.12.0.

fix(build): add babel plugin to fix microbundle 0.12 build error

This bug haven't been fixed in version 0.12.2, and a new error is thrown out:

(terser plugin) SyntaxError: Unexpected token: punc (.)

Just leaving this here in case some of you have issues with the compression of typescript.

Add the nessesary scripts to the package.json file

"scripts": {
  "dev": "microbundle",
  "prod": "microbundle --compress",
  "watch": "microbundle watch"
},

Install the following packages babel packages and add them to the .babelrc file in the root of your project:

{
  "plugins": [
    "@babel/plugin-transform-typescript",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

@ConsoleTVs

@ConsoleTVs I got a new error

(babel plugin) Error: .plugins[0][1] must be an object, false, or undefined

with configuration of

{
    "plugins": [
        [
            "@babel/plugin-transform-typescript",
            "@babel/plugin-proposal-optional-chaining"
        ]
    ]
}

My example is located here: https://github.com/Chartisan/Chartjs

inside the .babelrc file.

@TechQuery

@TechQuery you have an error in the config, it should be:

{
  "plugins": [
    "@babel/plugin-transform-typescript",
    "@babel/plugin-proposal-optional-chaining"    
  ]
}

or

{
  "plugins": [
    ["@babel/plugin-transform-typescript"],
    ["@babel/plugin-proposal-optional-chaining]"    
  ]
}

@lukas-valenta

This bug haven't been fixed in version 0.12.2, and a new error is thrown out:

(terser plugin) SyntaxError: Unexpected token: punc (.)

@lukas-valenta I sorry for one more [ ], but the following configuration gets the same error like before:

{
    "plugins": [
        "@babel/plugin-transform-typescript",
        "@babel/plugin-proposal-optional-chaining"
    ]
}

dude I commented here for a reason. You need those 4:

"@babel/plugin-transform-typescript",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-object-rest-spread"

@ConsoleTVs

@ConsoleTVs I find the reason isn't the 2 more plugins, just because microbundle don't process TypeScript files in node_modules, so we need set them into --external.

@smithki

@smithki I'd assume you already are on the next version, because we didn't have babel in 0.11.0
It should work if you add a .babelrc to your project with this content (and install the package)
{
	"plugins": [
		[
			"@babel/plugin-proposal-optional-chaining"
		]
	]
}
Doing the above worked for me in the newly released v0.12.0.

I am running Microbundle v0.12.3 and this solution worked for me.

Navigation Menu

Repository navigation

TypeScript 3.7.x: Optional chaining and nullish coalescing is broken #522

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

TypeScript 3.7.x: Optional chaining and nullish coalescing is broken #522

Description

Activity

smithki commented on Nov 16, 2019

tunnckoCore commented on Nov 16, 2019

ForsakenHarmony commented on Nov 17, 2019

smithki commented on Nov 17, 2019

ConsoleTVs commented on Jan 1, 2020

ForsakenHarmony commented on Jan 6, 2020

smithki commented on Feb 13, 2020

Albert-Gao commented on Feb 18, 2020

ForsakenHarmony commented on Feb 18, 2020

adjohnston commented on May 10, 2020

TechQuery commented on Jun 26, 2020

ConsoleTVs commented on Jul 3, 2020

TechQuery commented on Aug 11, 2020

ConsoleTVs commented on Aug 11, 2020

lukas-valenta commented on Aug 11, 2020

TechQuery commented on Aug 12, 2020

ConsoleTVs commented on Aug 14, 2020

TechQuery commented on Aug 14, 2020

yuschick commented on Sep 24, 2020

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions