React app not building due to TensorFlow?

[moseich]

Considering that I recently started studying both TensorFlow and React, I ask you to help with an incomprehensible error that prevents the application (website) from being built.
The user downloads the neural network in tfjs format and can check its operation directly on the site page.
Installed the package npm i @tensorflow/tfjs.
In dependencies, I have the version displayed: "@tensorflow/tfjs": "^4.3.0"
Downloading the model:

async function loadModel() {
try {
const tfModel = await tf.loadGraphModel(modelUrl);
setModel(tfModel);
console.log("set loaded Model");
} catch (err) {
console.log("failed load model");
}
return model
}

Model work and drawing frames around the object:
`async function predictionFunction() {

    //Clear the canvas for each prediction
    let context = document.getElementById("myCanvas");
   
    let ctx = context.getContext("2d");

    ctx.clearRect(0, 0, webcamRef.current.video.videoWidth, webcamRef.current.video.videoHeight);
    //Start prediction
    const VIDEO = document.getElementById('img');
    const tfImg = tf.browser.fromPixels(VIDEO);

    //Create smaller image which fits the detection size
    const smallImg = tf.image.resizeBilinear(tfImg, [MOBILE_NET_INPUT_WIDTH, MOBILE_NET_INPUT_HEIGHT]);
    const resized = tf.cast(smallImg, 'int32');

    const tf4d_ = tf.tensor4d(Array.from(resized.dataSync()), [1, MOBILE_NET_INPUT_WIDTH, MOBILE_NET_INPUT_HEIGHT, 3]);
    const tf4d = tf.cast(tf4d_, 'int32');

    const predict = await model.executeAsync(tf4d)
    const predictionsCoord = predict[3].dataSync()

    const confidence = predict[6].dataSync()
    const bestConfidence = (confidence[0] * 100).toFixed(0)


    console.log(bestConfidence)


    const minY = (predictionsCoord[0] * videoHeight).toFixed(2);
    const minX = (predictionsCoord[1] * videoWidth).toFixed(2);
    const maxY = (predictionsCoord[2] * videoHeight).toFixed(2);
    const maxX = (predictionsCoord[3] * videoWidth).toFixed(2);

    const width_ = (maxX - minX).toFixed(2);
    const height_ = (maxY - minY).toFixed(2);


    ctx.beginPath()
    ctx.rect(minX, minY, width_, height_)
    ctx.lineWidth = 5
    ctx.strokeStyle = 'yellow'
    ctx.stroke()

    smallImg.dispose();
    resized.dispose();
    tf4d.dispose();
    


    setTimeout(() => {
        predictionFunction()

    }, 100);
 
}`

Everything works fine on the local machine, but when I try to build the application I get an error:

PS C:\Users\User\Desktop\siteai> npm run build

[email protected] build
react-scripts build

Creating an optimized production build...
Failed to compile.

TypeError: C:\Users\User\Desktop\siteai\node_modules@tensorflow\tfjs-core\dist\profiler.js: Cannot read properties of null (reading 'scope')
at Array.filter ()

Please help me figure out how to fix it.

[gaikwadrahul8]

Hi, @moseich

Apologize for the delayed response and May I know which react-native version are you using ? It seems like there is some package dependancies issue, if possible please help me with complete package.json file details ?

If you're using latest react-native version 0.8.0 then I would suggest you to please downgrade the version to 0.7.0 and check whether is it resolving your issue or not ?

If possible could you please help us with complete code via codepen or Github repo to clone and replicate the issue from our end ? Thank you!

[moseich]

Hi @gaikwadrahul8
All won:)
Experimenting with changes to tensorflow and react versions didn't help.
Moved to Vite and everything is ok (https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite).
Thanks for the great help @gothy.

[gaikwadrahul8]

Hi, @moseich

Apologize for the delayed response and I'm really sorry to hear that things with react native did not work for you, there may be some package dependancies compatibility issues and I'm not sure which react native version did you try from your end, If you want to give it try once again with react native then please try below mentioned package dependancies as per our official documentation and check whether things are working you and react app is building for you and team is working on package dependancies compatible issues, you can refer this comment

"expo": "~44.0.2",
"expo-camera": "^12.1.0",
"expo-file-system": "^13.2.0",
"expo-gl": "^11.1.1",
"expo-gl-cpp": "^11.1.0",
"react": "17.0.1",
"react-native": "~0.64.3",

If issue still persists please let us know ? Thank you!

[github-actions]

This issue has been marked stale because it has no recent activity since 7 days. It will be closed if no further activity occurs. Thank you.

[github-actions]

This issue was closed due to lack of activity after being marked stale for past 7 days.

[google-ml-butler]

Are you satisfied with the resolution of your issue?
Yes
No