Expo: "Unable to resolve module ./icons/PushPinSimpleSlash from phosphor-react-native/src/index"

[tconroy]

I'm seeing the below error in an Expo (SDK51) project:

Unable to resolve module ./icons/PushPinSimpleSlash from /Users/tom/Code/projectg/node_modules/phosphor-react-native/src/index.tsx: 

None of these files exist:
  * node_modules/phosphor-react-native/src/icons/PushPinSimpleSlash(.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs|.ios.scss|.native.scss|.scss|.ios.sass|.native.sass|.sass|.ios.css|.native.css|.css)
  * node_modules/phosphor-react-native/src/icons/PushPinSimpleSlash/index(.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs|.ios.scss|.native.scss|.scss|.ios.sass|.native.sass|.sass|.ios.css|.native.css|.css)
  923 | export { default as ProjectorScreen } from './icons/ProjectorScreen';
  924 | export { default as Pulse } from './icons/Pulse';
> 925 | export { default as PushPinSimpleSlash } from './icons/PushPinSimpleSlash';
      |                                                ^
  926 | export { default as PushPinSimple } from './icons/PushPinSimple';
  927 | export { default as PushPinSlash } from './icons/PushPinSlash';
  928 | export { default as PushPin } from './icons/PushPin';

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0

I did:

npx expo install react-native-svg -- --legacy-peer-deps
npx expo install phosphor-react-native -- --legacy-peer-deps

Here is how I am using the package:

import { View, Text, Pressable } from "@/styles";
import Rows from "phosphor-react-native/src/icons/Rows";

function NavButton(props: NavButtonProps) {
  return (
    <Pressable onPress={props.onPress}>
      <View>
        {props.icon && props.icon}
        <Text classes={["color:white", props.active && "color:red-100"]}>{props.label}</Text>
      </View>
    </Pressable>
  );
}

export function BottomNav() {
  return (<NavButton icon={<Rows />} />)
}

[tconroy]

this seems to be specific to using IconContext.Provider. If I remove that from wrapping my code in _layout.tsx, the error goes away.

[rsomlette]

Weirdly I just updated react-native-firebase packages to 20.1.0 and started having the same issue with a few icons. Rolled back and problem gone. I will also note I'm on phosphor 1.3 because 2.0 isn't working on web for some reason. There is definitely something strange in this lib.