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.

score 0 · Accepted Answer · answered Nov 27 '20 at 22:39

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

score -1 · Answer 2 · answered Nov 27 '20 at 12:47

-1

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

answered Nov 27 '20 at 12:47

Arjun Biju

73
9

I am not using a babelrc, that is what the tutorial uses. I am using babel standalone because I need to transpile user provided code in real time. The app is built with React but the code the user is writing is Angular. – cbutler Nov 27 '20 at 12:53
https://jsfiddle.net/0n8w6zh9/ hi try to use `Babel.availablePlugins` . can you show where do you connect transpile function to babel – Arjun Biju Nov 27 '20 at 13:32
`import {transform} from 'babel-core'; import es2015 from 'babel-preset-es2015'; import transformRuntime from 'babel-plugin-transform-runtime'; ... transform( /* your ES6 code */, { presets: [es2015], plugins: [transformRuntime] } ) ...` you can also try like this – Arjun Biju Nov 27 '20 at 13:40

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

2 Answers2