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.

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

TSX rejects custom elements #4648

Closed
jamiewinder opened this issue Sep 4, 2015 · 9 comments
Closed

TSX rejects custom elements #4648

jamiewinder opened this issue Sep 4, 2015 · 9 comments
Labels
Question An issue which isn't directly actionable in code

Comments

@jamiewinder
Copy link

return <my-custom-element />;

Results in error: Property 'my-custom-element' does not exist on type 'JSX.IntrinsicElements'. As far as I'm aware, this ought to be valid JSX and so compile to:

React.createElement("my-custom-element").

I can get around this by using the second form, but it'd be nice to avoid the check for standard elements (unless it's there for a good reason?)

@weswigham
Copy link
Member

declare module JSX {
  interface IntrinsicElements {
    "my-custom-element": MyCustomElementClass
  }
}

You can do this to remove the type error, if you'd like.

@mhegazy mhegazy added the Question An issue which isn't directly actionable in code label Sep 5, 2015
@mhegazy mhegazy closed this as completed Sep 17, 2015
@stevemao
Copy link

stevemao commented Sep 6, 2016

@weswigham what if the element doesn't have a class?

@weswigham
Copy link
Member

Try typing it as any?

@stevemao
Copy link

stevemao commented Sep 6, 2016

Isn't any a bad pattern?

@weswigham
Copy link
Member

If you have no type which describes the attributes allowed on the object, any may be acceptable, in order to allow any attribute to be applied. Alternatively, write an interface for the component.

@jyotendra
Copy link

See this, typescript complains if React component does not start with a capital letter.

@Alino
Copy link

Alino commented Jun 6, 2017

I confirm that changing my react components name first letter to uppercase did fix the problem on typescript version 2.3.2

@ak99372
Copy link

ak99372 commented Feb 21, 2018

@jyotendra thanks for that starting the component with capital letter fixed the error for me too.
Conclusion:
-> This error is misleading and should spell it out what the actual issue is or...
-> Why on earth is typescript dictating for components to start with uppercase?

@weswigham
Copy link
Member

It's part of jsx - lowercased names are considered intrinsics, while uppercased names are custom components. They get called differently, too. Intrinsics are just a string passed into createElement, while custom components pass in their constructor.

@microsoft microsoft locked and limited conversation to collaborators Jul 3, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Question An issue which isn't directly actionable in code
Projects
None yet
Development

No branches or pull requests

7 participants