search

microsoft / reactxp

Library for cross-platform app development.
https://microsoft.github.io/reactxp/
Other
8.29k stars 492 forks source link

unable to run TodoList example on android #1212

Closed GolfredoPerezFernandez closed 4 years ago

GolfredoPerezFernandez commented 4 years ago

hello i execute npm run start-android on TodoList example but stay forever on [17:46:20] Finished 'run' after 6.88 s complete log:

npm run start-android

todolist@2.0.0 start-android C:\Users\Golfredo\Documents\reactxp\TodoList npm install && npm run gulp-android

npm WARN @react-native-community/cli@1.10.0 requires a peer of react-native@^0.59.0 but none is installed. You must install peer dependencies yourself. npm WARN react-native@0.57.8 requires a peer of react@16.6.3 but none is installed. You must install peer dependencies yourself. npm WARN react-native-windows@0.59.0-rc.3 requires a peer of react@16.8.6 but none is installed. You must install peer dependencies yourself. npm WARN react-native-windows@0.59.0-rc.3 requires a peer of react-native@~0.59.0 but none is installed. You must install peer dependencies yourself. npm WARN reactxp@2.0.0 requires a peer of react-native-windows@^0.57.1 but none is installed. You must install peer dependencies yourself. npm WARN reactxp-navigation@2.0.0 requires a peer of react-native-windows@^0.57.1 but none is installed. You must install peer dependencies yourself. npm WARN reactxp-virtuallistview@2.1.0 requires a peer of react-native-windows@^0.57.1 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

up to date in 24.725s

1 package is looking for funding run npm fund for details

todolist@2.0.0 gulp-android C:\Users\Golfredo\Documents\reactxp\TodoList cross-env NODE_ENV=development node node_modules/gulp/bin/gulp run --platform=android

[17:46:13] platform: android [17:46:13] developer mode: enabled [17:46:13] source maps: true [17:46:13] Using gulpfile ~\Documents\reactxp\TodoList\gulpfile.js [17:46:13] Starting 'run'... [17:46:13] Starting 'clean'... [17:46:13] Finished 'clean' after 121 ms [17:46:13] Starting 'copy'... [17:46:13] Finished 'copy' after 165 ms [17:46:13] Starting 'build'... [17:46:13] Starting 'copy'... [17:46:14] Finished 'copy' after 75 ms [17:46:14] Starting 'compile-rn'... [17:46:18] Finished 'compile-rn' after 4.74 s [17:46:18] Finished 'build' after 4.82 s [17:46:18] Starting 'apply-aliases'... (node:3028) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead. (Use node --trace-deprecation ... to show where the warning was created) [17:46:19] Finished 'apply-aliases' after 224 ms [17:46:19] Starting 'watch'... [17:46:19] Finished 'watch' after 31 ms [17:46:19] Starting 'noop'... [17:46:19] Finished 'noop' after 958 μs [17:46:19] Starting 'lint'... [17:46:19] Starting 'ts-lint'... C:/Users/Golfredo/Documents/reactxp/TodoList/src/ts/controls/Modal.tsx:85:5 ERROR: 85:5 function-name Method name does not match /^[a-z]\w+$/: UNSAFE_componentWillMount ERROR: 113:5 function-name Method name does not match /^[a-z]\w+$/: UNSAFE_componentWillUpdate

[17:46:20] Finished 'ts-lint' after 1.39 s [17:46:20] Starting 'gulpfile-lint'... [17:46:20] Finished 'gulpfile-lint' after 116 ms [17:46:20] Finished 'lint' after 1.51 s [17:46:20] Finished 'run' after 6.88 s

mikehardy commented 4 years ago

It's working. Have you read the readme for the todolist? What you've done is compiled typescript to javascript and also passed through a gulp post-processor, so there are javascript files ready to be bundled and served to an app

You need to start the bundler, and start the app Follow the README and you'll get going, you are on the second item here https://github.com/microsoft/reactxp/blob/master/samples/TodoList/README.md#building-for-android

GolfredoPerezFernandez commented 4 years ago

Hello i follow the steps and now im having this responde from android studio:

Sin título

mikehardy commented 4 years ago

3 steps are required 1- compile typescript to javascript 2- start the javascript bundler 3- compile and start the native app

I mentioned that above. Now it looks like you've done 2 and 3, but not 1.

GolfredoPerezFernandez commented 4 years ago

i do npm run start-android and i get : [19:18:49] Starting 'ts-lint'... C:/Users/Golfredo/Documents/reactxpProyectos/TodoList/src/ts/controls/Modal.tsx:85:5 ERROR: 85:5 function-name Method name does not match /^[a-z]\w+$/: UNSAFE_componentWillMount ERROR: 113:5 function-name Method name does not match /^[a-z]\w+$/: UNSAFE_componentWillUpdate

[19:18:51] Finished 'ts-lint' after 1.43 s [19:18:51] Starting 'gulpfile-lint'... [19:18:51] Finished 'gulpfile-lint' after 120 ms [19:18:51] Finished 'lint' after 1.55 s [19:18:51] Finished 'run' after 13 s

GolfredoPerezFernandez commented 4 years ago

maybe is related with this issue https://github.com/microsoft/reactxp/issues/1142 .. and thanks for help :)

mikehardy commented 4 years ago

If you intend to use ReactXP with anything based off the todo list example (which I have done! It is a nice basis actually) then following the entire chain of "the app tried to find a file" back to the typescript file that defines it will be illuminating.

You'll find that you really can't make some changes you might need to make unless you understand the whole chain and know where to find things, especially for the 'modules' which are handled pretty specially

The error you post indicates 'modules/images/index.native' (or anything with that suffix can't be found)

  1. Where is that file defined?
  2. And what processes that file in order to put the processed file in the location that the native app is looking for it, but the bundler can't find?

I believe the answer to 1 is the modules/images/index.native.ts I believe the answer to 2 is that the gulp file in the "aliases" step figures out what platform you are trying to run, and post-processes the javascript that was emitted from the typescript-to-javascript step in order to put the native (ios + android) implementation in there vs the web implementation

Why isn't that working? No idea but the modules and aliases mechanism built in this sample is powerful and needs to be understood if you want to use the sample

GolfredoPerezFernandez commented 4 years ago

ok i dont know how to fix it :(

mikehardy commented 4 years ago

I can't reproduce your problem

I have a fork of reactxp in my github space I cloned it out to my computer (Linux, but works on macOS as well, I notice you're using windows, but should still work?)

So now I have a 'reactxp' directory that represents the current tip of the code here. I cd into samples/TodoList with 3 separate terminals I run npm run start-android in one I run npm run start in another I run cd android && ./gradlew installDebug in the 3rd

At that point I get a build error I fixed with #1213 - a tiny change

It works.

GolfredoPerezFernandez commented 4 years ago

ok i follow your steps and still given me the error this are the logs:

npm start:

todolist@2.0.0 start C:\Users\Golfredo\Documents\Nueva carpeta (2)\TodoList node node_modules/react-native/local-cli/cli.js start

(node:10580) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency (Use node --trace-warnings ... to show where the warning was created) (node:10580) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'find' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'head' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'set' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'test' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'to' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency (node:10580) Warning: Accessing non-existent property 'which' of module exports inside circular dependency ┌──────────────────────────────────────────────────────────────────────────────┐ │ │ │ Running Metro Bundler on port 8081. │ │ │ │ Keep Metro running while developing on any JS projects. Feel free to │ │ close this tab and run your own Metro instance if you prefer. │ │ │ │ https://github.com/facebook/react-native │ │ │ └──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in C:\Users\Golfredo\Documents\Nueva carpeta (2)\TodoList

Loading dependency graph, done. DELTA [android, dev] ./index.android.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)::ffff:127.0.0.1 - - [05/Jul/2020:18:56:57 +0000] "GET /index.android.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1" error: bundling failed: Error: Unable to resolve module ./temp/android/rnapp/js/app/AppBootstrapperNative.js from C:\Users\Golfredo\Documents\Nueva carpeta (2)\TodoList\index.android.js: The module ./temp/android/rnapp/js/app/AppBootstrapperNative.js could not be found from C:\Users\Golfredo\Documents\Nueva carpeta (2)\TodoList\index.android.js. Indeed, none of these files exist:

todolist@2.0.0 start-android C:\Users\Golfredo\Documents\Nueva carpeta (2)\TodoList npm install && npm run gulp-android

npm WARN react-native@0.59.10 requires a peer of react@16.8.3 but none is installed. You must install peer dependencies yourself. npm WARN react-native-windows@0.59.0-rc.3 requires a peer of react@16.8.6 but none is installed. You must install peer dependencies yourself. npm WARN reactxp@2.0.0 requires a peer of react-native-windows@^0.57.1 but none is installed. You must install peer dependencies yourself. npm WARN reactxp-navigation@2.0.0 requires a peer of react-native-windows@^0.57.1 but none is installed. You must install peer dependencies yourself. npm WARN reactxp-virtuallistview@2.1.0 requires a peer of react-native-windows@^0.57.1 but none is installed. You must install peer dependencies yourself.

up to date in 22.557s

1 package is looking for funding run npm fund for details

todolist@2.0.0 gulp-android C:\Users\Golfredo\Documents\Nueva carpeta (2)\TodoList cross-env NODE_ENV=development node node_modules/gulp/bin/gulp run --platform=android

[14:42:58] platform: android [14:42:58] developer mode: enabled [14:42:58] source maps: true [14:42:58] Using gulpfile ~\Documents\Nueva carpeta (2)\TodoList\gulpfile.js [14:42:58] Starting 'run'... [14:42:58] Starting 'clean'... [14:42:59] Finished 'clean' after 211 ms [14:42:59] Starting 'copy'... [14:42:59] Finished 'copy' after 174 ms [14:42:59] Starting 'build'... [14:42:59] Starting 'copy'... [14:42:59] Finished 'copy' after 83 ms [14:42:59] Starting 'compile-rn'... [14:43:04] Finished 'compile-rn' after 5.04 s [14:43:04] Finished 'build' after 5.13 s [14:43:04] Starting 'apply-aliases'... (node:5436) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead. (Use node --trace-deprecation ... to show where the warning was created) [14:43:04] Finished 'apply-aliases' after 218 ms [14:43:04] Starting 'watch'... [14:43:04] Finished 'watch' after 30 ms [14:43:04] Starting 'noop'... [14:43:04] Finished 'noop' after 889 μs [14:43:04] Starting 'lint'... [14:43:04] Starting 'ts-lint'... C:/Users/Golfredo/Documents/Nueva carpeta (2)/TodoList/src/ts/controls/Modal.tsx:85:5 ERROR: 85:5 function-name Method name does not match /^[a-z]\w+$/: UNSAFE_componentWillMount ERROR: 113:5 function-name Method name does not match /^[a-z]\w+$/: UNSAFE_componentWillUpdate

[14:43:06] Finished 'ts-lint' after 1.43 s [14:43:06] Starting 'gulpfile-lint'... [14:43:06] Finished 'gulpfile-lint' after 123 ms [14:43:06] Finished 'lint' after 1.56 s [14:43:06] Finished 'run' after 7.33 s .. It is stuck here since forever .......

and

npx gradlew installDebug:

Configure project :app WARNING: The option 'android.useDeprecatedNdk' is deprecated. The current default is 'false'. It has been removed from the current version of the Android Gradle plugin. NdkCompile is no longer supported WARNING: The specified Android SDK Build Tools version (28.0.3) is ignored, as it is below the minimum supported version (29.0.2) for Android Gradle Plugin 4.0.0. Android SDK Build Tools 29.0.2 will be used. To suppress this warning, remove "buildToolsVersion '28.0.3'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools. WARNING: The specified Android SDK Build Tools version (28.0.3) is ignored, as it is below the minimum supported version (29.0.2) for Android Gradle Plugin 4.0.0. Android SDK Build Tools 29.0.2 will be used. To suppress this warning, remove "buildToolsVersion '28.0.3'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

Task :app:installDebug Installing APK 'app-debug.apk' on '29(AVD) - 10' for app:debug Installed on 1 device.

BUILD SUCCESSFUL in 6s 39 actionable tasks: 1 executed, 38 up-to-date

then open the app in the emulator and give me the same error :((( : Sin título

mikehardy commented 4 years ago

Why out of order? start-android is first, otherwise there's no javascript to feed into "start". "start-android" compiles the typescript to javascript. I don't feel like you are following my comments, I don't feel like we're making any progress here.

I not only got it working correctly and explained how, I even just updated the whole TodoList sample #1214 when I saw it had some minor issues. I'm not sure what is wrong in your local environment, but the sample works.

Start fresh again I guess. I would warn you away from using folder names with spaces in them though. It might be fine. But historically that is a source of error in multi-platform programming systems when they are run on windows developer environments.

GolfredoPerezFernandez commented 4 years ago

I solve the problem changing the following files:

****TodoList/temp/android/rnapp/js/views/TopBarComposite.js: from var images_1 = require('./temp/android/obj/modules/images/index.native'); to var images_1 = require('../../../obj/modules/images/index.native');

****TodoList\temp\android\obj\modules\images\index.native.js from Object.defineProperty(ImageSource.prototype, "todoLogo", { get: function () { return require('../../../images/todo-logo.png'); }, enumerable: true, configurable: true }); Object.defineProperty(ImageSource.prototype, "todoSmall", { get: function () { return require('../../../images/todo-small.png'); }, enumerable: true, configurable: true }); to

Object.defineProperty(ImageSource.prototype, "todoLogo", {
    get: function () { return require('../../../../../src/resources/images/todo-logo.png'); },
    enumerable: true,
    configurable: true
});
Object.defineProperty(ImageSource.prototype, "todoSmall", {
    get: function () { return require('../../../../../src/resources/images/todo-small.png'); },
    enumerable: true,
    configurable: true
});

*****C:\Users\Golfredo\Documents\apps\TodoList\temp\android\rnapp\js\views\TodoListItem.js from var images_1 = require('./temp/android/obj/modules/images/index.native');

to var images_1 = require('../../../obj/modules/images/index.native');

*****TodoList\temp\android\rnapp\js\app\Styles.js from var fonts_1 = require('./temp/android/obj/modules/fonts/index.native');

to var fonts_1 = require('../../../obj/modules/fonts/index.native');

GolfredoPerezFernandez commented 4 years ago

but if i run npm run start-android i must change it again, how can i avoid this?

mikehardy commented 4 years ago

start-android runs the gulpfile.js as a build recipe to transform typescript to javascript something about it isn't working in your environment, not sure what though. The aliases step maybe?

GolfredoPerezFernandez commented 4 years ago

I do not understand very well the aliases step maybe you can give an example for android?

mikehardy commented 4 years ago

@GolfredoPerezFernandez so imagine you want to work on the web and on react-native. But their bundlers handle image includes very differently, in fact, they handle them in ways that you can't even compile one way with the other way's toolchain. How do you handle cases like that, where the source itself is completely incompatible?

You have a post-processing step that swaps in the whole source implementation depending on platform and you implement the two styles as modules that meet the same interface (check modules/images/)

But then you want a way to reference the same API in the rest of the code, not paying attention to platform

So the aliases step implements this module-swapping post-processing step

GolfredoPerezFernandez commented 4 years ago

ok.. so i must do something like this

import ImageSource from 'modules/images'; . . . . <RX.Image style={ _styles.todoImage } source={RX.Platform.getType()!=='web'?'../../resources/images/todo-small.png': ImageSource.todoSmall } />

mikehardy commented 4 years ago

We are discussing this in a sample repo, yes? Follow it's example.

https://github.com/microsoft/reactxp/blob/52fdd7dc39ed07cea0b433213ec5f60b42f40535/samples/TodoList/src/ts/views/TodoListItem.tsx#L8

https://github.com/microsoft/reactxp/blob/52fdd7dc39ed07cea0b433213ec5f60b42f40535/samples/TodoList/src/ts/views/TodoListItem.tsx#L131

mikehardy commented 4 years ago

I need to set your expectations: I am not going to have time to discuss this further. You'll have to use this example, and learn directly from it.