I was wrestling with a feature that refused to run locally and refused to build. It was originally running on Helix Container but people knowing how to run it have all left - let’s forget about that for now and get it running in a demo app based on a newer (but unfortunately not the newest) create-react-app environment.

@babel/plugin-transform-typescript

The fact that the TypeScript code was two-year-old made babel most upset, for example, babel’s tolerance to namespace has changed:

1
2
3
4
5
6
7
8
allowNamespaces
boolean, defaults to true.

History
Version	Changes
- v7.5.0	Added allowNamespaces, defaults to false
- v7.13.0	defaults to true
Enables compilation of TypeScript namespaces.

The babel version from the demo app was 7.12 and I had to enable the allowNamespaces config as the code was using the namespace feature.

craco plugin to allow customizing .bablerc

I found this plugin: craco-use-babelrc to utilize .bablerc and customize babel.

Create .babelrc

Content of .babelrc:

1
2
3
4
5
6
7
8
9
10
11
{
  "presets": [
      "@babel/react",
      "@babel/env"
  ],
  "plugins": [
      "@babel/plugin-transform-typescript", {
          "allownamespaces": true
      }
  ]
}

See plugin options for reference.