Skip to content

fix: remove word boundaries from decorator check regex #5534

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

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
+89 −39
Open

fix: remove word boundaries from decorator check regex #5534

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c97251b
refactor: remove unnecessary regex check for decorator error detection
Oct 9, 2025
e6e7c85
refactor: add and fix regex
Oct 14, 2025
ee6caf9
fix: update regex
Oct 14, 2025
727ba7a
Update comment
yashank676 Oct 14, 2025
0cef3a8
test: add comprehensive test cases and update regex
Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/@lwc/compiler/src/transformers/javascript.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,12 @@ export default function scriptTransform(
let transformerError = TransformerErrors.JS_TRANSFORMER_ERROR;

// Sniff for a Babel decorator error, so we can provide a more helpful error message.
// The regex handles both plain text (@api) and ANSI-formatted ([33m@[39mapi) decorator names
if (
(e as any).code === 'BABEL_TRANSFORM_ERROR' &&
(e as any).message?.includes('Decorators are not enabled.') &&
/\b(track|api|wire)\b/.test((e as any).message) // sniff for @track/@api/@wire
// eslint-disable-next-line no-control-regex -- Intentionally matching ANSI escape sequences
/@[\x1b[0-9;m]*(track|api|wire)\b/.test((e as any).message)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is brittle. Please just remove the \b from the original regex and it should be enough.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@abdulsattar agreed that would also work but there could be a case like following:

import { eschatology } from 'vermont'
export default class Bananaphone {
  @eschatology wire
}

then this also throws 1198 instead of 1007 due to wire/api/track being the variable name.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or even something that contains any of these words would lead to 1198.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I imagined it would be the case. But, it's an acceptable trade-off. At worst, users are getting a little generic error (which is still related to decorators).

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, let me update it then.

Copy link
Contributor

@wjhsf wjhsf Oct 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The full sequence, as returned by the ansi-regex npm package, is /(?:\u001B\][\s\S]*?(?:\u0007|\u001B\u005C|\u009C))|[\u001B\u009B][[\]()#;?]*(?:\d{1,4}(?:[;:]\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]/g.

Using that is definitely overkill for our use case. I think we should keep the original check, but relax it if we see the escape character (\x1b). We don't really care if the escape codes are properly formatted or not. The regex to accomplish this would be /(?:\b|\x1b\S*?)(api|wire|track)\b/.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wjhsf the regex you pointed out does filter out some cases like:
import { eschatology } from 'vermont' export default class Bananaphone { @eschatology prewire }

but it would still give 1198 instead of 1007 in cases like:
import { eschatology } from 'vermont' export default class Bananaphone { @eschatology wire }

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The current regex does not distinguish between @wire prop and @decorate wire, so I think it's okay if the updated code also does not distinguish.

) {
transformerError = TransformerErrors.JS_TRANSFORMER_DECORATOR_ERROR;
}
Expand Down