Codesandbox-client: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

[vegarringdal]

❔ Question

I get this on sandboxes that have been working for months

• Support for the experimental syntax 'decorators-legacy' isn't currently enabled
  Is it a bug ?

Link to sandbox: link (optional)

Your Environment

| Software | Name/Version|
| ---------------- | ---------- |
| Сodesandbox | create-react-app-typescript (not using react)
| Browser | Chrome
| Operating System | windows10

[vegarringdal]

@SaraVieira Noticed this is fixed.
Great if tests are added so this cant happen again.
Thx for fixing it btw :-)

[SaraVieira]

Amazing! The issue is that we don't have that template anymore so some code was deleted

Won't happen again

[vegarringdal]

Np just happy it could be fixed.

The issue is that we don't have that template anymore so some code was deleted

Is there a clean new TS template that support decorators and import() with html files?
Issue with the vanilla template is the import()

  public loadTemplate(): Promise<any> {
    return import('./sample01.html');
  }

link to test sandbox in first post

[SaraVieira]

The new react ts one I may support it
https://codesandbox.io/s/react-ts

We basically removed the old one in favor of the new create react app supports ts by just changing the extension

[vegarringdal]

@SaraVieira
Looks like react typescript template is still broken

If you take this sample
https://codesandbox.io/s/github/mframejs-codesandbox-samples/sample0005

Replace index.ts with this code
```ts
import {
configure,
IElement,
template,
customAttribute,
bindable
} from "mframejs";

@customAttribute("custom-attribute")
export class CustomElement {
public $element: HTMLElement;
@bindable() public value: string;

public created() {
this.$element.innerHTML = this.value;
}
}

// our dummy app to simplify parts
export class App implements IElement {
public $element: any;
public something = "test value";

public loadTemplate() {
return template<div class="no1" custom-attribute.bind="something"></div>;
}
}

configure(App).then((mf: any) => {
mf.start(document.body);
});

````

you will get

but if you edit this to the parcel/vanilla template in the sandbox.config.json and refresh browser page you get

its like the template breaks if someone makes edits

[SaraVieira]

Hey!

I think that one makes sense because you are building a parcel app, it's not react. The build is done with something else other than react-scripts from what I can tell :/

correct me if i am wrong

[vegarringdal]

@SaraVieira
Thanks for replying 👍
My last post did not show the issue very good.

think that one makes sense because you are building a parcel app, it's not react.

its just a typescript silly frameword project Im making 😂
I was using the react template since it was working better then parcel template where codesandbox breaks usage of import('./somefile.html')
Would be really nice if that was fixed.
https://github.com/CompuIves/codesandbox-client/issues/1196
Parcel locally works fine, so feel its a bug, but might have been overlooked since I put it inside sourcemap issue.

But back to thread issue/decorator issue:
Ive made a sample link
Here you can see I get better error of the problem.

This is a bug right ?
But again if this react-ts template is not going to be supported I can switch over to parcel. I figured it was nice to know about the bug if other stared asking

link same project above using parcel, how I would have expetced react-ts to behave

[SaraVieira]

I am gonna ping @CompuIves here because this is where my typescript knowledge ends :(

@CompuIves

[vegarringdal]

Np :-)
I will start using the vanilla template too. Since Im using using a old react template.

[feedm3]

@SaraVieira, @CompuIves: Any updates on this? It looks like this issue is still not resolved.

I just started a new react templated and transfered it to a typescript project. In the tsconfig.json I added "experimentalDecorators": true but I still get "Support for the experimental syntax 'decorators-legacy' isn't currently enabled".
I also tried it with a react-ts template, same error.

Link to the sandbox: https://codesandbox.io/s/xvkvo3xmqz

[hug0b]

Same here my local Create-react-app with ts project works fine but the CRA + TS sandbox with identical dependencies and tsconfig throws
SyntaxError: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

EDIT: sandbox link : https://codesandbox.io/s/divine-tree-8leyg

[linonetwo]

My typescript rewired CRA run into this issue https://codesandbox.io/s/github/linonetwo/react-encompass-ecs-example

It runs locally with rescripts start and presets: ['react-app', ['@babel/preset-typescript', { isTSX: true, allExtensions: true }]], in .babelrc.js, can this work in codesandbox?

[vguleaev]

I have the same problem, is it possible to fix it?

[deadcoder0904]

Same issue. How to use Decorators without using TS?

I did the following to fix the warning in CodeSandBox

under File >> Preferences >> Settings

search for "javascript.implicitProjectConfig.experimentalDecorators" & enable it

Then I installed @babel/plugin-proposal-decorators & added the following to .babelrc

{
  "plugins": ["@babel/plugin-proposal-decorators"]
}

It's still giving me error -

Support for the experimental syntax 'decorators-legacy' isn't currently enabled

[deadcoder0904]

So this was fixed this morning.

Source: https://twitter.com/CompuIves/status/1146743224679239681

It works with TS.

Source: https://codesandbox.io/s/mobx-typescript-working-q0j1n