cant find variable document on React Native

[BjoernRave]

Hey,

Iam trying to use this library inside react-native, however I keep getting

Can't find variable: Document

I have this notifcation component:

import { MaterialIcons } from '@expo/vector-icons'
import React, { useRef } from 'react'
import { useToaster } from 'react-hot-toast'
import { Animated, Text, View } from 'react-native'

const Toast = ({ t, updateHeight, offset }) => {
  const fadeAnim = useRef(new Animated.Value(0.5)).current // Initial value for opacity: 0
  const posAnim = useRef(new Animated.Value(-80)).current // Initial value for opacity: 0

  React.useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: t.visible ? 1 : 0,
      duration: 300,
      useNativeDriver: true,
    }).start()
  }, [fadeAnim, t.visible])

  React.useEffect(() => {
    Animated.spring(posAnim, {
      toValue: t.visible ? offset : -80,
      useNativeDriver: true,
    }).start()
  }, [posAnim, offset, t.visible])

  return (
    <Animated.View
      pointerEvents='none'
      style={{
        position: 'absolute',
        left: 0,
        right: 0,
        zIndex: 9999,
        alignItems: 'center',
        opacity: fadeAnim,
        transform: [
          {
            translateY: posAnim,
          },
        ],
      }}>
      <View
        onLayout={(event) =>
          updateHeight(t.id, event.nativeEvent.layout.height)
        }
        style={{
          marginTop: 50,
          backgroundColor: t.type === 'success' ? '#4caf50' : '#f44336',
          maxWidth: '80%',
          borderRadius: 30,
          flexDirection: 'row',
          alignItems: 'center',
          paddingVertical: 8,
          paddingHorizontal: 12,
        }}
        key={t.id}>
        <MaterialIcons
          name={t.type === 'success' ? 'check-circle-outline' : 'error-outline'}
          size={24}
          color='white'
        />
        <Text
          style={{
            color: '#fff',
            padding: 4,
            flex: 1,
            textAlign: 'center',
          }}>
          {t.message}
        </Text>
      </View>
    </Animated.View>
  )
}

const Notification = () => {
  const { toasts, handlers } = useToaster()

  return (
    <View
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
      }}>
      {toasts.map((t) => (
        <Toast
          key={t.id}
          t={t}
          updateHeight={handlers.updateHeight}
          offset={handlers.calculateOffset(t.id, {
            reverseOrder: false,
          })}
        />
      ))}
    </View>
  )
}

export default Notification

and I use that instead of <Toaster />

Apart from that the only imports I do look like this:

import { toast } from 'react-hot-toast'

[adhip94]

Hey,

Iam trying to use this library inside react-native, however I keep getting

Can't find variable: Document

I have this notifcation component:

import { MaterialIcons } from '@expo/vector-icons'
import React, { useRef } from 'react'
import { useToaster } from 'react-hot-toast'
import { Animated, Text, View } from 'react-native'

const Toast = ({ t, updateHeight, offset }) => {
  const fadeAnim = useRef(new Animated.Value(0.5)).current // Initial value for opacity: 0
  const posAnim = useRef(new Animated.Value(-80)).current // Initial value for opacity: 0

  React.useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: t.visible ? 1 : 0,
      duration: 300,
      useNativeDriver: true,
    }).start()
  }, [fadeAnim, t.visible])

  React.useEffect(() => {
    Animated.spring(posAnim, {
      toValue: t.visible ? offset : -80,
      useNativeDriver: true,
    }).start()
  }, [posAnim, offset, t.visible])

  return (
    <Animated.View
      pointerEvents='none'
      style={{
        position: 'absolute',
        left: 0,
        right: 0,
        zIndex: 9999,
        alignItems: 'center',
        opacity: fadeAnim,
        transform: [
          {
            translateY: posAnim,
          },
        ],
      }}>
      <View
        onLayout={(event) =>
          updateHeight(t.id, event.nativeEvent.layout.height)
        }
        style={{
          marginTop: 50,
          backgroundColor: t.type === 'success' ? '#4caf50' : '#f44336',
          maxWidth: '80%',
          borderRadius: 30,
          flexDirection: 'row',
          alignItems: 'center',
          paddingVertical: 8,
          paddingHorizontal: 12,
        }}
        key={t.id}>
        <MaterialIcons
          name={t.type === 'success' ? 'check-circle-outline' : 'error-outline'}
          size={24}
          color='white'
        />
        <Text
          style={{
            color: '#fff',
            padding: 4,
            flex: 1,
            textAlign: 'center',
          }}>
          {t.message}
        </Text>
      </View>
    </Animated.View>
  )
}

const Notification = () => {
  const { toasts, handlers } = useToaster()

  return (
    <View
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
      }}>
      {toasts.map((t) => (
        <Toast
          key={t.id}
          t={t}
          updateHeight={handlers.updateHeight}
          offset={handlers.calculateOffset(t.id, {
            reverseOrder: false,
          })}
        />
      ))}
    </View>
  )
}

export default Notification

and I use that instead of <Toaster />

Apart from that the only imports I do look like this:

import { toast } from 'react-hot-toast'

The reason why this issue is happening is because, react-hot-toast has a dependency on goober and goober internally uses the HTML Document object which is not present in react native..

I too want to use this library for my react-native projects...

[timolins]

Oh, you are right. I was able to reproduce this.

It seems like this was caused by 1.0.1, since it worked fine with 1.0.0.

useToaster shouldn't have any dependency on goober - I'll have a look.

[nandorojo]

Same thing here. @timolins thanks for taking a look!

My guess is it's caused by use of setup, but I'm not sure.

Adding sideEffects: false to package.json would help for tree shaking btw. It might also help with this, but not sure.

[BjoernRave]

Solved it for now by using https://github.com/ds300/patch-package and just removing everything goober related and rebuilding

[Palsson123]

Workaround:

change
import { useToaster } from 'react-hot-toast'
to
import { useToaster } from 'react-hot-toast/src/core/use-toaster'

and when creating a toast use:

import { toast } from 'react-hot-toast/src/core/toast'
toast('Hello Native', {
    icon: '🔥',
})

[timolins]

This is weird, I tried to use sideEffect: false but the issue remains.

I can't seem to find a reason why this should happen when comparing v1.0.0...v1.0.1 - this is the update when it stopped working.

[nandorojo]

Is react-native working in the latest version of react-hot-toast? Hoping to try it again.

[nandorojo]

The answer is no. However, 1.0.0 does work.

Snack: https://snack.expo.dev/@nandorojo/2fce9a

try changing 2.1.0 → 1.0.0 in package.json. That's the only solution.

[nandorojo]

@timolins I think one solution could be to add this to the the package.json:

{
  "react-native": "./src/index.ts"
}

This would direct native apps to go directly to the source code. This is common practice, since native apps transpile node modules.

To that end, there could be a file that only exports the headless components:

src/headless.ts

export ... // export all the non-web files here

And then in src/index.ts:

export * from './headless'

// then export the web-only things here

The final step here, would be to let users import from react-hot-toast/headless

Similar to how SWR does this, we could add an exports field to package.json:

{
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./headless": {
      "import": "./dist/headless.js",
      "require": "./dist/headless.js",
      "types": "./dist/headless.d.ts"
    },
  },
}

I'm not sure what your build script is doing, but it seems like the dist will output those files. Would you be open to adding this?

[timolins]

Great idea. Yes I'd be open for that. I'm using TSDX under the hood for the build. I think it should possible to get an output like this. I'm limited on time right now, would you mind submitting a PR? (If not I can have a look in ~2-3 weeks)

[adhip94]

@timolins @nandorojo Were you able to look into this?

[a11rew]

+1 for any progress on this?

[HZSamir]

Bump! I'd love to use this in my project. I've gotten used to it.