[Next.js] Issue with `react-native-screens`

Expo SDK
1

I have an app that works perfectly well when using Expo for Web. I am running into build issues when I try to integrate with Next.js. Whenever I run yarn next build, I get the following build error:

./node_modules/react-native-screens/native-stack/views/NativeStackView.tsx
Attempted import error: 'ScreenStack' is not exported from 'react-native-screens'.

This is what I currently have as next.config.js:

const withTM = require("next-transpile-modules")([
  "react-native-screens",
  "@react-navigation/native",
  "react-native-screens/native-stack",
  "@react-navigation/stack",
]);

module.exports = withPlugins([
  withTM,
  withImages,
  withFonts,
  [
    withExpo,
    {
      projectRoot: __dirname,
    }
  ]
]);

I’m using React Navigation, and most of my navigators look something like this:

let Stack;
if (Platform.OS !== "web") {
  Stack = require("react-native-screens/native-stack").createNativeStackNavigator();
} else {
  Stack = require("@react-navigation/stack").createStackNavigator();
}

Would love any advice! Total Next.js noob here.

2

I’m actually seeing the same errors in dev mode. I’m wondering why native stack isn’t supported on web, too.

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.