SDK ~48.0.1 100 lines of "react-navigation failed to find sourcemap" issue

[peterpme]

Minimal reproducible example

https://github.com/peterpme/expo-react-navigation-sourcemap-issue

Summary

By including a Tab Navigator, I am faced with 100 lines of source map errors (excerpt below).

Reproduction Steps:

• yarn create expo-app --template blank@beta sourcemap-issue
• upgrade react-native to 0.71.3 (as instructed by expo error)
• Install react-navigation and its requirements like react-native-screens, react-native-safe-area-context
• install web-required modules
• use react-navigation TabNavigator
  • happens with StackNavigator as well
• run yarn web

WARNING in ./node_modules/@react-navigation/elements/lib/module/Header/Header.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/peter/Projects/sourcemap-issue/node_modules/@react-navigation/elements/lib/src/Header.tsx' file: Error: ENOENT: no such file or directory, open '/Users/peter/Projects/sourcemap-issue/node_modules/@react-navigation/elements/lib/src/Header.tsx'

WARNING in ./node_modules/@react-navigation/elements/lib/module/Header/HeaderBackButton.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/peter/Projects/sourcemap-issue/node_modules/@react-navigation/elements/lib/src/HeaderBackButton.tsx' file: Error: ENOENT: no such file or directory, open '/Users/peter/Projects/sourcemap-issue/node_modules/@react-navigation/elements/lib/src/HeaderBackButton.tsx'

Environment

expo-env-info 1.0.5 environment info:
System:
OS: macOS 13.0.1
Shell: 5.9 - /opt/homebrew/bin/zsh
Binaries:
Node: 16.18.0 - ~/Library/Caches/fnm_multishells/88374_1676670625658/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 8.19.2 - ~/Library/Caches/fnm_multishells/88374_1676670625658/bin/npm
Watchman: 2023.02.06.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9477386
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
npmPackages:
@expo/webpack-config: ^18.0.1 => 18.0.1
expo: ~48.0.1 => 48.0.1
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.71.3 => 0.71.3
react-native-web: ~0.18.10 => 0.18.12
Expo Workflow: managed

[elitenas]

Getting the same issue

[frankcalise]

Also experiencing the same

Not sure if this is related, but under the OP's warnings about react-navigation, this also shows up for me:

WARNING in ./node_modules/expo-asset/build/ReactNativeCompatibleAssetsRegistry.js:7:13
Module not found: Can't resolve '@react-native/assets-registry/registry'
   5 | let registry: any | null = null;
   6 | try {
>  7 |   registry = require('@react-native/assets-registry/registry');
     |             ^
   8 | } catch {}
   9 | if (!registry) {
  10 |   try {

[brentvatne]

cc @EvanBacon @satya164

[younes0]

@peterpme after reading this, I use the metro bundler for web and ditched webpack (so no more of these errors).
For fast refresh support, I didn't see documentation out there yet, but these are the steps I did and it works flawlessly for me (and so much faster):

• add packages: yarn add --dev @expo/metro-runtime react-refresh
• put import "@expo/metro-runtime"; in your App.tsx (as seen here)

EDIT: you need to add react-refresh as well

[elitenas]

@younes0 I didn't need to add react-refresh 🤔 but switching to metro fixes the issue

[elitenas]

One bug to be aware of:

expo-constants don't work with metro yet

[EvanBacon]

Fast Refresh, LogBox errors, and Expo Constants are all enabled by default in Expo Router (where Metro web is developed).

We should still figure out what's going on with Webpack/React Navigation as Metro web is very early in development.

[carlosa54]

I think I found out why we're getting the warnings, the previous webpack.config.js was using stats: 'none' and now it uses stats: EXPO_DEBUG ? 'detailed' : 'errors-warnings',

Before:
https://github.com/expo/expo-cli/blob/7f7242bd93d19aaf1238d856f2f4187675953a98/packages/webpack-config/src/webpack.config.ts#L327-L328

After:
https://github.com/expo/expo-cli/blob/b5161c374039f1c9105f7a9582ab719d9ce7fa1e/packages/webpack-config/src/webpack.config.ts#L267-L268

[elitenas]

@EvanBacon i had to switch back to webpack because Constants.manifest returns an empty {} in expo 48.

It works fine in webpack so I know my configurations are correct

[carlosa54]

fwiw I can confirm that overriding the stats hides the warnings. I confirmed that the functionality of my app is not affected so this could be a workaround in the meantime to get rid of the warnings.

• npx expo customize webpack.config.js
• Modify file:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // Disable warnings
  config.stats = 'none'

  // Customize the config before returning it.
  return config;
};

[satya164]

There seems to be an issue with the path to the source file in our compiled code. I'll take a look.

[satya164]

This should be fixed if you upgrade to latest versions of @react-navigation packages.

[elitenas]

@satya164 this fixed a most of the warnings. I am still getting some warnings for @react-navigation/bottom-tabs and @react-navigation/stack

[satya164]

@elitenas can you post the warnings?

[satya164]

@elitenas what are the versions numbers of your @react-navigation packages?

[elitenas]

Ignore that.. i was looking at older logs on my console. This is fixed

[frankcalise]

This fixed my react-navigation warnings, however I still receive this one:

WARNING in ./node_modules/expo-asset/build/ReactNativeCompatibleAssetsRegistry.js:7:13
Module not found: Can't resolve '@react-native/assets-registry/registry'
   5 | let registry: any | null = null;
   6 | try {
>  7 |   registry = require('@react-native/assets-registry/registry');
     |             ^
   8 | } catch {}
   9 | if (!registry) {
  10 |   try {

Seems unrelated so I'll open a new issue, only occurs on web from what I can tell

[elitenas]

@frankcalise i do get the same log as well

[djaffer]

@frankcalise I am also getting this error.

[kreshnikalidema]

@satya164 the same problem is also with react-native-paper.

[satya164]

@satya164 the same problem is also with react-native-paper.

Please open an issue in Paper repo