Blitz is bricking the browser tab

[Lucheti]

What is the problem?

I'm using a UI library called "ant design" link: https://ant.design/ and im not really sure on whick version did this change but i was using blitz@0.42.4 (latest version to date) and a lot of interactions with this UI library ended up on the browser tab bricked, totally unresponsive.

This happened some times when using the Select input but the one that was super consistent overall was using the Tooltip whenever i hovered over the tooltip the hole page would just go unresponsive.

Of course this is not a huge bug, but since i've used this ui library in mutiple react projects and never had this kind of problem it makes me think that there might be other ui libraries that allso have this problem

Paste all your error logs here:

It outputs nothing, it just bricks the browser tab

Paste all relevant code snippets here:

This is the tooltip component i was using

import React, { useCallback } from "react"
import { Order } from "db"
import { CheckCircleOutlined, ClockCircleOutlined } from "@ant-design/icons"
import { Button, Divider, Space, Tag, Tooltip } from "antd"
import classes from "./tags.module.scss"
import { Link, Routes, useRouter } from "blitz"

export const Tags = ({ order }: { order: Order }) => {
  const pickingConfig = order.picking
    ? { color: "green", text: "Picked" }
    : { color: "yellow", text: "No picking", icon: <ClockCircleOutlined /> }

  return (
    <Space>
      <Tag icon={pickingConfig?.icon} color={pickingConfig.color}>
        {pickingConfig.text}
      </Tag>
      <InvoiceTag order={order} />
    </Space>
  )
}

const InvoiceTag = ({ order }: { order: Order }) => {
  const router = useRouter()
  const goToCreateInvoice = useCallback(
    () => router.push(Routes.NewInvoice({ orderId: order.id })),
    [router]
  )

  const InvoiceTooltipContent = () => (
    <div className={classes.tooltip}>
      <Divider className={classes.doneDivider} orientation={"left"}> Done </Divider>
      <p>
        This order has been invoiced!
        check the invoice <Link href={Routes.ShowInvoicePage({ invoiceId: (order as any)?.invoice?.id })}>here</Link>
      </p>
    </div>
  )

  if (order.invoiced)
    return (
      <Tooltip title={<InvoiceTooltipContent/>}>
        <Tag icon={<CheckCircleOutlined />} color={"green"}>
          Invoiced
        </Tag>
      </Tooltip>
    )

  const NoInvoiceTooltipContent = () => (
    <div className={classes.tooltip}>
      <Divider className={classes.pendingDivider} orientation={"left"}>
        {" "}
        Pending{" "}
      </Divider>
      <p> This order has not been invoiced yet </p>
      <Button type={"primary"} onClick={goToCreateInvoice}>
        Create Invoice
      </Button>
    </div>
  )

  return (
    <Tooltip title={<NoInvoiceTooltipContent/>}>
      <Tag icon={<ClockCircleOutlined />} color={"yellow"}>
        No invoice
      </Tag>
    </Tooltip>
  )
}

What are detailed steps to reproduce this?

1.install antd

2. copy paste the component provided
3. run blitz dev and hover over the tag with the tooltip.

Run blitz -v and paste the output here:

macOS Big Sur | darwin-x64 | Node: v12.22.1

blitz: 0.40.0 (global)
blitz: 0.42.4 (local)

  Package manager: npm 
  System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 2.63 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: Not Found
    npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 3.4.2 => 3.4.2 
    blitz: 0.39.0 => 0.39.0 
    prisma: 3.3.0 => 3.3.0 
    react: alpha => 18.0.0-alpha-a44a7a2a3-20211111 
    react-dom: alpha => 18.0.0-alpha-a44a7a2a3-20211111 
    typescript: ~4.3 => 4.3.5 ```

### Please include below any other applicable logs and screenshots that show your problem:

_No response_

[beerose]

@Lucheti could you edit the issue and add some markdown formatting? 🙏🙏

[Lucheti]

@Lucheti could you edit the issue and add some markdown formatting? 🙏🙏

i didn't realize that using "<>" symbols would mess the whole markdown, sry for that

[beerose]

One of the problems is that you have components inside of components. That can cause rendering issues as React is unable to reconcile the rendering of these components. They will be treated as new components every time. Consider this demo: https://codesandbox.io/s/react-nested-functional-components-lvl85?file=/src/App.tsx — you can see what happens with the first input vs the second one.

That might not be the cause of this issue, but it's worth refactoring it anyway, and maybe the issue will be solved as the result.

[Lucheti]

i'm well aware of that but even if i tried to pass on a string instead of the component the window would brick anyways and it's not just with that component, Trying to use the <Select/> sometimes when clicking for options the tab would brick too.

[Lucheti]

@flybayer @beerose UPDATE: I've been trying to reproduce this bug without blitz and it just doesn't want to pop out, and the fact that neither on a pure react project nor a nextjs project did this happen made me think it was something to do with blitz. After reading through the whole blitz documentation, pretty much at the very end while reading about the blitz config something caught my eye... React concurrent mode is enabled by default in blitz...

Well it turns out that that some libraries are not compatible with concurrent mode, and some specific updates that might be linked to react concurrent mode are just bricking the tab.

once i disabled concurrent mode setting it just works as expected.

code snippet: module.exports = { experimental: { reactRoot: false, }, }

I'm closing this issue and i'm really sorry if it took any time for any supporter to doing research on the issue. Guys, the project is amazing and im really enjoying it!!

I have one final question, whenever i disable concurrent mode, does it go to legacy mode or blocking mode? here's a link to the react documentation where those states are explained: https://reactjs.org/docs/concurrent-mode-adoption.html#migration-step-blocking-mode

[flybayer]

@Lucheti ah yeah. Sorry about that! it goes to "legacy"

[amantiwari1]

which file to be add module.exports = { experimental: { reactRoot: false, }, }? is ant design working in blitz or nextjs?

[amantiwari1]

@flybayer @Lucheti @beerose

[beerose]

which file to be add module.exports = { experimental: { reactRoot: false, }, }? is ant design working in blitz or nextjs?

In blitz.config.ts. Yes, ant design should work with Next/Blitz.