Babel Standalone Invalid plugin @babel/plugin-proposal-decorators

Question

I am trying to use babel standalone inside a react app to transpile Angular TypeScript.

The short version:

How can I use @babel/plugin-proposal-decorators and @babel/plugin-proposal-class-properties with babel standalone?

The long version:

This tutorial https://medium.com/@hubert.zub/using-babel-7-and-preset-typescript-to-compile-angular-6-app-448eb1880f2c says that "apparently @babel/plugin-syntax-decorators doesn’t do the work and causes transform errors.". He recommends using the following config in a babelrc file:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true,
      }
    ],
    "@babel/plugin-proposal-class-properties"
  ]
}

using syntax-decorators does "work" for me but then I get another error that it does not recognise a selector for an imported component.

Since I am using babel standalone I need to use Babel.transform like this:

const TS_OPTIONS = {
  presets: [
    'typescript',
    ['es2017', { 'modules': false }],
  ],
  plugins: [
// the following two options "work" but with another error
    // 'syntax-decorators',
    // 'syntax-class-properties',
    
// none of these options work
    ["@babel/plugin-proposal-decorators"],
    ["@babel/plugin-proposal-class-properties"],
    //['plugin-proposal-decorators', { 'legacy': true }],
    //['plugin-proposal-class-properties', { 'loose': true }],
    // 'plugin-proposal-decorators',
    // 'plugin-proposal-class-properties',
    // ['syntax-decorators', { 'legacy': true }],
    

    'transform-es2015-modules-commonjs',
  ],
};

my transpile function (greatly simplified):

export default function transpile(myCode) {
  const { code } = Babel.transform(myCode, TS_OPTIONS);

  return myCode;
}

No matter how I write the plugins it does not work. I keep getting an error along the lines of

Error: Invalid plugin specified in Babel options: "proposal-decorators"

using the syntax-decorators plugin will transpile the code but I get the following error when importing a component and trying to use the components selector:

Uncaught Error: Template parse errors:
'search-bar' is not a known element:
1. If 'search-bar' is an Angular component, then verify that it is part of this module.
2. If 'search-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Answer 1

I solved this by upgrading the version of Babel I was using which gave me access to more available plugins. I posted another question that I thought was a different issue but it turns out they were related. I will reference that question here if anyone is interested: Angular Uncaught Error: Template parse errors: is not a known element

Answer 2

with babel-standalone .babelrc wont work .you might need to use transform to apply plugins .i am wondering why you exactly need to use standalone babel ?. if its react or angular you can just use babel only and don't need to use transform