[v3] Unable to resolve "react-navigation-stack"

[mmdevcodes]

I installed the @3 version and I get the following error after running expo start:

Failed building JavaScript bundle.
Unable to resolve "react-navigation-stack" from "node_modules/react-navigation-shared-element/build/v4/createSharedElementStackNavigator.js"

My packages in package.json for reference:

Details

{
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "axios": "^0.21.1",
    "cheerio": "^1.0.0-rc.5",
    "dayjs": "^1.10.3",
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "html-entities": "^2.0.2",
    "inline-style-parser": "^0.1.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-cheerio": "^1.0.0-rc.4",
    "react-native-fit-image": "^1.5.5",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-paper": "^4.5.0",
    "react-native-ratings": "^7.3.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-shared-element": "0.7.0",
    "react-native-svg": "12.1.0",
    "react-native-web": "~0.13.12",
    "react-navigation-shared-element": "3",
    "react-query": "^3.5.14"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/cheerio": "^0.22.23",
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "^0.63.40",
    "@typescript-eslint/eslint-plugin": "^4.12.0",
    "@typescript-eslint/parser": "^4.12.0",
    "babel-plugin-inline-import": "^3.0.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.17.0",
    "eslint-config-universe": "^7.0.0",
    "husky": "^4.3.7",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "typescript": "~4.0.0"
  }
}

[CaryTanner]

I am having the same issues in case this gets resolved

[gaillota]

I tracked this error down and I think that's because the index.ts file exports both versions of the createStackNavigator

export { default as createSharedElementStackNavigator4 } from "./v4/createSharedElementStackNavigator";
export { default as createSharedElementStackNavigator } from "./createSharedElementStackNavigator";

and if you open the v4/createSharedElementStackNavigator.ts you can find those imports

import { ... } from "react-navigation";
import { ... } from "react-navigation-stack";

I don't know if we need some king of tree shaking but that seems odd to do in development 🤔

Waiting for someone with a greater knowledge... Le dot.

[CaryTanner]

This issues is actually fixed in the v5 branch of the this library- select the v5 branch and follow instructions from there

https://github.com/IjzerenHein/react-navigation-shared-element/tree/navigation-v5

[enestatli]

I tracked this error down and I think that's because the index.ts file exports both versions of the createStackNavigator

export { default as createSharedElementStackNavigator4 } from "./v4/createSharedElementStackNavigator";
export { default as createSharedElementStackNavigator } from "./createSharedElementStackNavigator";

and if you open the v4/createSharedElementStackNavigator.ts you can find those imports

import { ... } from "react-navigation";
import { ... } from "react-navigation-stack";

I don't know if we need some king of tree shaking but that seems odd to do in development

Waiting for someone with a greater knowledge... Le dot.

I try to change import location for the createStackNavigator, CardAnimationContext in the createSharedElementStackNavigator and works.

import { createStackNavigator, CardAnimationContext, } from "@react-navigation/stack";

[Drzaln]

I'm facing this issue too, how do i fix this?

[ssw101]

Thanks a lot to @enestatli it fixed my problem.

Following these steps may solve it for you too:

1) Go to your node modules and find 'react-navigation-shared-element' folder. 2) Navigate to node_modules/react-navigation-shared-element/build/v4 and open createSharedElementStackNavigator.ts file into your editor. 3) change the import FROM import { createStackNavigator, CardAnimationContext, } from "react-navigation-stack"; TO import { createStackNavigator, CardAnimationContext, } from "@react-navigation/stack"; 4) Close and rebuild app and the error should be gone

[IjzerenHein]

A new major version has just been released that addresses this problem. The earlier 3.0.0 prerelease was a bit clunky and required both react-navigation 4 and 5 to be included in your dependencies. This has been reworked and you can find instructions on usage and migration in the main README.

[fukemy]

im using lasted version v3.1.3 but still got this error??