Unhelpful debug error

I’m trying to turn the output of generating a new managed workflow Expo project with tabs: https://snack.expo.io/@davitykale/tabs-for-days.

When I try to run it, however, I get the following error:

Unable to resolve module ‘module://navigation/AppNavigator.js’
Evaluating module://navigation/AppNavigator.js
Evaluating module://App.js.js
Loading module://App.js

I imagine it has something to do with trying to evaluate App.js.js, but I’m not sure how to go about fixing that.

Hi

Was that supposed to be “run the output”, rather than “turn the output”?

:neutral_face:, a bunch of stuff went wrong here:

I believe the problem has something to do with the fact that your navigation folder has a space at the end of the name. You can see this if you export the project and poke around locally:

/tmp/tabs-for-days$ ls -l navigation
ls: cannot access navigation: No such file or directory
/tmp/tabs-for-days$ ls -l navigation\ /
total 12
-rw-rw-r-- 1 michael michael  385 Oct 14 12:40 AppNavigator.js
-rw-rw-r-- 1 michael michael  473 Oct 14 12:40 AppNavigator.web.js
-rw-rw-r-- 1 michael michael 1621 Oct 14 12:40 MainTabNavigator.js

You can also see the space if you rename it in the snack.

In addition to that there are references to assets/images/robot-dev.png, assets/images/robot-prod.png and assets/fonts/SpaceMono-Regular.ttf which don’t exist. Also it seems that screens/LinksScreen.js has been renamed to screens/LinkScreen.js without updating the references.

If I fix all of those issues then I get an error about createStackNavigator having moved to react-navigation-stack. If I fix that I get a similar complaint about createBottomTabNavigator. These two are because the latest versions of React Navigation have moved some things around. I fixed them by doing this:

$ expo install react-native-stack
$ expo install react-native-tabs
$ git diff -- navigation/MainTabNavigator.js
diff --git navigation/MainTabNavigator.js navigation/MainTabNavigator.js
index db6195c..8259794 100644
--- navigation/MainTabNavigator.js
+++ navigation/MainTabNavigator.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Platform } from 'react-native';
-import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
 
 import TabBarIcon from '../components/TabBarIcon';
 import HomeScreen from '../screens/HomeScreen';

I also added the “platforms” section to app.json because projects exported from snack don’t seem to include those and I was getting a weird error about some icon not existing for “platform null”.

After all of that it works!

FWIW, I have expo-cli version 3.3.0 installed and I can run expo init, choose the tabs template, change to the project directory, run expo start, and it all works as expected.

1 Like

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