Type error if Head contains children

muskela commented 2 years ago

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 :)

nibtime commented 2 years ago

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 commented 2 years ago

@all-contributors add @muskela for bug

allcontributors[bot] commented 2 years ago

@nibtime

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

nibtime / next-safe-middleware

Type error if Head contains children #46