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

[smithki]

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

[smithki]

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.

[tunnckoCore]

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.

[ForsakenHarmony]

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

[smithki]

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?

[ConsoleTVs]

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

[ForsakenHarmony]

@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"
        ]
    ]
}

[smithki]

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

[Albert-Gao]

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

[ForsakenHarmony]

I mentioned that in my commment

[adjohnston]

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

[TechQuery]

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

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

[ConsoleTVs]

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"
  ]
}

[TechQuery]

@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"
        ]
    ]
}

[ConsoleTVs]

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

inside the .babelrc file.

[lukas-valenta]

@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]"    
  ]
}

[TechQuery]

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"
    ]
}

[ConsoleTVs]

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"

[TechQuery]

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

[yuschick]

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