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 if Head contains children #46

Closed
muskela opened this issue Jul 13, 2022 · 3 comments · Fixed by #51
Closed

Type error if Head contains children #46

muskela opened this issue Jul 13, 2022 · 3 comments · Fixed by #51
Labels
bug Something isn't working

Comments

@muskela
Copy link

muskela commented Jul 13, 2022

Hi,
I'm trying to add this package to a project. But there seems to be an issue, with what I assume is React 18 typings.
There is a Typescript error whenever I put any element inside of the Head Component:

import {
  getCspInitialProps,
  provideComponents,
} from '@next-safe/middleware/dist/document';
import Document, { Html, Main } from 'next/document';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await getCspInitialProps({ ctx });
    return initialProps;
  }
  render() {
    const { Head, NextScript } = provideComponents(this.props);
    return (
      <Html>
        <Head><link rel="icon" href="/favicon.svg" type="image/svg+xml" /></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

I will get there error:

const Head: React.FC<ProvidedProps>
Type '{ children: (false | Element)[]; }' has no properties in common with type 'IntrinsicAttributes & ProvidedProps'

I'm using React 18.2.0 and Next 12.2.2

I do hope it's something easy to fix - thanks for all your work :)
@muskela muskela changed the title Type error of Head contains children Type error if Head contains children Jul 13, 2022
@nibtime nibtime added the bug Something isn't working label Jul 13, 2022
@nibtime
Copy link
Owner

nibtime commented Jul 13, 2022

Hi @muskela ,

thanks for reporting this. It is because of React 18, as the package uses React.FC internally, which doesn't have a children prop anymore in React 18 typings. I will fix this in an upcoming release.

In the meantime, you can simply do the following to get rid of the build error:

const { Head, NextScript } = provideComponents(this.props) as any

nibtime added a commit that referenced this issue Jul 15, 2022
@nibtime
fix(document): 🐛 use PropsWithChildren for provideComponents
281f823 
fixes #46. In React 18 typings, FC doesn't have auto children anymore
nibtime added a commit that referenced this issue Jul 15, 2022
@nibtime
fix(document): 🐛 use PropsWithChildren for provideComponents
6a8859c 
fixes #46. In React 18 typings, FC doesn't have auto children anymore
@nibtime nibtime mentioned this issue Jul 15, 2022
Merged
nibtime added a commit that referenced this issue Jul 15, 2022
@nibtime
fix(document): 🐛 use children?: any for provideComponents
463c29e 
fixes #46. In React 18 typings, FC doesn't have auto children anymore
nibtime added a commit that referenced this issue Jul 15, 2022
@nibtime
build(deps): ⬆️ build(deps): upgrade workspace to React 18 and Next 1…
7014af5 
…2.2.2

And set children and return type to `any` for `provideComponents`.
For some weird type reason keeps failing on Vercel , but not in GitPod.
fixes #46 (and drove me nuts)
nibtime added a commit that referenced this issue Jul 24, 2022
@nibtime
build(deps): ⬆️ build(deps): upgrade workspace to React 18 and Next 1…
17a6216 
…2.2.2

And set children and return type to `any` for `provideComponents`.
For some weird type reason keeps failing on Vercel , but not in GitPod.
fixes #46 (and drove me nuts)
@github-actions github-actions bot mentioned this issue Jul 24, 2022
Merged
@nibtime
Copy link
Owner

nibtime commented Jul 25, 2022

@all-contributors add @muskela for bug

@allcontributors allcontributors bot mentioned this issue Jul 25, 2022
Merged
@allcontributors
Copy link
Contributor

@nibtime

I've put up a pull request to add @muskela! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Version Packages nibtime/next-safe-middleware
2 participants
@muskela @nibtime