8000 Wrong order of babel plugins: enableBabelTypeScriptPreset / allowDeclareFields · Issue #1087 · symfony/webpack-encore · GitHub
[go: up one dir, main page]
Skip to content

Wrong order of babel plugins: enableBabelTypeScriptPreset / allowDeclareFields #1087

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
TamasSzigeti opened this issue Feb 6, 2022 · 3 comments
Open

Wrong order of babel plugins: enableBabelTypeScriptPreset / allowDeclareFields #1087

TamasSzigeti opened this issue Feb 6, 2022 · 3 comments
Labels
Stalled

Comments

@TamasSzigeti
Copy link

When writing Stimulus controllers in TypeScript, given its incomplete typings, one needs to manually declare all targets, values etc:

export default class extends Controller {
    declare nameTarget: HTMLInputElement;
    declare indexValue: number;
    static values = { index: Number };
    static targets = ["name"];
…

For this to work, when using @babel/preset-typescript, the allowDeclareFields option needs to be added.
But then babel compilation fails with:

Syntax error: TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript.
node_modules/@symfony/stimulus-bridge/lazy-controller-loader.js!./assets/controllers/hello_controller.ts
If you have already enabled that plugin (or '@babel/preset-typescript'), make sure that it runs before any plugin related to additional class features:
 - @babel/plugin-proposal-class-properties
 - @babel/plugin-proposal-private-methods
 - @babel/plugin-proposal-decorators
  11 |  */
  12 | export default class extends Controller {
> 13 |     declare nameTarget: HTMLInputElement;
     |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Of course the real solution would be to add proper typings to stimulus itself, but that project was abandoned.

So meanwhile, can we fix the config building for this workaround to work?
I would submit a PR but not sure what other consequences would changing the loading order have.

Thank you in advance
@fracsi
Copy link
fracsi commented Feb 7, 2022

You can use a workaround to add the @babel/plugin-transform-typescript as the first plugin until a fix is submitted:

Encore.
  .configureBabel((config) => {
    config.plugins.unshift(['@babel/plugin-transform-typescript', {
      allowDeclareFields: true
    }])
  })

@stof stof mentioned this issue Aug 31, 2022
Merged
@carsonbot
Copy link
Collaborator

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

1 similar comment
@carsonbot
Copy link
Collaborator

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Stalled
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@TamasSzigeti @fracsi @carsonbot
0