react-native tensorflow.js bundleResourceIO hangs metro bundler

Question

I'm new to React Native and trying to load a model using @tensorflow/tfjs-react-native and I've narrowed down the problem to the bundleResourceIO function. Every time npx react-native run-android is run, the project initializes successfully, builds successfully, and then hangs during bundling with no error or warning, even with the verbose flag.

I've waited around for the bundling to make progress for perhaps an hour which should rule out a particularly slow package, as commenting out the one line bundleResourceIO(modelJSON, modelWeights) lets it bundle in under a minute.

Disabling hermes was another possible fix but I tried and it hasn't had any effect.

I've also checked my model.json to ensure it's not broken or something and it seems fine as well.

I've seen that incorrectly configured metro.config.js resolvers might contribute to the problem, but adding the 'bin' and 'json' extensions didn't change the bundle hang problem

my metro.config.js

  return {
    resolver: {
      // Add bin to assetExts
      assetExts: [...assetExts, 'bin'],
      sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx'],
    },

Here's a MRE of the code so far.

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import * as tf from '@tensorflow/tfjs'
import { fetch, bundleResourceIO } from '@tensorflow/tfjs-react-native'

import {modelJSON} from '..\models\cls\model.json'
import {modelWeights} from '..\models\cls\model.bin'



class App extends React.Component {
  state = {
    isTfReady: false
  }

  async componentDidMount() {
    await tf.ready()
    this.setState({
      isTfReady: true
    })
    this.model = await this.loadModel()
    this.setState({ isModelReady: true })

  }

  async loadModel() {
    const bundled = bundleResourceIO(modelJSON, modelWeights) // <--- Can bundle fine without this line
    // const model = tf
    //   .loadGraphModel(bundled)
    //   .catch(e => console.log(e));
    // console.log("Model loaded!");
    return model;
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>TFJS ready? {this.state.isTfReady ? <Text>Yes</Text> : ''}</Text>
        <Text>
            Model ready?{' '}
            {this.state.isModelReady ? <Text>Yes</Text> : <Text>Loading Model...</Text>}
        </Text>
      </View>
    )
  }
}