ERESOLVE installation problem

[Mario2280]

Hello i try to use react-native-pixi in my simple androind app. I use nodejs 18.12.1
I use next commands:
npx create-expo-app AwesomeProject
cd AwesomeProject
npm install @flyskywhy/react-native-browser-polyfill @flyskywhy/react-native-gcanvas
at this point i get the error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6" from @flyskywhy/[email protected]
npm ERR! node_modules/@flyskywhy/react-native-browser-polyfill
npm ERR! @flyskywhy/react-native-browser-polyfill@"" from the root project
npm ERR! @flyskywhy/react-native-browser-polyfill@"^1.0.8" from @flyskywhy/[email protected]
npm ERR! node_modules/@flyskywhy/react-native-gcanvas
npm ERR! @flyskywhy/react-native-gcanvas@"" from the root project
npm ERR! 1 more (@flyskywhy/react-native-browser-polyfill)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I can't figure out what I'm doing wrong. When i use legasy-peer-deps
I got error
Unable to resolve "abab" from "node_modules@flyskywhy\react-native-gcanvas\packages\gcanvas\src\context\webgl\RenderingContext.js"gContext.js"

[flyskywhy]

Please npm install abab first.

Thanks for reminding this 😝 , I'll add "abab" into my package.json later.

[Mario2280]

@flyskywhy Yes but

nvm use 18.12.1
npx create-expo-app PixiCanvasInReactNative
cd PixiCanvasInReactNative
npm install @flyskywhy/react-native-gcanvas --save
cd .\node_modules@flyskywhy\react-native-gcanvas\packages\gcanvas
npm i abab
Then i add your strings in settings.gradle. I found two such files, I don’t know which one I need, so I added them to both(Screen 1)

The same with file react-native.config.js(3 files I put text in each)

After this I try to run to make sure everything works by using command npm run android

import {  View } from 'react-native';
import {GCanvasView} from '@flyskywhy/react-native-gcanvas';

export default function App() {
  return (
    <View>
    <GCanvasView/>
    </View>
  );
}

And after building I got this error(and after rebuild too)

I hope that you will help me launch this in expo, because many people are now starting development from it

[flyskywhy]

Please ref to flyskywhy/snakeRN@33530fa

[Mario2280]

@flyskywhy sorry, but it doesn't work, I tried to install this repository too, but I ran into a bunch of errors that I tried to fix and ended up stuck. Tried to use 8 and 11 Java. When trying to run npm run android
Task :expo-permissions:compileDebugKotlin FAILED
Task :android:adapters:gcanvas_imageloader_fresco:javaPreCompileDebug FAILED
It seems to me that it will be difficult for people to use the repository you wrote following the installation instructions. Especially if as a result it is impossible to start. Сould you update the installation instructions and indicate which build tools and environment variables you used?

[flyskywhy]

v3.1.1 of https://github.com/flyskywhy/snakeRN fix the build error here, you can try v3.1.1

PS: for I also fix a TypeError: context.save is not a function. (In 'context.save()', 'context.save' is undefined) in a dependency "@flyskywhy/react-native-browser-polyfill": "^1.0.4" of @flyskywhy/react-native-gcanvas, so you should remove node_modules/ and npm install all automatically again, or, just npm install @flyskywhy/[email protected] or npm install @flyskywhy/[email protected] manually.

[Mario2280]

@flyskywhy Ok, this time I did everything you said above, also during the build I had to add the local.properties file to avoid the

SDK location not found error. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable

and set environment variable ANDROID_HOME.
Also I used NDK 20.1.5948944 and installed some stuff

Then i got this

BUT
When i opened your app my device show this error

error: TypeError: Cannot read properties of undefined (reading 'transformFile')
    at E:\snakeRN\node_modules\metro\src\Bundler.js:91:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (E:\snakeRN\node_modules\metro\src\Bundler.js:14:24)
    at _next (E:\snakeRN\node_modules\metro\src\Bundler.js:34:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[Sat Dec 03 2022 18:28:29.375]  BUNDLE  ./index.android.js

error: TypeError: Cannot read properties of undefined (reading 'transformFile')
    at E:\snakeRN\node_modules\metro\src\Bundler.js:91:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (E:\snakeRN\node_modules\metro\src\Bundler.js:14:24)
    at _next (E:\snakeRN\node_modules\metro\src\Bundler.js:34:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[Sat Dec 03 2022 18:29:27.387]  BUNDLE  ./index.android.js

error: TypeError: Cannot read properties of undefined (reading 'transformFile')
    at E:\snakeRN\node_modules\metro\src\Bundler.js:91:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (E:\snakeRN\node_modules\metro\src\Bundler.js:14:24)
    at _next (E:\snakeRN\node_modules\metro\src\Bundler.js:34:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I log arguments with which an error occurs

░░░░░░░░░░░░░░░░ 0.0% (0/1)"E:\\snakeRN\\index.android.js" <-filePath
 {
  "customTransformOptions": {},
  "dev": true,
  "hot": true,
  "inlinePlatform": true,
  "minify": false,
  "platform": "android",
  "experimentalImportSupport": false,
  "unstable_disableES6Transforms": false,
  "nonInlinedRequires": [
    "React",
    "react",
    "react-native"
  ],
  "type": "module",
  "inlineRequires": false
} <- transformOptions

Sometimes when I try to rebuild the project, instead of this error, I get a white screen with a green text above "Reloading" or "loading from localhost:8081"

[flyskywhy]

Please use node v10.22.1 for now which I'm using, I will try node 17.3.0 later to debug some.

[Mario2280]

@flyskywhy Ok I overshot a bit and am using 10.24.1. Oh my god, this is finally working. Great!!!!
I also wanted to ask, I'm just a little newbie, the old version of the node does not restrict me from using your library with the latest react-native? Also can i use the newest version of pixi.js and all his features or 4.7 is the ceiling?

[flyskywhy]

Software stuffs like node, react-native, pixi or any others are growing their version, no one can tracing all versions persionally, that's why opensource community like github make sense, e.g. with your feed back, I know that latest node can't work with my snakeRN again and I will try debug or desribed it in README.md. So you can try newest version of pixi.js and tell me the result 😋

[Mario2280]

@flyskywhy Fine! I hope you can offer to update this library for the latest version of react-native and nodejs support

[flyskywhy]

@flyskywhy Ok I overshot a bit and am using 10.24.1. Oh my god, this is finally working. Great!!!! I also wanted to ask, I'm just a little newbie, the old version of the node does not restrict me from using your library with the latest react-native? Also can i use the newest version of pixi.js and all his features or 4.7 is the ceiling?

Breaking: Any APP now can be based on pixi.js @4, @5, @6 or @7 directly without react-native-pixi as described in react-native-pixi@3, you can easily follow the comments in example https://github.com/flyskywhy/GCanvasRNExamples/blob/master/app/components/Pixi.js to use any version of pixi.