shahednasser commented 4 months ago

Check the troubleshooting page before opening an issue!

Make sure your problem isn't already covered at the troubleshooting page: https://react-tooltip.com/docs/troubleshooting

Bug description

The Medusa documentation uses react-tooltip for all tooltips. We've had multiple users report an issue when using google translate (see here) where the website crashes with the error NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

After investigation, the error seems to result from google trying to replace the tooltip's content with the translated content.

Here's the error trace in development:

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insertBefore (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:11088:18)
    at insertOrAppendPlacementNode (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:23895:7)
    at commitPlacement (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:23839:9)
    at commitReconciliationEffects (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:24586:7)
    at commitMutationEffectsOnFiber (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:24342:9)
    at recursivelyTraverseMutationEffects (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:24268:7)
    at commitMutationEffectsOnFiber (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:24288:9)
    at recursivelyTraverseMutationEffects (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:24268:7)
    at commitMutationEffectsOnFiber (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:24288:9)
    at recursivelyTraverseMutationEffects (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:24268:7)

The above error occurred in the <span> component:

    at span
    at q (webpack-internal:///../../node_modules/react-tooltip/dist/react-tooltip.min.mjs:17:6453)
    at eval (webpack-internal:///../../node_modules/react-tooltip/dist/react-tooltip.min.mjs:17:16920)
    at Tooltip (webpack-internal:///../../packages/docs-ui/dist/esm/components/Tooltip/index.js:24:11)
    at CopyButton (webpack-internal:///../../packages/docs-ui/dist/esm/components/CopyButton/index.js:15:23)
    at InlineCode (webpack-internal:///../../packages/docs-ui/dist/esm/components/InlineCode/index.js:15:21)
    at MDXCode (webpack-internal:///./src/theme/MDXComponents/Code.tsx:13:96)
    at p
    at MDXContent (webpack-internal:///./content/create-medusa-app.mdx:491:72)
    at MDXProvider (webpack-internal:///../../node_modules/@mdx-js/react/lib/index.js:76:13)
    at MDXContent (webpack-internal:///../../node_modules/@docusaurus/theme-classic/lib/theme/MDXContent/index.js:17:23)
    ...

(Shortened the rest down for readability)

I confirmed that when i remove the use of react-tooltip in the Tooltip component, the issue doesn't occur anymore.

This is the content of the Tooltip component:

"use client"

import React, { useId } from "react"
import { Tooltip as ReactTooltip } from "react-tooltip"
import type { ITooltip } from "react-tooltip"
import clsx from "clsx"
import "react-tooltip/dist/react-tooltip.css"

export type TooltipProps = {
  text?: string
  tooltipClassName?: string
  html?: string
  tooltipChildren?: React.ReactNode
} & React.HTMLAttributes<HTMLSpanElement> &
  ITooltip

export const Tooltip = ({
  text = "",
  tooltipClassName = "",
  children,
  html = "",
  tooltipChildren,
  className,
  ...tooltipProps
}: TooltipProps) => {
  const elementId = useId()

  return (
    <>
      <span
        id={elementId}
        data-tooltip-content={text}
        data-tooltip-html={html}
        data-tooltip-id={elementId}
        className={className}
      >
        {children}
      </span>
      <ReactTooltip
        anchorId={elementId}
        // anchorSelect={elementId ? `#${elementId}` : undefined}
        className={clsx(
          "!border-medusa-border-base !border !border-solid",
          "!text-compact-x-small-plus !shadow-tooltip dark:!shadow-tooltip-dark !rounded-docs_DEFAULT",
          "!py-docs_0.4 !z-[399] hidden !px-docs_1 lg:block",
          "!bg-medusa-bg-base",
          "!text-medusa-fg-subtle",
          tooltipClassName
        )}
        wrapper="span"
        noArrow={true}
        positionStrategy={"fixed"}
        {...tooltipProps}
      >
        {tooltipChildren}
      </ReactTooltip>
    </>
  )
}

While this was reported on our documentation website running on Docusaurus, I was also able to reproduce it on our new documentation running on Next.js.

Version of Package v5.27.1

To Reproduce

Open the documentation website: https://docs.medusajs.com
Use google translate (on chrome) to translate to any other language)
Navigate to another page and hover over any inline code element (those have tooltips) and you'll see the error. Sometimes you only get to the error after a few tries.

Expected behavior The page shouldn't crash when using google translate

Screenshots

https://github.com/ReactTooltip/react-tooltip/assets/27354907/588e975e-11e4-41c4-9ef7-9c1bc39de35a

Desktop (please complete the following information if possible or delete this section):

OS: [e.g. iOS] MacOS
Browser [e.g. chrome, safari] Chrome
Version [e.g. 22]
Frameworks [e.g. React 18, Next.js 13]

Smartphone (please complete the following information if possible or delete this section):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22] 126.0.6478.127
Frameworks [e.g. React 18, Next.js 13] Happens on Docusaurus and Next.js 14

Additional context Add any other context about the problem here.

gabrieljablonski commented 4 months ago

This is a well-known React issue, that crops up every few months on different projects I'm working on. Definitely extremely annoying.

Usually simply disabling translation for the whole page works well enough, but definitely a bad idea for the medusa docs here.

I'll have more time to try to work out a more permanent solution when using react-tooltip, but until then, can you try the following and see if it works for you. It helps that you already have a wrapper component for the tooltip.

https://github.com/medusajs/medusa/blob/b368251ca3726ca13ba7b69e2ec899d9d0686e1d/www/packages/docs-ui/src/components/Tooltip/index.tsx#L30-L38

<span
  id={elementId}
  data-tooltip-content={text}
  data-tooltip-html={html}
  data-tooltip-id={elementId}
  className={clsx(className, "notranslate")}
  translate="no"
>
  {children}
</span>

Adding className="notranslate" + translate="no" attribute should disable browser translation for the tooltip anchor elements.

This might work well as a temporary fix, but we might be able to improve how the tooltip handles DOM changes internally.

Let us know what you find.

shahednasser commented 4 months ago

Hello! I tried your solution and I was only able to make it work by adding another wrapper span:

<span className={clsx(className, "notranslate")} translate="no"> // new
      <span
        id={elementId}
        data-tooltip-content={text}
        data-tooltip-html={html}
        data-tooltip-id={elementId}
      >
        {children}
      </span>
      <ReactTooltip
        anchorId={elementId}
        // anchorSelect={elementId ? `#${elementId}` : undefined}
        className={clsx(
          "!text-compact-x-small !shadow-elevation-tooltip dark:!shadow-elevation-tooltip-dark !rounded-docs_DEFAULT",
          "!py-docs_0.25 !z-[399] hidden !px-docs_0.5 lg:block",
          "!bg-medusa-bg-component",
          "!text-medusa-fg-base text-center",
          tooltipClassName
        )}
        wrapper="span"
        noArrow={true}
        positionStrategy={"fixed"}
        opacity={1}
        {...tooltipProps}
      >
        {tooltipChildren}
      </ReactTooltip>
    </span>

Will use this fix for now, but yes would be great if we can get it fixed.

Thanks for the help! Not sure if I should close the issue so feel free to do so if it's not necessary anymore.

github-actions[bot] commented 1 month ago

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

ReactTooltip / react-tooltip

[BUG] Error when using google translate #1206

Check the troubleshooting page before opening an issue!