Structure is not well defined, how proper use it with schema-dts

[HectorLS]

Hello, im using "react": "^16.6.0"

The sample repo code is this one (which have a syntax error):

import { Person } from "schema-dts";
import { JsonLd } from "react-schemaorg";

export function GraceHopper() {
  return <JsonLd<Person>
    item={{
      "@context": "https://schema.org",
      "@type": "Person",
      name: "Grace Hopper",
      alternateName: "Grace Brewster Murray Hopper",
      alumniOf: {
        "@type": "CollegeOrUniversity",
        name: ["Yale University", "Vassar College"]
      },
      knowsAbout: ["Compilers", "Computer Science"]
    }}/>;
}

If i use code like this all works fine

import { JsonLd } from "react-schemaorg";

export function personJsonLd() {
  const sampleData = {
    "@context": "https://schema.org",
    "@type": "Person",
    name: "Grace Hopper",
    alternateName: "Grace Brewster Murray Hopper",
    alumniOf: {
      "@type": "CollegeOrUniversity",
      name: ["Yale University", "Vassar College"]
    },
    knowsAbout: ["Compilers", "Computer Science"]
  };

  
  return <JsonLd item={sampleData}/>;
}

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:

  return (
    <JsonLd item={sampleData}>
      <Person />
    </JsonLd>
  );

But got a bunch of console error, some light/improved example would be much appreciated 🙏🏽 Thanks in advance

[Eyas]

Thanks for the feedback! What TypeScript version are you running?

1. I can't repro a syntax error in the first example you gave. <JsonLD<Person> item={{...}}/> work just fine for me.

2. 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",
   

3. 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!

[mmartinnn]

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.

[Eyas]

I see @mmartinnn , so it seems the gaps here are:

1. It is not clear that the example is based on TSX and wouldn't work with .js or even .jsx
2. It is not clear that this type-checking is only available with TypeScript (either directly or through tsc type-checking a js project)

And so some improvement in the documentation might help?

[mmartinnn]

I think that's precisely accurate!