IjzerenHein / react-navigation-shared-element

React Navigation bindings for react-native-shared-element 💫
https://github.com/IjzerenHein/react-native-shared-element
MIT License
1.27k stars 124 forks source link

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

Closed mmdevcodes closed 3 years ago

mmdevcodes commented 3 years ago

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 commented 3 years ago

I am having the same issues in case this gets resolved

gaillota commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

ssw101 commented 3 years ago

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

image

Screen Shot 2021-02-08 at 5 35 07 PM
IjzerenHein commented 3 years ago

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 commented 1 year ago

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