Next.js build error w/ RTL

oasido commented 2 years ago

What package has an issue

@mantine/core

Describe the bug

Hey,

I've encountered a problem while attempting to build a Next.js project. It's because of the _document.tsx file.

#0 10.71 Failed to compile.
#0 10.71 
#0 10.71 ./pages/_document.tsx:5:22
#0 10.71 Type error: Class static side 'typeof _Document' incorrectly extends base class static side 'typeof Document'.
#0 10.71   The types returned by 'getInitialProps(...)' are incompatible between these types.
#0 10.71     Type 'Promise<{ styles: Element; html: string; head?: Element[]; }>' is not assignable to type 'Promise<DocumentInitialProps>'.
#0 10.71       Type '{ styles: JSX.Element; html: string; head?: JSX.Element[]; }' is not assignable to type 'DocumentInitialProps'.
#0 10.71         Type '{ styles: JSX.Element; html: string; head?: JSX.Element[]; }' is not assignable to type '{ styles?: ReactFragment | ReactElement<any, string | JSXElementConstructor<any>>[]; }'.
#0 10.71           Types of property 'styles' are incompatible.
#0 10.71             Type 'Element' is not assignable to type 'ReactFragment | ReactElement<any, string | JSXElementConstructor<any>>[]'.
#0 10.71 
#0 10.71   3 | import { ServerStyles, createStylesServer } from '@mantine/next';
#0 10.71   4 | 
#0 10.71 > 5 | export default class _Document extends Document {
#0 10.71     |                      ^
#0 10.71   6 |   static async getInitialProps(ctx: DocumentContext) {
#0 10.71   7 |     const initialProps = await Document.getInitialProps(ctx);
#0 10.71   8 |     const stylesServer = createStylesServer({ key: 'rtl', stylisPlugins: [rtlPlugin] });
------
failed to solve: executor failed running [/bin/sh -c next build]: exit code: 1

It's important to say that the code runs properly during development, only when you try to build — it throws out this error. Followed instructions given in the Mantine RTL docs. Tried with Mantine 4.2.6 and the latest version 4.2.8.

In which browser did the problem occur

Not applicable

If possible, please include a link to a codesandbox with the reproduced problem

Not possible, the problem occurs upon project build

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

🤷

rtivital commented 2 years ago

Please send a minimal next project (github repo) that has this error

oasido commented 2 years ago

There you go: https://github.com/oasido/matay

docker compose up (development) works fine. docker compose -f docker-compose.production.yml up does not (it runs next build). Tried running next build as well without Docker, with no success.

Also tried npm run build & next build and it also didn't work 😶‍🌫️ It looks like I'm getting the same error.

rtivital commented 2 years ago

You can replace fragment with array, it should resolve the issue:

import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
import rtlPlugin from 'stylis-plugin-rtl';
import { ServerStyles, createStylesServer } from '@mantine/next';

export default class _Document extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
    const stylesServer = createStylesServer({ key: 'rtl', stylisPlugins: [rtlPlugin] });

    return {
      ...initialProps,
      styles: [
        initialProps.styles,
        <ServerStyles html={initialProps.html} server={stylesServer} />,
      ],
    };
  }

  render() {
    return (
      <Html dir="rtl" lang={this.props.locale}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

oasido commented 2 years ago

Thank you. I am facing build time issues and ran next lint. It complained about not giving <ServerStyles /> a key. I gave it a random key, and it stopped complaining.

./pages/_document.tsx
Error: Missing "key" prop for element in array  react/jsx-key

oasido commented 2 years ago

@rtivital Apart from the linter complaining that ServerStyles wants a key, everything works properly. What would be the best approach for the key, though? I just have it set as 1. Also, should I/you create a pull request?

rtivital commented 2 years ago

Documentation was updated

mantinedev / mantine