JSON-LD Prop Types are broken

[FunctionDJ]

Describe the bug There's no autocomplete / intellisense / typechecking with any JSON-LD component who's .d.ts file tries to import another type from the types.d.ts file.

Some JSON-LD .d.ts files attempt to import a type from src/types, which doesn't exist. In the shipped NPM module that file is located at ../types relative to the file. Manually changing the path like this fixes the issue, but i don't know how the TS or building config needs to be changed to achieve this.

Reproduction The effect can be seen in this minimal reproduction, but i have more information below: https://codesandbox.io/s/hungry-breeze-hmd9z6?file=/src/App.tsx

[FunctionDJ]

After i changed the strings manually for now, i found another issue:

It turns out that multiple interfaces by the same name (Question) are generated in types.d.ts, which results in TypeScript picking the first interface, which is the wrong one. To fix this, the types probably need to be namespaced or have some sort of prefix or suffix to differentiate them.

[riffbyte]

I'm having the exact same issue, which is preventing me from building the code 😕 I filed a pull request which should fix the issue with incorrect imports: https://github.com/garmeeh/next-seo/pull/950

[garmeeh]

@FunctionDJ I am a little confused from your codesandbox as it is not a Next.js application?

[FunctionDJ]

@garmeeh it seems like the sandbox was cleared or something... not sure. it wasn't an actual next.js app, it just had the next-seo package to show the problem with the types. i'll come back to this at some point and confirm if #950 fixed this or not, i can't verify right now if you want me to do that.

[arlimus]

Hey, thank you for reporting this issue! I ran into this same bug when building my application. This was on v5.5.0

Here is the relevant part from the logs:

yarn run v1.22.19
$ next build
warn  - You have enabled experimental feature (images) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
info  - Linting and checking validity of types...
warn  - No ESLint configuration detected. Run next lint to begin setup
Failed to compile.
./node_modules/next-seo/lib/jsonld/article.d.ts:2:31
Type error: Cannot find module 'src/types' or its corresponding type declarations.
  1 | import { JsonLdProps } from './jsonld';
> 2 | import { ArticleAuthor } from 'src/types';
    |                               ^
  3 | export interface ArticleJsonLdProps extends JsonLdProps {
  4 |     type?: 'Article' | 'Blog' | 'NewsArticle';
  5 |     url: string;
> Build error occurred
Error: Call retries were exceeded
    at ChildProcessWorker.initialize (/builds/mondoolabs/landing-v3/node_modules/next/dist/compiled/jest-worker/index.js:1:11661)
    at ChildProcessWorker._onExit (/builds/mondoolabs/landing-v3/node_modules/next/dist/compiled/jest-worker/index.js:1:12599)
    at ChildProcess.emit (node:events:527:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
  type: 'WorkerError'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I don't have a neat PR for you, but fixed it given #950 's approach, basically changing all src/types (and similar) imports to their relative paths instead. If somehow a configuration error is causing this, it might an an elegant workaround (tho I'm not sure what it might be)

[samuelcole]

It turns out that multiple interfaces by the same name (Question) are generated in types.d.ts, which results in TypeScript picking the first interface, which is the wrong one. To fix this, the types probably need to be namespaced or have some sort of prefix or suffix to differentiate them.

I'm running into this: I would love to import the Question type to keep things tidy, but I don't get to choose which of the two interfaces I want to use.

For now I just copy-pasted my favorite one into my codebase, and that's fine, but feels a bit icky.