Optional chaining / nullish coalescing with typescipt

[prbxr]

preact-cli 3.03

question / feature request

How to add optional chaining while using typescript?

I am using the default babel-loader config

Added this preact.config.js

    let { rule } = helpers.getLoadersByName(config, 'babel-loader')[0]
    let babelConfig = rule.options
    babelConfig.plugins.push(require.resolve('@babel/plugin-proposal-optional-chaining'))
    babelConfig.overrides[0].plugins.push(require.resolve('@babel/plugin-proposal-optional-chaining'))

but this is the result:

uild failed!

✖ ERROR ./components/Drawer/Drawer.tsx 31:24
Module parse failed: Unexpected token (31:24)
File was processed with these loaders:
* ../node_modules/@prefresh/webpack/src/loader/index.js
* ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const dialog = useDialogState();
|
>   let _Body = children ?? Body;
|
|   return h(Fragment, null, h(DialogDisclosure, dialog, Trigger), h(Dialog, _extends({}, dialog, {
@ ./components/panels/Products/productsPanel.stories.tsx 3:0-52 46:5-11
@ ./app/App.tsx
@ ./index.ts
@ ../node_modules/preact-cli/lib/lib/entry.js
@ multi ../node_modules/@prefresh/core/src/index.js ../node_modules/preact-cli/lib/lib/entry

[rschristian]

Nullish Coalescing and Optional Chaining should work right out of the box. You don't need to configure babel with custom loaders.

That being said, I cannot break the CLI (or those features) with the config you've offered, so your issue is likely some other configuration you've done on top of this. Can you provide a repo?

[prbxr]

I run preact create typescript
It creates .babelrc with preact/cli preset
I added such a file to my project
And now it works fine

The doc said that putting such a file will override the original config, so I tried to config babel inside preact.config.
But that didn't work

[rschristian]

The doc said that putting such a file will override the original config, so I tried to config babel inside preact.config.

What it says is:

You may create a .babelrc file in your project's root directory. Any settings you define here will overwrite matching config-keys within Preact CLI preset. For example, if you pass a "plugins" object, it will replace & reset all Babel plugins that Preact CLI defaults to.

So creating such a file is how you override parts of the original config, it doesn't replace the original entirely. The default .babelrc that the template shipped with overwrote nothing as it didn't have any config-keys to match up against.

[chinchang]

doesnt work for me. I am on latest preact & preact-cli

[rschristian]

doesnt work for me. I am on latest preact & preact-cli

Are you on preact-cli v4?

[chinchang]

@rschristian I mean latest stable version - 3.5.1

[rschristian]

I can all but guarantee you're running into #1747.

Preact-CLI is not maintained, and as such, I'm not going to mark v4 as "stable", but you absolutely should be using it. Webpack 4 is quite old and you'll see more and more of these issues until you switch.

[chinchang]

If preact-CLI isn't maintained, what is way to setup a preact app going forward?

[rschristian]

https://preactjs.com/guide/v10/getting-started#create-a-vite-powered-preact-app

[chinchang]

Upgraded to preact-CLI 4 and that fixed the mentioned problem! Thanks a lot @rschristian
For anyone wanting to upgrade, here is the PR for more info - #1807

I wish someday I'll be able to use Vite to setup my app :)