withastro/language-tools

๐Ÿ› BUG: astro check reports incorrect errors on HTMLAttributes

Closed this issue ยท 17 comments

Describe the Bug

While this worked as expected in Astro 4.0.4, astro check now reports entirely valid JSX attributes as invalid HTMLAttributes.
I've created a tiny reproduction here: https://stackblitz.com/edit/github-ckecs3?file=package.json.
Running npm run check will show that both onClick and className are invalid, even though both are in fact valid JSX props.

Steps to Reproduce

  1. Run npm create astro@latest -- --template framework-preact
  2. Add "check": "astro check:" to the scripts section
  3. Run npm run check
  4. The valid onClick attributes are considered errors. Now, changing one of the class attributes to className (which is valid) will also show that as an error.

Hmm, seems like it's not taking into account the tsconfig.json correctly, for some reason. To be clear, this also didn't work in the past, it's just that I recently fixed a bug where it ignored errors completely inside certain files.

I'm seeing the same error with my solidjs components.

I'll take a look once I'm back to work next week (if someone doesn't before me). Apologies for the inconvenience.

In the meantime, pinning @astrojs/check to 0.3.2 would at least make it not fail (but would go back to the behavior where it didn't check certain files)

flmn commented

I have the same problem with React component.

Unfortunately, downgrading to 0.3.2 didnโ€™t fix it for me

Unfortunately, downgrading to 0.3.2 didnโ€™t fix it for me

You might need to override the language-server version manually, unfortunately. Hoping to have a fix out today, sorry for the delay.

Okay, this is proving to be much harder than anticipated due to bugs in TypeScript itself. It'll take more time to figure out, so in the meantime I'll revert the astro check fix to what it did before (where it skipped over .js(x) files).

Sorry for the inconvenience, TypeScript really wasn't made to have multiple JSX typings in the same project.

knpwrs commented

TypeScript really wasn't made to have multiple JSX typings in the same project.

Indeed, though this worked for me in the past (prior to noticing this issue just the other day):

tsconfig.json:

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "rootDirs": [
      "./src/components/preact",
      "./src/components/react",
      "./src/components/solid"
    ]
  }
}

src/components/preact/tsconfig.json:

{
  "compilerOptions": {
    "module": "NodeNext",
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

src/components/react/tsconfig.json:

{
  "compilerOptions": {
    "module": "NodeNext",
    "jsx": "react-jsx"
  }
}

src/components/solid/tsconfig.json:

{
  "compilerOptions": {
    "module": "NodeNext",
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

astro.config.mjs:

import { defineConfig } from "astro/config";
import preact from "@astrojs/preact";
import react from "@astrojs/react";
import solid from "@astrojs/solid-js";

// https://astro.build/config
export default defineConfig({
  integrations: [
    preact({ include: ["**/preact/**"] }),
    react({ include: ["**/react/**"] }),
    solid({ include: ["**/solid/**"] }),
  ],
});

Just released a hotfix (0.3.4) that disable checking JSX and TSX files in the meantime. Sorry again for the inconvenience, I'm still working on it and will hopefully find a solution ๐Ÿซก

oanaOM commented

If any help, I'm facing the same issue. When running astro check, I get the following errors:

image

Make sure to update to the latest version of @astrojs/check for a temporary workaround!

Hello, I'm using the latest "@astrojs/check": "^0.7.0" but the error still happens to me. Any other place I should update?

image

Hello, I'm using the latest "@astrojs/check": "^0.7.0" but the error still happens to me. Any other place I should update?

image

That's not the same issue, in what kind of file is that screenshot from?

Hello, I'm using the latest "@astrojs/check": "^0.7.0" but the error still happens to me. Any other place I should update?
image

That's not the same issue, in what kind of file is that screenshot from?

Oh, I apologize. It is in .astro file. Would you know what I can do with this? I'm porting my nextjs project to Astro. I was using this same property className. Perhaps I can't do that in astro?

Ah yes, Astro uses standard HTML attributes, so you should use class

I see. That works! Thanks so much.

I just saw the remark by GitHub, that this issue was closed 6 months ago, so I should open a new issue. I will do that.

astro check worked before I installed @astrojs/react, but now it does not anymore.

The expected value of satori changes from VNode to ReactNode due to that installation:
Screenshot 2024-06-25 at 21 41 41

The run of the GitHub Action failed on the updated branch.

Before that it still worked.

What I am asking is:

  • Is this issue (#727) the same I am experiencing?
  • Is this a satori bug or an astro bug?

Thank you very much in advance!