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: TS Error when using HTML Components #447

Closed
dev-nicolaos opened this issue Nov 15, 2022 · 1 comment · Fixed by withastro/astro#7296
Closed

🐛 BUG: TS Error when using HTML Components #447

dev-nicolaos opened this issue Nov 15, 2022 · 1 comment · Fixed by withastro/astro#7296
Labels
- P4: important Violate documented behavior or significantly improves performance (priority)

Comments

@dev-nicolaos
Copy link

Describe the Bug

When using a pure HTML component in an Astro template, Typescript throws the following error:

path/to/template.astro:12:4 Error: Component 'MyComponent' is not a valid component.

If this is a Svelte or Vue component, it might have a syntax error that makes it impossible to parse.
11  <body>
12    <MyComponent />
       ~~~~~~~~~~~
13  </body>

I believe this is an issue with the language tools rather than the compiler since this renders correctly with no errors or warnings.

TS reports the error both when running astro check and in the VS Code UI with the Astro extension installed.

Environment

Astro version: 1.6.8
VS Code extension version: 0.28.2
OS: Windows 11 2022H2

Steps to Reproduce

  1. Create a package.json with the contents:
{
  "scripts": {
    "check:astro": "astro check",
    "start": "astro dev"
  },
  "devDependencies": {
    "astro": "^1.6.8"
  }
}
  1. Create src/components/myComponent.html with the contents: <div>Hello world</div>
  2. Create src/pages/index.astro with the contents:
---
import MyComponent from "../components/myComponent.html";
---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <MyComponent />
</body>
</html>
  1. If in VS Code, observe the error squiggle on line 12 of index.astro
  2. Run `npm run check:astro"
  3. Observe that a TS error is reported
  4. Run npm start
  5. Observe that the site builds successfully with no errors and "Hello world" can be seen when visiting the site root in the browser.
@Princesseuh Princesseuh added bug good first issue Good for newcomers - P4: important Violate documented behavior or significantly improves performance (priority) labels Nov 15, 2022
@nateemerson
Copy link

With a cursory grep I found this bit that might be a hint. Might have to do w/ being considered a JSX element...?

language-tools/packages/language-server/src/plugins/typescript/features/DiagnosticsProvider.ts

Line 274 in d27d03a

'does not have any construct or call signatures.',

@Princesseuh Princesseuh removed the good first issue Good for newcomers label Dec 22, 2022
@Princesseuh Princesseuh mentioned this issue Jun 5, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
- P4: important Violate documented behavior or significantly improves performance (priority)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(html): Export HTML components as default export so their type is valid JSX withastro/astro
3 participants
@nateemerson @Princesseuh @dev-nicolaos