TensorflowJS Error: The property 'fetch' cannot be read as it is undefined

I am working on an Angular 7 application and attempting to load the mobilenet model by following the instructions in this example.

To do this, I first installed tensorflowjs using the command npm install @tensorflow/tfjs (based on the steps provided in this guide) and then installed the mobilenet model with @tensorflow-models/mobilenet.

Next, I imported the mobilenet model as follows:

import * as mobilenet from '@tensorflow-models/mobilenet';

I proceeded to execute the code below to load the model:

mobilenet.load().then(() => {
     obs.next();
}).catch((err) => {
     console.log(err);
     console.log("ERROR");
});

However, I encountered the following error message:

TypeError: Cannot read property 'fetch' of undefined
    at new e (tf-core.esm.js:17)
    at browserHTTPRequest (tf-core.esm.js:17)
    at httpRequestRouter (tf-core.esm.js:17)
    at tf-core.esm.js:17
    at Array.forEach (<anonymous>)
    at Function.e.getHandlers (tf-core.esm.js:17)
    at Function.e.getLoadHandlers (tf-core.esm.js:17)
    at Object.getLoadHandlers (tf-core.esm.js:17)
    at e.findIOHandler (tf-converter.esm.js:17)
    at e.<anonymous> (tf-converter.esm.js:17)

Seeking assistance to resolve this issue. Any insights would be greatly appreciated.

Answer №1

I discovered that the issue stemmed from having mismatched versions of @tensorflow/tfs and @tensorflow/tfjs-core in my package.json file.

Therefore, I updated my package configuration from:

...
"@tensorflow/tfjs": "^1.1.2",
"@tensorflow/tfjs-core": "^1.0.2",
...

To:

...
"@tensorflow/tfjs": "^1.1.2",
"@tensorflow/tfjs-core": "^1.1.2",
...

As a result, the error disappeared.

Answer №2

This solution worked perfectly for me. Here's the step-by-step guide:

  1. Make sure to have installed @tensorflow/tfjs-react-native if you haven't already:

npm install @tensorflow/tfjs-react-native

  1. Include @tensorflow/tfjs-react-native at the beginning of your file. In my case, I added it to my app.tsx file:

import "@tensorflow/tfjs-react-native";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with Oversized Images in Jcrop: Tips and Tricks

Utilizing Jcrop for cropping images, everything runs smoothly with small images. However, when I attempt to use large images like 2080x2080 or 1600x1600, it takes up the entire screen and cannot be controlled by CSS properties such as width and height in t ...

What is the best way to extract multiple records from an Array?

Below is a simple filter function that filters Rec_pagedItems in an array called allItems. someval(value){ if(value.length>=5){ this._pagedItems= this.allItems.find(e=>e.uniqueid == value || e.name == value ); if(this._pagedItem ...

ReactJS Error: Cannot find reference to 'require'

I'm currently implementing the DRY concept in React JS by attempting to reuse the same HTML partial across different files. Here is the partial: var AdminMenu = React.createClass({ getInitialState: function() { return {}; }, render: function() ...

What is the best method for showcasing numerous dropdown lists using JavaScript along with conditional if-else statements?

Hello everyone, I am currently new to javascript and I'm attempting to build a small web application using javascript. However, I am facing an issue with printing the drop-down list output. Could someone please assist me in resolving this problem? < ...

React fails to acknowledge union types

I have the following types defined: export enum LayersItemOptionsEnum { OPERATOR, HEADER, } type sharedTypes = { children: string | ReactElement; }; type LayersItemStatic = sharedTypes & { label: string; option: LayersItemOptionsEnum; }; t ...

When async is set to true in an Ajax call, the response may come

I recently developed a function that works perfectly fine when the async option is set to false. However, I am now looking to achieve the same functionality and return value but with async set to true. function Call(param, proc) { var url = "../../ ...

What is the best method for choosing a document from a Firebase based on its creation time?

Currently delving into Firebase as part of my project, struggling with setting queries in the Database. I've provided a breakdown of my Firebase database structure below: Looking to retrieve the most recently created document from the 'subscrip ...

Preserve JSON information using Ajax

Here is the current code snippet I am working with: Play.save = function() { //Hide the buttons this.printButton.visible = false; this.saveButton.visible = false; this.backButton.visible = false; //Force the game to re-render. th ...

Experiencing issues with test timeouts in Angular while trying to log in

I'm having trouble writing an Angular e2e Protractor test. Every time I try to test a login with the correct email and password, I keep getting a timeout error. describe("login view", () => { const app = new App(); const login = new L ...

Is there a way to obtain the full class name if only a portion of it is known?

I am trying to extract the complete classname of an element, but I only have partial information about it. <div class="anotherclass my-class-no-1 onemoreclass...">div> Currently, I can select the element using this: $([class*="my-class-no-"]... ...

Issue with JavaScript-generated dropdown menu malfunctioning in WebView on Android devices

During my testing of the app on a Galaxy Tab with Android 2.2, I encountered an issue within the WebView component. The problem arises when I have a local HTML page generated dynamically and it contains a SELECT element like this: <select class='d ...

Adjusting the X-axis in Highstock: Tips and Tricks

Is there a way to adjust the X axis on this chart? My goal is to shift it so that it only covers half of the width, leaving the other half blank for future plotlines. Any suggestions on how to achieve this? Thanks! :) ...

Issues with closing Foundation 6 off-canvas feature

Here is a link that I have: If you click on the skip button in the middle, it will take you to the next slide where Foundation 6 off-canvas is implemented. The header containing the toggle button for the off-canvas menu is located outside of the menu its ...

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

I need to update the last link on my menu. When a user is logged in, it should display a profile link; otherwise, it should show a sign-up link. ...

Exploring the capabilities of combining Typescript with withStyles in the latest @material-ui/core framework

I have been working on updating some old Typescript code that was using material-ui@next to now use @material-ui/core. Typescript Version: 2.8.3 @material-ui/core: 1.1.0 I created a simple component that accepts a single prop, but when I try to use it, t ...

Using innerHTML within a template literal

I am attempting to develop a method in Angular2 that will return a string representing an HTML page: returnAsHtml(myField : MyFieldModel) { let html; ... html += `<tr> <td class="text-center">${myField.id}</td> ...

Tips for implementing and utilizing onclick functions in EJS

My goal is to develop a trivia game with interactive features. I aim to enable users to click on an answer, which will trigger a border effect and increase the points variable. Below is the layout of the entire page: <% include ../partials/boilerp ...

Tips for transferring a jQuery array to PHP

I am encountering an issue when trying to send a jQuery array to PHP. Initially, I have one form in HTML and upon clicking 'add', I end up with two forms. Afterwards, I input data into the form which is then stored in a jQuery array. However, I a ...

Put a spinner within a JavaScript function

Implementing a spinner using JavaScript function. Hello everyone, I am new to JavaScript and I am struggling to include a spinner in my code. Below is the code that I wrote. Can anyone help me identify what the issue might be? document.getElementById(&apo ...

What is the best way to extract the value from an anchor element?

To retrieve the value from an input tag, we can use <id>.value like this: <input type="text" #solutionInput (keyup)="0"><br> <solutionDetail [solutionName]="solutionInput.value" > </solutionDetail> Here, 'solutionInput& ...