Skip to content
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

🐛 BUG: Plugin does not handle script tags inside expressions correctly #337

Open
GabeDuarteM opened this issue Mar 26, 2023 · 5 comments
Open

🐛 BUG: Plugin does not handle script tags inside expressions correctly #337

GabeDuarteM opened this issue Mar 26, 2023 · 5 comments
Labels
- P3: minor bug An edge case that only affects very specific usage (priority) feat: expression Issue related to formatting of expressions

Comments

@GabeDuarteM
Copy link

GabeDuarteM commented Mar 26, 2023 •
edited
Loading

Describe the Bug

If I have the following file:

---
---

<!DOCTYPE html>
<html lang="en">
  <head>
    {true && <script>const thing = { age: 1 }</script>}
  </head>
  <body>
  </body>
</html>

when I run prettier --check --plugin-search-dir=. ., I get this error:

Checking formatting...
src/layouts/Layout.astro[error] src/layouts/Layout.astro: SyntaxError: Unexpected token, expected "}" (1:39)
[error] > 1 | <>{true && <script>const thing = { age: 1 }</script>
[error]     |                                       ^
[error]   2 | }</>
All matched files use Prettier code style!

Just for some context, I have that conditional script so I only write it to the tom if an environment variable is present, and inside it I need to create an object.

My guess is that prettier is probably not correctly applying the javascript context inside the script tag when there is this conditional check. It does work as expected if I remove the {true && part, leaving only the script tag

Steps to Reproduce

  1. npm init astro using the default template
  2. edit Layout.astro to have the following:
---
---

<!DOCTYPE html>
<html lang="en">
  <head>
    {true && <script>const thing = { age: 1 }</script>}
  </head>
  <body>
  </body>
</html>
  1. run prettier --check --plugin-search-dir=. . to check all files with prettier
  2. Check the error on the console:
Checking formatting...
[warn] astro.config.mjs
[warn] package.json
[warn] README.md
[warn] src/components/Card.astro
src/layouts/Layout.astro[error] src/layouts/Layout.astro: SyntaxError: Unexpected token, expected "}" (1:39)
[error] > 1 | <>{true && <script>const thing = { age: 1 }</script>
[error]     |                                       ^
[error]   2 | }</>
[warn] src/pages/index.astro
[warn] tsconfig.json
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

Might be related to #335
@Princesseuh
Copy link
Member

Hmm, that one might be a bit challenging. I think it's caused by Prettier's JSX parser not understanding script tags.

The issue you posted is unrelated, though. No worries there

@Princesseuh Princesseuh mentioned this issue Jul 18, 2023
Closed
@Princesseuh Princesseuh changed the title 🐛 BUG: Prettier breaks on files containing an object inside a conditional branch 🐛 BUG: Plugin does not handle script tags inside expressions correctly Jul 18, 2023
@Princesseuh Princesseuh mentioned this issue Aug 24, 2023
Closed
1 task
@Princesseuh Princesseuh added needs triage Issue needs to be triaged and removed bug labels Nov 28, 2023
@Princesseuh Princesseuh added - P3: minor bug An edge case that only affects very specific usage (priority) feat: expression Issue related to formatting of expressions and removed needs triage Issue needs to be triaged labels Dec 26, 2023
@g-plane

This comment was marked as off-topic.

Sign in to view
@spolarRASP
Copy link

I have the same issue:
image
Does somenone work on that bug?

@g-plane

This comment was marked as off-topic.

Sign in to view
@stefanprobst
Copy link

is there a way to add a prettier-ignore comment to silence that error?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
- P3: minor bug An edge case that only affects very specific usage (priority) feat: expression Issue related to formatting of expressions
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@Princesseuh @GabeDuarteM @g-plane @stefanprobst @spolarRASP