TensorflowJS Failed to parse model.json

TensorflowJS

model.json

error

troubleshooting

machine learning

TensorflowJS Failed to parse model.json

ML System Design practice on Codemia

Design recommenders, ranking systems and training pipelines the way ML interviews actually ask for them, with worked solutions.

Practice ML system design

Machine Learning Debugging & Errors

Introduction

Failed to parse model.json in TensorFlow.js usually means the file fetched from the URL is not the valid model manifest TensorFlow.js expected. The root cause is often not the model itself but the HTTP response: wrong path, an HTML error page, bad JSON, incomplete upload, or a mismatch between model.json and the weight shard files it references. The most productive debugging step is to inspect the actual response body before trying random conversion flags.

What TensorFlow.js Expects

When you load a Layers model with tf.loadLayersModel, TensorFlow.js expects a JSON document that describes:

model topology
training config in some cases
a weights manifest listing binary shard files

A normal load looks like this:

javascript

1import * as tf from '@tensorflow/tfjs';
2
3async function load() {
4  const model = await tf.loadLayersModel('/models/model.json');
5  console.log(model.summary());
6}
7
8load().catch(console.error);

If parsing fails, TensorFlow.js could not turn the response into the expected JSON structure.

First Debug Step: Fetch the File Yourself

Before blaming TensorFlow.js, fetch the URL directly and inspect what the browser actually receives.

javascript

1async function inspectModelJson(url) {
2  const response = await fetch(url);
3  const text = await response.text();
4
5  console.log('status:', response.status);
6  console.log('content-type:', response.headers.get('content-type'));
7  console.log(text.slice(0, 300));
8}
9
10inspectModelJson('/models/model.json');

This often exposes the real issue immediately. Common examples:

the server returned an HTML 404 page
authentication redirected you to a login page
the JSON file is truncated
the file was uploaded with the wrong contents

If the first characters look like <!doctype html> instead of JSON, you already know why the parse failed.

Common Causes

Wrong URL or Build Path

If the model is served from the wrong directory, the request may succeed at the HTTP level but return the wrong file. Single-page apps are especially prone to this because a missing static file can get rewritten to index.html.

Corrupted or Incomplete `model.json`

If the model conversion or upload process was interrupted, the JSON may be syntactically invalid or incomplete.

Invalid Weight Manifest Paths

Even if model.json is valid JSON, the manifest inside it may point to shard filenames that do not exist relative to the JSON file location.

Serving the Wrong Artifact Type

TensorFlow.js has different loaders for different model formats. A GraphModel exported for one loader will not necessarily work with the other.

'tf.loadLayersModel(...) for Keras-style Layers models'
'tf.loadGraphModel(...) for graph models'

If you converted a SavedModel for graph execution, use the graph loader instead of the layers loader.

Validate the JSON Structure

A quick Node.js check can confirm whether the file is valid JSON at all.

javascript

1const fs = require('fs');
2
3const raw = fs.readFileSync('./models/model.json', 'utf8');
4const parsed = JSON.parse(raw);
5console.log(Object.keys(parsed));

If this fails locally, the problem is not networking or CORS. The file itself is broken.

If JSON parsing works locally, inspect fields such as weightsManifest and make sure the referenced shard files exist where the browser expects them.

Make Sure the Loader Matches the Model

This is a frequent source of confusion. The load call should match the artifact that was produced during conversion.

For example:

javascript

1import * as tf from '@tensorflow/tfjs';
2
3async function loadGraph() {
4  const model = await tf.loadGraphModel('/graph-model/model.json');
5  console.log('graph model loaded');
6}
7
8loadGraph().catch(console.error);

Using loadLayersModel against a GraphModel export can produce parse or topology errors that look unrelated at first glance.

Deployment-Specific Checks

When the file works locally but fails in production, check:

the exact deployed URL
whether gzip or CDN transformations changed the file
whether CORS blocks model or weight requests
whether the hosting platform rewrites unknown files to HTML
whether the binary shard files were uploaded alongside model.json

A CDN or static hosting rewrite rule can make model loading fail even when the model files are correct.

Common Pitfalls

A common mistake is checking only whether the URL exists in the browser. A URL that returns an HTML error page still "exists" enough to confuse debugging.

Another mistake is using the wrong TensorFlow.js loader for the exported model format.

People also often upload model.json without the referenced weight shards, or they move the JSON file without updating relative shard paths.

Finally, if a frontend framework rewrites unknown routes to index.html, missing model files can look like JSON parsing errors instead of simple path errors.

Summary

'Failed to parse model.json usually means the fetched response is not the valid model manifest TensorFlow.js expected'
Inspect the real HTTP response body before changing conversion settings
Check for wrong paths, HTML error pages, broken JSON, and missing weight shards
Make sure you are using loadLayersModel or loadGraphModel for the correct exported model type
Validate model.json locally with a plain JSON parser when needed
In production, watch for CDN, CORS, and SPA rewrite behavior that changes the returned file

Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course

Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

ML System Design practice on Codemia

Design recommenders, ranking systems and training pipelines the way ML interviews actually ask for them, with worked solutions.

Practice ML system design

TensorflowJS Failed to parse model.json

ML System Design practice on Codemia

Introduction

What TensorFlow.js Expects

First Debug Step: Fetch the File Yourself

Common Causes

Wrong URL or Build Path

Corrupted or Incomplete model.json

Invalid Weight Manifest Paths

Serving the Wrong Artifact Type

Validate the JSON Structure

Make Sure the Loader Matches the Model

Deployment-Specific Checks

Common Pitfalls

Summary

Related reading

Tackling System Design Interview Problems

Track what you have practised

ML System Design practice on Codemia

Corrupted or Incomplete `model.json`