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

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

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 1
  • Comments: 21 (9 by maintainers)

Commits related to this issue

Most upvoted comments

@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

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

Please open an issue in Paper repo

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

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