Open HectorLS opened 5 years ago
Thanks for the feedback! What TypeScript version are you running?
I can't repro a syntax error in the first example you gave. <JsonLD<Person> item={{...}}/>
work just fine for me.
One issue here might be that schema-dts
is a peer dependency of react-schemaorg
, so you should manually npm install
schema-dts as well.
In other words, your package.json should look something like:
"devDependencies": {
"react-schemaorg": "^0.1.0",
"schema-dts": "^0.3.1",
In general, you should expect both imports described in the README to work:
import { Person } from "schema-dts";
import { JsonLd } from "react-schemaorg";
If the imports themselves fail, you know you might have an issue with how your dependencies are set up, and we can try working on that.
In general, <JsonLd>
is a generic-typed React element. All it requires is a type you specify that has @context
on it and extends Thing
(as described in schema-dts).
To get proper Schema.org type checking, you'll want help from schema-dts
which provides those types. You can do that in one of three ways:
a) As written in the example; explicitly provide a schema-dts type (or really any type) to the template. The proper syntax for that in TSX is <JsonLd<T> .../>
. In the example, T
is Person
.
b) You can let TypeScript's type inference do some work, for example, if you:
import { WithContext, Person } from "schema-dts";
import { JsonLd } from "react-schemaorg";
export function personJsonLd() {
const sampleData: WithContext<Person> = {
"@context": "https://schema.org",
"@type": "Person",
name: "Grace Hopper",
};
return <JsonLd item={sampleData}/>;
}
then JsonLd will double check that sampleData
fits the contract: (i) has a @context
, and (ii) extends Thing
.
Hope that helps!
I have exactly the same issue. The provided syntax - return <JsonLd<whatever>
produces a fatal unexpected token error for me, even with all dependencies installed and the proper imports, as you describe above.
Edit: I found a working fix for this like 10 minutes later. The issue was extremely basic - I was trying to do this in a .js file rather than a .tsx file. Possible that the OP has the same issue.
I see @mmartinnn , so it seems the gaps here are:
And so some improvement in the documentation might help?
I think that's precisely accurate!
Hello, im using
"react": "^16.6.0"
The sample repo code is this one (which have a syntax error):
If i use code like this all works fine
But as you can see in the previous code i haven't used the DTS, how can i use the schema-dts library, i didn't figure it out 😞 i have try the return like:
But got a bunch of console error, some light/improved example would be much appreciated 🙏🏽 Thanks in advance