[next-js] setImmediate is not defined

🐛 Bug Report

Environment

  Expo CLI 3.18.6 environment info:
    System:
      OS: macOS 10.15.2
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.13.1 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.12.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Xcode: 11.3/11C29 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~37.0.3 => 37.0.7 
      react: ~16.9.0 => 16.9.0 
      react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 
    npmGlobalPackages:
      expo-cli: 3.18.6

expo + next.js app (SDK 37)

Steps to Reproduce

Create a next.js project with expo, import react-native-reanimated, use it in a component, and you’ll see Error was not caught ReferenceError: setImmediate is not defined. in the browser console errors.

This also might be related to expo-web-browser being imported. I haven’t dug too deep, but I found the solution and will put it at the bottom of this issue.

Expected Behavior

App works.

Actual Behavior

App throws error:

Error was not caught ReferenceError: setImmediate is not defined

[nandorojo]

Solution

Polyfill setImmediate, which is used by react-native-reanimated.

yarn add setimmediate

In pages/_app.tsx, at the top of the file:

import 'setimmediate'

Here’s my pages/_app.tsx file, for reference:

// fix the setImmediate usage from react-native-reanimated
import 'setimmediate'

if (!global.setImmediate) {
  global.setImmediate = setTimeout
}

import React from 'react'
import { AppProps } from 'next/app'
import Providers from '../src/providers'
import styled from 'styled-components/native'
import { ThemeProps } from '../src/theme'
import Header from '../src/components/Header.web'


if (process.browser) {
  if (location.protocol !== 'https:' && process.env.NODE_ENV !== 'production') {
    console.warn(
      'This app requires HTTPS. Try cancelling this session and running yarn https.'
    )
  } else {
    const WebBrowser = require('expo-web-browser')
    WebBrowser.maybeCompleteAuthSession()
  }
}

const Wrapper = styled.View`
  flex: 1;
  background-color: ${({ theme }: ThemeProps) => theme.colors.background};
`

export default ({ Component, pageProps, router }: AppProps) => {
  return (
    <Providers>
      <Header />
      <Wrapper>
        <Component {...pageProps} key={router.route} />
      </Wrapper>
    </Providers>
  )
}

I figured I’d post this for anyone who finds themselves here. I bet I’ll also run into this again someday, so this is for future me as well.

[nandorojo]

Try this:

if (!global.setImmediate) {
  global.setImmediate = setTimeout
}

In pages/_app.tsx