Text with react-native TypeError: element.setAttribute is not a function

[jmatsushita]

Hi there,

When using the Text component in a react-native app (with expo-gl) I get the following error:

TypeError: element.setAttribute is not a function. (In 'element.setAttribute(eventName, 'return;')', 'element.setAttribute' is undefined)

isEventSupported
    react-dom.development.js:2484:18
<anonymous>
    react-dom.development.js:3828:15
<anonymous>
    react-dom.development.js:25213
loadModuleImplementation
    require.js:322:6
<global>
    index.js:36:7
loadModuleImplementation
    require.js:322:6
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:338646:45
loadModuleImplementation
    require.js:322:6
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:338533:26
loadModuleImplementation
    require.js:322:6
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:124908:53
loadModuleImplementation
    require.js:322:6
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:124791:51
loadModuleImplementation
    require.js:322:6
<global>
    AppEntry.js:5
loadModuleImplementation
    require.js:322:6
guardedLoadModule
    require.js:201:45
global code
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:409896:4

Simply importing the package seem to trigger the error.

[anutting]

Running into this issue on my react-native project as well. Is there a work-around while we wait for this to resolved?

[okbody39]

+1

[thomasjgrady]

Also having this issue attempting to use OrbitControls.

[p4tric]

any updates on this issue? Also getting this on my react-native project.

[CS6]

+1

[james5968]

+1

[drcmda]

i suspect that troika is using dom related stuff underneath maybe? @lojjic

as for orbitcontrols @thomasjgrady none of three's controls run in RN. expo has its own ports. same issue, threes controls depend on web api.

[lojjic]

Troika-three-text and its dependencies don't use the DOM at all, much less react-dom specifically which is the source of the error in the above stacktrace.

That said, if this error happens simply by importing Text, then it's clear there's something going on that's making it try to import react-dom when it shouldn't. I'm happy to dig in and see if I can figure it out, but like I said in protectwise/troika#45 I don't have any experience with RN. If someone could provide me a minimal RN testcase project that I could run and debug, that would help.

[drcmda]

oh right, i remember this issue. if this is a distinct problem im honestly scratching my head

import React, { Children, forwardRef, useMemo, useLayoutEffect, useState } from 'react'
import { Text as TextMeshImpl } from 'troika-three-text'
import { ReactThreeFiber, useThree } from 'react-three-fiber'

type Props = JSX.IntrinsicElements['mesh'] & {
  children: React.ReactNode
  color?: ReactThreeFiber.Color
  fontSize?: number
  maxWidth?: number
  lineHeight?: number
  letterSpacing?: number
  textAlign?: 'left' | 'right' | 'center' | 'justify'
  font?: string
  anchorX?: number | 'left' | 'center' | 'right'
  anchorY?: number | 'top' | 'top-baseline' | 'middle' | 'bottom-baseline' | 'bottom'
  clipRect?: [number, number, number, number]
  depthOffset?: number
  overflowWrap?: 'normal' | 'break-word'
  whiteSpace?: 'normal' | 'overflowWrap' | 'overflowWrap'
  outlineWidth?: number | string
  outlineColor?: ReactThreeFiber.Color
  debugSDF?: boolean
  onSync?: (troika: TextMeshImpl) => void
}

export const Text = forwardRef(({ anchorX = 'center', anchorY = 'middle', children, onSync, ...props }: Props, ref) => {
  const { invalidate } = useThree()
  const [troikaMesh] = useState(() => new TextMeshImpl())
  const [nodes, text] = useMemo(() => {
    let n: React.ReactNode[] = []
    let t = ''
    Children.forEach(children, (child) => {
      if (typeof child === 'string') {
        t += child
      } else {
        n.push(child)
      }
    })
    return [n, t]
  }, [children])
  useLayoutEffect(
    () =>
      void troikaMesh.sync(() => {
        invalidate()
        if (onSync) onSync(troikaMesh)
      })
  )
  return (
    <primitive
      dispose={undefined}
      object={troikaMesh}
      ref={ref}
      text={text}
      anchorX={anchorX}
      anchorY={anchorY}
      {...props}
    >
      {nodes}
    </primitive>
  )
})

[theoter]

Having the same issue. Anybody working on this? Impossible to get anything work on a device.

[skuteli]

This is due to react-dom problem, just evaluating it in RN causes error, to be exact it's this function being called directly:
https://github.com/facebook/react/blob/master/packages/react-dom/src/events/isEventSupported.js

Because drei imports it for <HTML> and for <Loader> via @react-spring/web, the package is evaluated and crashes RN app :/
What I do is I just copy the components I need from drei to my project; <Text> works nicely that way.
<OrbitControls> won't work anyway, as mentioned above.

We can think also about separating a drei package for React Native which will not include this components.

[joshuaellis]

released in v2.3.0-beta.1, please track in #221

[bbb169]

I got similary issue with this, could any body help?
yomotsu/camera-controls#468