microsoft/rnx-kit

setTimeout and performance.now are not defined when using rnx-start

johnf opened this issue · 14 comments

johnf commented

What happened?

My app crahses with the following

App Crash -23 11:29:40.853 15148 15378 I HermesVM: at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:37223:133) 06-23 11:29:40.853 15148 15378 I HermesVM: at loadModuleImplementation (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:328:14) 06-23 11:29:40.853 15148 15378 I HermesVM: at guardedLoadModule (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:227:38) 06-23 11:29:40.853 15148 15378 I HermesVM: at metroRequire (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:123:92) 06-23 11:29:40.853 15148 15378 I HermesVM: at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:59400:124) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: Exception in native call from JS 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: com.facebook.react.devsupport.JSException: Cannot read property 'now' of undefined 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at com.facebook.jni.NativeRunnable.run(Native Method) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at android.os.Handler.handleCallback(Handler.java:942) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at android.os.Handler.dispatchMessage(Handler.java:99) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at android.os.Looper.loopOnce(Looper.java:201) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at android.os.Looper.loop(Looper.java:288) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at java.lang.Thread.run(Thread.java:1012) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: Caused by: com.facebook.jni.CppException: Cannot read property 'now' of undefined 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: TypeError: Cannot read property 'now' of undefined 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:37223:133) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at loadModuleImplementation (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:328:14) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at guardedLoadModule (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:227:38) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at metroRequire (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:123:92) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:59400:124) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at loadModuleImplementation (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:328:14) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at guardedLoadModule (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:227:38) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at metroRequire (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:123:92) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at get AppRegistry (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:1592:25) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at FirebaseMessagingModule (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:278594:19) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at firebaseModuleWithApp (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:281318:74) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:278282:52) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at loadModuleImplementation (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:328:14) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at guardedLoadModule (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:227:38) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at metroRequire (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:123:92) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:123987:14) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at loadModuleImplementation (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:328:14) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at guardedLoadModule (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:227:38) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at metroRequire (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:123:92) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:1465:104) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at loadModuleImplementation (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:328:14) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at guardedLoadModule (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:219:47) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at metroRequire (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:123:92) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: at global (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true:790292:4) 06-23 11:29:40.856 15148 15378 E unknown:ReactNative: ... 8 more 06-23 11:29:40.856 15148 15378 E ReactNativeJNI: Attempting to call JS function on a bad application bundle: HMRClient.setup()

It works fine with standard metro.

I've compared the bundles and the diff is

--- cli.js	2023-06-23 11:30:19.728315729 +1000
+++ rnx.js	2023-06-23 11:29:56.764407628 +1000
@@ -790289,7 +790289,6 @@
 }
 ;
 },6110,[],"app.json");
-__r(53);
 __r(0);
 //# sourceMappingURL=http://127.0.0.1:8081/index.map?platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true
 //# sourceURL=http://127.0.0.1:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.gladlyapp.mobile.debug&modulesOnly=false&runModule=true

53 is

},52,[53],"node_modules/react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore.js");

which is a pretty critical file! :)

Affected Package

@rnx-kit/cli or perhaps the metro config?

Version

0.16.9

Which platforms are you seeing this issue on?

  • Android
  • iOS
  • macOS
  • Windows

System Information

System:
  OS: Linux 6.3 Ubuntu 22.10 22.10 (Kinetic Kudu)
  CPU: (32) x64 AMD Ryzen 9 7950X 16-Core Processor
  Memory: 36.22 GB / 61.95 GB
  Shell:
    version: 5.2.2
    path: /bin/bash
Binaries:
  Node:
    version: 18.16.0
    path: ~/.nvm/versions/node/v18.16.0/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.16.0/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.16.0/bin/npm
  Watchman:
    version: 4.9.0
    path: /usr/bin/watchman
SDKs:
  Android SDK:
    API Levels:
      - "33"
      - "34"
    Build Tools:
      - 28.0.3
      - 29.0.2
      - 29.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 31.0.0
      - 32.1.0
      - 33.0.0
      - 33.0.0
      - 34.0.0
      - 34.0.0
    System Images:
      - android-33 | Google APIs Intel x86 Atom_64
      - android-33 | Google Play Intel x86 Atom_64
    Android NDK: Not Found
IDEs:
  Android Studio: AI-213.7172.25.2113.9123335
Languages:
  Java:
    version: 11.0.19
    path: /usr/bin/javac
  Ruby:
    version: 3.0.4
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.0
    wanted: ^0.72.0
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: Not found

Steps to Reproduce

  • Init a new react native 0.72.0 app
  • Add rnx-kit
  • npm run react-native rnx-start
  • Run the app

Code of Conduct

  • I agree to follow this project's Code of Conduct
johnf commented

Note: I'm still digging into this but wanted to surface it for others

  • ❤️2
tido64 commented

Thanks for reporting this, @johnf! Can you check whether it's because of our out-of-tree platform resolver?

rnx-kit/packages/metro-config/src/defaultConfig.js

Lines 17 to 31 in bab0388

function getPreludeModules(availablePlatforms) {
// Include all instances of `InitializeCore` here and let Metro exclude
// the unused ones.
const mainModules = new Set([
require.resolve("react-native/Libraries/Core/InitializeCore"),
]);
for (const moduleName of Object.values(availablePlatforms)) {
if (moduleName) {
mainModules.add(
require.resolve(`${moduleName}/Libraries/Core/InitializeCore`)
);
}
}
return Array.from(mainModules);
}

johnf commented

@tido64 That code wasn't being called for me at all. Becase I was using the default metroCOnfig from 0.72 which now makes some function calls.

Is https://microsoft.github.io/rnx-kit/docs/guides/bundling#setting-up-the-tools still accurate for react 0.72?

If I switch to what's in there I get errors about HTTP not being defined in axios.

Even so can I suggest that the recommended metro.config looks more like the default 0.72 one.

E.g. I think it would be great if you only needed to change the top i.e.

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
// becomes
const {getDefaultConfig, mergeConfig} = require('@rnx-kit/metro-config');

and everything else stays the same apart from adding some items to the config object

tido64 commented

Is https://microsoft.github.io/rnx-kit/docs/guides/bundling#setting-up-the-tools still accurate for react 0.72?

If I switch to what's in there I get errors about HTTP not being defined in axios.

I tested this last night and it worked as expected. The only issue you might see is this: #2481

Do you have repro for the errors you saw?

Even so can I suggest that the recommended metro.config looks more like the default 0.72 one.

I think that makes sense. I'll toss the idea with other folks to see if there are any issues.

johnf commented

I worked this out later on. The axios bug is completely separate, it's because I turned on the new export code and axios was then pulling in the node export instead of the browser export.
I'll have another go at the rnx-kit metro config tomorrow

  • 👍2
johnf commented

Played with this some more this morning.

I have it working using the default instructions, but only if I don't include MetroSymlinksResolver

If the symlink resolver is enabled then I get the error below.

I'm using getstream which can pull in jsonwebtoken which uses crypto. but getstream has the following in its package.json

  "browser": {
    "crypto": false,
    "jsonwebtoken": false,
    "./lib/batch_operations.js": false,
    "./lib/redirect_url.js": false,
    "qs": false,
    "url": false,
    "http": false,
    "https": false
  },
  "react-native": {
    "crypto": false,
    "jsonwebtoken": false,
    "./lib/batch_operations.js": false,
    "./lib/redirect_url.js": false,
    "qs": false,
    "url": false
  },

So it looks like something in the symlinkresolver is breaking the resolution?

error: Error: Unable to resolve module crypto from /home/johnf/work/gladly/mobile/node_modules/jsonwebtoken/verify.js: crypto could not be found within the project or in these directories:
  node_modules/jsonwebtoken/node_modules
  node_modules
   7 | const PS_SUPPORTED = require('./lib/psSupported');
   8 | const jws = require('jws');
>  9 | const {KeyObject, createSecretKey, createPublicKey} = require("crypto");
     |                                                                ^
  10 |
  11 | const PUB_KEY_ALGS = ['RS256', 'RS384', 'RS512'];
  12 | const EC_KEY_ALGS = ['ES256', 'ES384', 'ES512'];
    at ModuleResolver.resolveDependency (/home/johnf/work/gladly/mobile/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:139:15)
    at DependencyGraph.resolveDependency (/home/johnf/work/gladly/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at Object.resolve (/home/johnf/work/gladly/mobile/node_modules/metro/src/lib/transformHelpers.js:169:21)
    at Graph._resolveDependencies (/home/johnf/work/gladly/mobile/node_modules/metro/src/DeltaBundler/Graph.js:472:35)
    at Graph._processModule (/home/johnf/work/gladly/mobile/node_modules/metro/src/DeltaBundler/Graph.js:260:38)
    at async Graph._addDependency (/home/johnf/work/gladly/mobile/node_modules/metro/src/DeltaBundler/Graph.js:371:20)
    at async Promise.all (index 0)
    at async Graph._processModule (/home/johnf/work/gladly/mobile/node_modules/metro/src/DeltaBundler/Graph.js:321:5)
    at async Graph._addDependency (/home/johnf/work/gladly/mobile/node_modules/metro/src/DeltaBundler/Graph.js:371:20)
    at async Promise.all (index 2)
tido64 commented

Hmm… probably because it's missing react-native here:

rnx-kit/packages/metro-resolver-symlinks/src/utils/enhancedResolve.ts

Line 24 in e3a45b2

aliasFields: ["browser"],

Could you try prepending react-native there and see if it works?

Never mind, that code path does not apply here. I'll have a look…

tido64 commented

@johnf, I've submitted a fix above, can you check if it works for you?

Edit: What's the status of the original issue you filed this ticket for?

johnf commented

That fixes this issue.
I ran this to compare the bundles

grep '^}.*node_modules' rn.js | sed 's/.*node_modules//' | sort > rn.list
grep '^}.*node_modules' rnxs.js | sed 's/.*node_modules//' | sort > rnxs.list
diff rn/lust  rnxs.list

There is one slight difference

--- rn.list	2023-06-28 08:03:02.669931495 +1000
+++ rnxs.list	2023-06-28 08:03:09.677885797 +1000
@@ -642,7 +642,7 @@
 /@aws-crypto/util/build/uint32ArrayFrom.js");
 /@aws-crypto/util/build/uint32ArrayFrom.js");
 /@aws-crypto/util/build/uint32ArrayFrom.js");
-/@aws-sdk/chunked-blob-reader-native/dist/cjs/index.js");
+/@aws-sdk/chunked-blob-reader/dist/cjs/index.js");
 /@aws-sdk/client-cloudwatch-logs/dist/cjs/CloudWatchLogsClient.js");
 /@aws-sdk/client-cloudwatch-logs/dist/cjs/CloudWatchLogs.js");
 /@aws-sdk/client-cloudwatch-logs/dist/cjs/commands/AssociateKmsKeyCommand.js");

The blob reader is pulled in by has-blob-browser which has this in package.json

 "react-native": {
   "@aws-sdk/chunked-blob-reader": "@aws-sdk/chunked-blob-reader-native"
 }

We should probably move to a different ticket, this actual issue was me having the old react-native-codegen in my package.json which was overriding the @react-native/codegen that react native includes.

tido64 commented

We should probably move to a different ticket, this actual issue was me having the old react-native-codegen in my package.json which was overriding the @react-native/codegen that react native includes.

I've updated the test plan. I think I've caught most cases now, but it would be great if you could have another look. If it's still not resolved, let's open a separate issue then. 😄

tido64 commented

@johnf: Could you have another look before I merge the fix? Thanks 🙏

johnf commented

I'm still getting

--- rn.list	2023-07-06 08:32:21.687295166 +1000
+++ rnxs.list	2023-07-06 08:35:22.674928503 +1000
@@ -635,7 +635,7 @@
 /@aws-crypto/util/build/uint32ArrayFrom.js");
 /@aws-crypto/util/build/uint32ArrayFrom.js");
 /@aws-crypto/util/build/uint32ArrayFrom.js");
-/@aws-sdk/chunked-blob-reader-native/dist/cjs/index.js");
+/@aws-sdk/chunked-blob-reader/dist/cjs/index.js");
 /@aws-sdk/client-cloudwatch-logs/dist/cjs/CloudWatchLogsClient.js");
 /@aws-sdk/client-cloudwatch-logs/dist/cjs/CloudWatchLogs.js");
 /@aws-sdk/client-cloudwatch-logs/dist/cjs/commands/AssociateKmsKeyCommand.js");

I added some logging and I see

applyMetroResolver
   moduleName: @aws-sdk/chunked-blob-reader,
   realModuleName: @aws-sdk/chunked-blob-reader-native
   modifiedModuleName: ../../../chunked-blob-reader

Hope that helps

tido64 commented

I added some logging and I see

applyMetroResolver
   moduleName: @aws-sdk/chunked-blob-reader,
   realModuleName: @aws-sdk/chunked-blob-reader-native
   modifiedModuleName: ../../../chunked-blob-reader

This is what I'm seeing:

image

Also, if I just delete @aws-sdk/chunked-blob-reader-native, I am getting an error as expected:

warning: the transform cache was reset.
                Welcome to Metro v0.73.10
              Fast - Scalable - Integrated


{
  moduleName: '@aws-sdk/chunked-blob-reader',
  realModuleName: '@aws-sdk/chunked-blob-reader-native',
  modifiedModuleName: '@aws-sdk/chunked-blob-reader-native'
}
error Unable to resolve module @aws-sdk/chunked-blob-reader from /~/node_modules/@aws-sdk/hash-blob-browser/dist-cjs/index.js: @aws-sdk/chunked-blob-reader could not be found within the project or in these directories:
  ../../node_modules/@aws-sdk/hash-blob-browser/node_modules
  ../../node_modules
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.blobHasher = void 0;
> 4 | const chunked_blob_reader_1 = require("@aws-sdk/chunked-blob-reader");
    |                                        ^
  5 | const blobHasher = async function blobHasher(hashCtor, blob) {
  6 |     const hash = new hashCtor();
  7 |     await (0, chunked_blob_reader_1.blobReader)(blob, (chunk) => {.
tido64 commented

I'm going to close this because I believe we have addressed the issue adequately. Please feel free to open a new issue if you think otherwise. Thanks for helping us investigate it ❤️