a-tarasyuk / create-rx-app

ReactXP project generator for building your next awesome cross-platform (Web, Android, iOS, Windows) app

---

👉 Buy Me a Coffee ☕

create-rx-app's Issues

App crash on Android device, with error "libgnustl_shared.so is 32-bit instead of 64-bit"

App created with create-rx-app will crash immediately upon launch on a physical Android device. The run log in Android Studio shows the error message "libgnustl_shared.so is 32-bit instead of 64-bit".

Expected the app to run on a physical Android device without any problem, just like running in the simulator.

Environment set up

• create-rx-app: 0.4.15
• react-native-cli: 2.0.1
• react-native: 0.57.8
• node: v10.15.0
• npm: 6.7.0
• yarn: 1.13.0
• Android Studio 3.3, Build #AI-182.5107.16.33.5199772, built on December 25, 2018
• JRE: 1.8.0_152-release-1248-b01 x86_64
• JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
• macOS: 10.14.2
• Physical device 1: Sony E6853 (Android 7.1.1, API 25)
• Physical device 2: LGE LG-H815 (Android 6.0, API 23)

I am able to run Android apps from other projects on these two physical devices via Android Studio or react-native run-android, so the problem is unlikely to be caused by my environment set up. Projects whose Android app can be successfully run on both physical devices:

• https://github.com/Microsoft/reactxp/tree/master/samples/TodoList at commit ea76485f51b668d0f3659a130ee6761410f4b945
• Any project created with react-native init

Steps to reproduce the error

1. create-rx-app fresh
2. cd fresh
3. connect android device with debugging enabled, adb devices to confirm that the device is detected.
4. adb reverse tcp:8081 tcp:8081
5. yarn start:rn-dev-server
6. Open "./android" in Android Studio, and wait for the configuration to load completely.
7. Press the green triangular "Run" button.
8. Choose the physical device.
9. The app starts on the device, showing "Loading from localhost:8081" with a green background.
10. The packager, Metro Bundler, starts to build and serve the bundle.
11. Once the serving of the bundle reached 100%, the app will crash.

Note: This freshly created reactxp app can run successfully on Android simulator without any problems.

Run log from Android Studio

02/26 15:01:23: Launching app
$ adb install-multiple -r -t /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/dep/dependencies.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/slices/slice_6.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/slices/slice_0.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/slices/slice_5.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/slices/slice_1.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/slices/slice_2.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/slices/slice_3.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/slices/slice_4.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/slices/slice_9.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/slices/slice_7.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/split-apk/debug/slices/slice_8.apk /Users/gabe/pm/react-native/rx/fresh/android/app/build/intermediates/instant-run-apk/debug/app-debug.apk 
Split APKs installed in 3 s 839 ms
$ adb shell am start -n "com.fresh/com.fresh.MainActivity" -a android.intent.action.MAIN -c android.intent.category.LAUNCHER
Client not ready yet..Waiting for process to come online
Connected to process 25916 on device sony-e6853-CB5A2BF4PC
Capturing and displaying logcat messages from application. This behavior can be disabled in the "Logcat output" section of the "Debugger" settings page.
D/ReactNative: ReactInstanceManager.onJSBundleLoadedFromServer()
D/ReactNative: ReactInstanceManager.recreateReactContextInBackground()
    ReactInstanceManager.runCreateReactContextOnNewThread()
D/SoLoader: About to load: libreactnativejni.so
    libreactnativejni.so found on /data/data/com.fresh/lib-main
D/SoLoader: Loading lib dependencies: [libglog_init.so, libyoga.so, libprivatedata.so, libfb.so, libfolly_json.so, libjsc.so, libglog.so, libgnustl_shared.so, libandroid.so, liblog.so, libstdc++.so, libm.so, libc.so, libdl.so]
    About to load: libglog_init.so
    libglog_init.so found on /data/data/com.fresh/lib-main
D/SoLoader: Loading lib dependencies: [libglog.so, libgnustl_shared.so, liblog.so, libstdc++.so, libm.so, libc.so, libdl.so]
    About to load: libglog.so
    libglog.so found on /data/data/com.fresh/lib-main
D/SoLoader: Loading lib dependencies: [libgnustl_shared.so, libstdc++.so, libm.so, libc.so, libdl.so]
    About to load: libgnustl_shared.so
    libgnustl_shared.so found on /data/data/com.fresh/lib-main
D/SoLoader: Loading lib dependencies: [libm.so, libc.so, libdl.so]
    About to load: libm.so
    libm.so not found on /data/data/com.fresh/lib-main
D/SoLoader: libm.so not found on /data/app/com.fresh-1/lib/arm64
    libm.so not found on /system/vendor/lib
    libm.so found on /system/lib
    libm.so loaded implicitly
    Loaded: libm.so
    About to load: libc.so
    libc.so not found on /data/data/com.fresh/lib-main
    libc.so not found on /data/app/com.fresh-1/lib/arm64
    libc.so not found on /system/vendor/lib
    libc.so found on /system/lib
    libc.so loaded implicitly
    Loaded: libc.so
D/SoLoader: About to load: libdl.so
    libdl.so not found on /data/data/com.fresh/lib-main
    libdl.so not found on /data/app/com.fresh-1/lib/arm64
    libdl.so not found on /system/vendor/lib
    libdl.so found on /system/lib
    libdl.so loaded implicitly
    Loaded: libdl.so
E/SoLoader: Error when loading lib: dlopen failed: "/data/data/com.fresh/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit lib hash: 38a149cf3f94c06f35444ea1c5280541 search path is /data/app/com.fresh-1/lib/arm64
    couldn't find DSO to load: libgnustl_shared.so caused by: dlopen failed: "/data/data/com.fresh/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit
    couldn't find DSO to load: libglog.so caused by: couldn't find DSO to load: libgnustl_shared.so caused by: dlopen failed: "/data/data/com.fresh/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit
    couldn't find DSO to load: libglog_init.so caused by: couldn't find DSO to load: libglog.so caused by: couldn't find DSO to load: libgnustl_shared.so caused by: dlopen failed: "/data/data/com.fresh/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit
    couldn't find DSO to load: libreactnativejni.so caused by: couldn't find DSO to load: libglog_init.so caused by: couldn't find DSO to load: libglog.so caused by: couldn't find DSO to load: libgnustl_shared.so caused by: dlopen failed: "/data/data/com.fresh/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit
E/AndroidRuntime: FATAL EXCEPTION: Thread-4
    Process: com.fresh, PID: 25916
    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libreactnativejni.so caused by: couldn't find DSO to load: libglog_init.so caused by: couldn't find DSO to load: libglog.so caused by: couldn't find DSO to load: libgnustl_shared.so caused by: dlopen failed: "/data/data/com.fresh/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit
        at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:703)
        at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:564)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:500)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:455)
        at com.facebook.react.bridge.ReactBridge.staticInit(ReactBridge.java:18)
        at com.facebook.react.bridge.NativeMap.<clinit>(NativeMap.java:19)
        at com.facebook.react.bridge.JSCJavaScriptExecutorFactory.create(JSCJavaScriptExecutorFactory.java:21)
        at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:917)
        at java.lang.Thread.run(Thread.java:761)
Application terminated.

Fails to create app due to peer dependency issue

When I try to run this it creates a folder with a package.json inside but nothing else, and outputs the following:

npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"6.1.0" from the root project
npm ERR!   peer eslint@"^5.0.0 || ^6.0.0 || ^7.0.0" from @typescript-eslint/[email protected]
npm ERR!   node_modules/@typescript-eslint/parser
npm ERR!     dev @typescript-eslint/parser@"3.2.0" from the root project
npm ERR!     peer @typescript-eslint/parser@"^3.1.0" from [email protected]
npm ERR!     node_modules/eslint-plugin-reactxp
npm ERR!       dev eslint-plugin-reactxp@"0.1.10" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^7.1.0" from [email protected]
npm ERR! node_modules/eslint-plugin-reactxp
npm ERR!   dev eslint-plugin-reactxp@"0.1.10" from the root project
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.

Neither of the suggested flags seem to have any effect. Upgrading npm to latest version doesn't help. Tried on linux and windows with the same result, so I don't think it's a matter of local environment.

Update webpack

create-rx-app creates an app but throws Babel Errors

$ yarn start:web
yarn run v1.15.2
$ cross-env platform=web webpack-dev-server --config=web/webpack/dev.js --progress --colors --mode=development
Starting type checking service...
10% building 1/1 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:9999/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/sedote.sossou/sourceCode/yamahaPoc/src
11% building 11/15 modules 4 active /Users/sedote.sossou/sourceCode/yamahaPoc/node_modules/webpack-dev-server/client/utils/sendMessage.jsℹ ｢wdm｣: wait until bundle finished: /
98% after emittingType checking in progress...
✖ ｢wdm｣: 37 modules

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/sedote.sossou/sourceCode/yamahaPoc/src/index.tsx: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/Users/sedote.sossou/sourceCode/yamahaPoc/node_modules/@babel/preset-env/lib/index.js")
at getPlugin (/Users/sedote.sossou/sourceCode/yamahaPoc/node_modules/@babel/preset-env/lib/index.js:67:11)
at /Users/sedote.sossou/sourceCode/yamahaPoc/node_modules/@babel/preset-env/lib/index.js:258:62
at Array.map ()
at /Users/sedote.sossou/sourceCode/yamahaPoc/node_modules/@babel/preset-env/lib/index.js:258:43
at /Users/sedote.sossou/sourceCode/yamahaPoc/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
at /Users/sedote.sossou/sourceCode/yamahaPoc/node_modules/@babel/core/lib/config/full.js:199:14
at Generator.next ()
at Function. (/Users/sedote.sossou/sourceCode/yamahaPoc/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
at Generator.next ()
at step (/Users/sedote.sossou/sourceCode/yamahaPoc/node_modules/gensync/index.js:254:32)
ℹ ｢wdm｣: Failed to compile.
No type errors found
Version: typescript 3.8.3
Time: 2597ms

Support for Dynamic Imports

Hi, does your project generator support "dynamic imports", similar to what the ReactXP TodoList sample does for fonts and images:
https://github.com/Microsoft/reactxp/tree/be7d50db098a205ffeec74f617b30d14d832e7b8/samples/TodoList/src/ts/modules/fonts
https://github.com/Microsoft/reactxp/blob/be7d50db098a205ffeec74f617b30d14d832e7b8/samples/TodoList/src/ts/modules/README.md
If not, do you have a suggestion on how to do code splitting when using create-rx-app?
Thanks!

Project fails to run on Win10

Hi, I am trying to create a ReactXP project on an actual Win10 machine. I installed VS 2019 Community and all requirements for creating react-native-windows projects (successfully tested following https://microsoft.github.io/react-native-windows/docs/getting-started). I use npx create-rx-app testrxp to create the project. But neither npm run start:web nor npm run start:windows successfully launch. I am using:

node --version: v12.9.1 (had to downgrade because of compiling issues with react-native-windows)
npm --version: 6.10.2

Is there a proven setup for using create-rx-app on Win10?

Thanks.

C:\testrxp>npm run start:web

> [email protected] start:web C:\testrxp
> cross-env platform=web webpack-dev-server --config=web/webpack/dev.js --progress --colors --mode=development

Starting type checking service...
10% building 1/1 modules 0 activei ｢wds｣: Project is running at http://localhost:9999/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\testrxp\src
11% building 9/15 modules 6 active C:\testrxp\node_modules\webpack-dev-server\client\utils\createSocketUrl.jsi ｢wdm｣: wait until bundle finished: /
98% after emittingType checking in progress...
× ｢wdm｣:    37 modules

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\testrxp\src\index.tsx: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:\\testrxp\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at getPlugin (C:\testrxp\node_modules\@babel\preset-env\lib\index.js:67:11)
    at C:\testrxp\node_modules\@babel\preset-env\lib\index.js:258:62
    at Array.map (<anonymous>)
    at C:\testrxp\node_modules\@babel\preset-env\lib\index.js:258:43
    at C:\testrxp\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at C:\testrxp\node_modules\@babel\core\lib\config\full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (C:\testrxp\node_modules\@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (<anonymous>)
    at step (C:\testrxp\node_modules\gensync\index.js:254:32)
i ｢wdm｣: Failed to compile.
No type errors found
Version: typescript 3.8.3
Time: 8817ms

C:\testrxp>npm run start:windows

> [email protected] start:windows C:\testrxp
> yarn rn-cli run-windows

yarn run v1.22.0
$ node scripts/react-native.js run-windows
Restoring NuGet packages
Error parsing solution file at C:\testrxp\windows\testrxp.sln: Exception has been thrown by the target of an invocation.
Failed to restore the NuGet packages
Done in 4.58s.

Various errors while trying to run Windows app

In Windows 10 (running in VirtualBox), various errors will be encountered while trying to run the Windows app for any of the samples or a bare app freshly created by create-rx-app, version 0.4.14.

Despite two days of trials and errors, I have not succeeded in building a windows app created from create-rx-app, is it possible to make the process as error-free and robust as the process at https://github.com/Microsoft/react-native-windows/blob/master/docs/GettingStarted.md ?

Or provide a npm module of this project that can be added to an existing project that was created with react-native init?

Error 1

Attempt by security method 'System.Reactive.Concurrency/CoreDispatcherScheduler..ctor(Windows.UI.Core.CoreDispatcher)' to access security critical type 'Windows.UI.Core.CoreDispatcher' failed.

Assembly 'System.Reactive, Version=4.0.0.0, Culture=neutral, PublicKeyToken=' is marked with the AllowPartiallyTrustedCallersAttribute, and uses the level 2 security transparency model. Level 2 transparency causes all methods in AllowPartiallyTrustedCallers assemblies to become security transparent by default, which may be the cause of this exception.

See picture

Error 2

Application rxphelloworld has not been registered.

Hint: This error often happens when you're running the packager (local dev server) from a wrong folder. For example you have multiple apps and the packager is still running for the app you were working on before. If this is the case, simply kill the old packager instance (e.g. close the packager terminal window) and start the packager in the correct app folder (e.g. cd into the app folder and run 'npm start').

This error can also happen due to a require() error during initialization or failure to call AppRegistry.registerComponent.

See picture

Steps to produce the errors

1. $ git clone https://github.com/Microsoft/reactxp.git
   • commit baa599957e6dca5a1c33cb154f15fcb2105b1d4e
2. $ cd reactxp/samples/hello-world-js/
3. $ yarn install
4. $ npm run start:windows or $ react-native run-windows
   • This will fail to build with the following error messages in command prompt:
     • Cannot import the keyfile RXPHelloWorld_TemporaryKey.pfx
     • A certificate with thumbprint that is specified in the project cannot be found in the certificate store.
     • The certificate specified is not valid for signing.
5. To overcome the errors in step 4, $ react-native windows and answer "y" to every question prompt.
6. $ npm run start:windows or $ react-native run-windows
   • Metro bundler will try to run, but encounter error message ".packager.bat" is not recognised as an internal or external command, operable program or batch file.
     1. Press "ctrl+c" to bypass this error.
     2. Metro bundler load the dependency graph for a long time, but never show that it is "done".
   • The app will show error message "Unable to load JS bundle".
7. Restart Windows
8. $ cd reactxp/samples/hello-world-js/
9. $ npm run start:windows or $ react-native run-windows
   • Metro bundler will bypass the ".packager.bat" by itself and show "done" in loading the dependency graph rather fast.
   • The app will encounter Error 1.
10. Restart Windows
11. $ cd reactxp/samples/hello-world-js/
12. $ react-native windows and answer "y" to every question prompt.
13. $ npm run start:windows or $ react-native run-windows
    • Metro bundler will bypass the ".packager.bat" by itself and show "done" in loading the dependency graph rather fast.
    • The app will encounter Error 2.

Prove environment setup by successfully building app from react-native-init

To prove that my environment is setup properly and functional, I can successfully run a bare app created by following the instruction on https://github.com/Microsoft/react-native-windows/blob/master/docs/GettingStarted.md :

1. $ react-native init --version 0.57.7 BareApp
2. $ cd BareApp
3. $ yarn add rnpm-plugin-windows --dev
4. $ react-native windows
5. $ react-native run-windows

Environment Setup

• Host OS: macOS Mojave Version 10.14.2
• Guest OS: Windows 10 Enterprise (Evaluation - Build 201812) VM in VirtualBox, downloaded from https://developer.microsoft.com/en-us/windows/downloads/virtual-machines, which includes:
  • Windows 10 Enterprise October 2018 Update Evaluation
  • Visual Studio 2017 version 15.9 with the UWP, desktop C++, and Azure workflows enabled
  • Visual Studio Code
  • Windows Template Studio extension
  • Windows UWP samples (latest)
  • Windows Subsystem for Linux enabled with Ubuntu installed
  • Developer mode and bash enabled
• Node v10.15.0 and npm 6.4.1, installed via nvm
• react-native-cli 2.0.1
• react-native 0.57.7
• git version 2.20.1.windows.1
• yarn 1.13.0
• create-rx-app 0.4.14

---

Reposted from microsoft/reactxp#1011

(reactxp) create-rx-app: App Could not find plugin "proposal-numeric-separator"

1. I used npm init rx-app AppName from the instructions to create a reactxp App
2. I used npm run start:web to test it, but it failed with the following error:

Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it.

@alariej issue & solution solved my problem.

I detailed the 4 steps.

I am new to developing, so not sure how this works, but would it be possible for someone to add the following 2 lines to \node_modules\@babel\preset-env\lib\available-plugins.js, and make sure that plugin is installed when calling npm init rx-app so others don't run into this problem when trying to create-rx-app?

1. var _pluginProposalNumericSeparator = _interopRequireDefault(require("@babel/plugin-proposal-numeric-separator")) with the other var's

2. "proposal-numeric-separator": _pluginProposalNumericSeparator.default with the others in var _default so it gets exported with default

project name with hyphen

When I ran yarn create rx-app rx-hello I get Project name - rx-hello is not valid. Not sure if it is expected.

➜ yarn create rx-app rx-hello
yarn create v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "create-rx-app > [email protected]" has incorrect peer dependency "jest@>=22 <24".
[4/4] 🔨  Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-rx-app
Project name - rx-hello is not valid.
✨  Done in 99.36s.

no eslint configuration found error when use `--javascript`

simply create a project by create-xp-app and run npm run build:web. then

ERROR in ./src/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found.

Add script to run Windows App

Template for the Windows version is available in template/native/windows folder, however, need to test it to make sure that it works correctly and after that add script which will run app for the Windows version