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

Type error with children in Head component #1437

Closed
stephenglass opened this issue Feb 8, 2023 · 6 comments
Closed

Type error with children in Head component #1437

stephenglass opened this issue Feb 8, 2023 · 6 comments
Assignees
@jessarcher
Labels
react Related to the react adapter

Comments

@stephenglass
Copy link
Contributor

Version:

  • @inertiajs/react version: 1.0.0

Describe the problem:

According to documentation you should be able to have children in the Inertia's Head component. This is the only way to include a meta tag in the head.

import { Head } from '@inertiajs/react'

<Head>
  <title>Your page title</title>
  <meta name="description" content="Your page description" />
</Head>

However, this code results in the following error:
Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & InertiaHeadProps'.

Because the Head component only accepts title as props, there is no way to add meta to the head without a type error.

Steps to reproduce:

  1. Create TypeScript project using latest version of Inertia.
  2. Paste code from documentation.

PR

I believe this issue is in addition to the PR #1433
Does the InertiaHead type need to be wrapped in PropsWithChildren generic?
@stephenglass stephenglass added the react Related to the react adapter label Feb 8, 2023
@nogenem
Copy link

nogenem commented Feb 9, 2023

Just ran into this problem too... There is a bunch of other PRs and Issues about this and still nothing... ;/

@jessarcher
Copy link
Member

Hey! I'm unable to replicate this in the React TypeScript playground at https://github.com/inertiajs/inertia/tree/master/playgrounds/react

Is there perhaps a tsconfig.json setting I need to enable?

I've merged #1433, but I don't think that would have changed anything with this.

@jessarcher jessarcher self-assigned this Feb 14, 2023
@stephenglass
Copy link
Contributor Author

Hey! I'm unable to replicate this in the React TypeScript playground at https://github.com/inertiajs/inertia/tree/master/playgrounds/react

Is there perhaps a tsconfig.json setting I need to enable?

I've merged #1433, but I don't think that would have changed anything with this.

Hey, thanks for checking on this. This is the tsconfig.json file in my project

{
    "compilerOptions": {
        "target": "es6",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "jsx": "react-jsx",
        "module": "esnext",
        "moduleResolution": "node",
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"]
        },
        "types": [
            "vite/client"
        ],
        "isolatedModules": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true ,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    }
}

v

@nogenem
Copy link

nogenem commented Feb 14, 2023 •
edited
Loading

@jessarcher So... You need to install the @types/react and i think the @types/react-dom too (!?) packages... Thats when the problems show up...

image

image

I'm getting both problems on the playgrounds/react project...

(PS: I wasn't able to run the code inside the monorepo, it wasn't finding some of the dependencies, so i extracted the react project and installed all dependencies to test...)

#1325 or #1315 should fix the Head bug!? I dunno why #1315 was closed, tbh...

@stephenglass stephenglass mentioned this issue Feb 14, 2023
Merged
@stephenglass
Copy link
Contributor Author

I created PR #1448 to explicitly declare children in type definition.

@jessarcher
Copy link
Member

Thank you! I've merged #1448

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jessarcher jessarcher

Labels
react Related to the react adapter
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@nogenem @jessarcher @stephenglass