React.lazy not working on RN 0.57.4

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i5-2435M CPU @ 2.40GHz
      Memory: 83.76 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.12.0 - /usr/local/bin/node
      npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 27.0.3, 28.0.2, 28.0.3
        API Levels: 26, 27, 28
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.6.0 => 16.6.0
      react-native: ^0.57.4 => 0.57.4
    npmGlobalPackages:
      create-react-native-app: 2.0.2

Description

I’ve tried to use React@16.6’s new lazy and Suspense components, but I couldn’t run it at all. The components will error, saying they’re undefined.

Reproducible Demo

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component, lazy, Suspense } from 'react'
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'

const LazyComponent = lazy(() => require('./SlowComponent'))

type Props = {}
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome to React Native!</Text>
                <Text>{React.version}</Text>
                <Suspense fallback={<ActivityIndicator />}>
                    <LazyComponent />
                </Suspense>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
})

It doesn’t really matter what SlowComponent contains, but here’s the code I’ve used to try it out:

import React from 'react'
import { Text } from 'react-native'


export default function() {
    let blah = 0
    for (let i = 0; i < 0xffffff; i++) {
        blah++
        blah *= i
    }

    return <Text>That was slow!</Text>
}

These result in an error, namely “Element type is invalid: expected a string (…) but got: undefined”. Even if Suspense has no children, or if it has a non-lazy child, the error is the same.

[jp928]

Seem like the bundler of react native doesn’t support dynamic import so as the lazy Api not working so far.

[Barbiero]

Actually I made a mistake here.

It seems I was using React@16.6.0-alpha.(something) but after clearing the cache it updated to React@16.6.0, and now the app no longer errors out.

However, the Suspense component still doesn’t render anything. I’ll investigate further.