Error rendering 3D models (Runtime Error) Failed to load model: [object Object]↵Unexpected token

Hello, hope you can help me… After struggling so much trying to integrate vue, webpack and cesium I got it thanks to this tutorial Thought it was fine because I actually can consume an api and show circles from it but when i try to render the 3D model it got broke… (RuntimeError {name: “RuntimeError”, message: “Failed to load model: [object Object]↵Unexpected token < in JSON at position 0”, stack: “Error↵ at new RuntimeError (webpack-internal://…e_modules/cesium/Source/ThirdParty/when.js:647:4)”})

I’m using this function I got it from the

createModel (url, height) {

// this.viewer.entities.removeAll();

var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);

var heading = Cesium.Math.toRadians(135);

var pitch = 0;

var roll = 0;

var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

var entity = this.viewer.entities.add({

name : url,

position : position,

orientation : orientation,

model : {

uri : url,

minimumPixelSize : 128,

maximumScale : 20000



this.viewer.trackedEntity = entity;


this.createModel(’…/…/SampleData/models/CesiumAir/Cesium_Air.glb’, 5000.0);

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I want to load 3D buildings on the map, I have tried to load a tile just trying the code from an sandbox example and another error as weird as this was showed so I decided to start by one 3D model. I could say that the error is the webpack configuration because the code it is from the examples but so far I have no idea what else to do or probably the location of the sampleData folder but I actually have placed it in many ways… nothing works

Even I updated the packages, node, npm

“axios”: “^0.18.0”,

“cesium”: “^1.46.1”,

“vue”: “^2.5.2”,

“vue-router”: “^3.0.1”

and I’m using opera as well as chrome on windows 10

Thank you for your help


Hi there,

It sound like in your webpack configuration, you’re loading .glb files as JSON, when they are binary files. There’s probably a webpack loader that will handle loading binary files.



Thanks Gabby,

I’ve been looking any help about what you mention but nothing works… by the way I got this Warning

Webpack-internal:///./node_modules/webpack-dev-server/client/index.js?http://localhost:8080:153 ./node_modules/cesium/Source/ThirdParty/draco_decoder.wasm

Module parse failed: Unexpected character ’


Module parse failed: Unexpected character ‘#’ (87:0)

You may need an appropriate loader to handle this file type.


#define FXAA_QUALITY_P0 1.5

@ ./node_modules/cesium/Source/ThirdParty ^./.*$

@ ./node_modules/cesium/Source/ThirdParty/xss.js

@ ./node_modules/cesium/Source/Core/Credit.js

@ ./node_modules/cesium/Source/Cesium.js

@ ./src/main.js

@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I think this warning is the reason 'cuz whne i call the 3D model it is triggered… Have you any idea how to solve it


This is a different error, the Draco module is a web assembly binary file, and should be loaded with an appropriate loader. After a quick search, I found this loader, but haven’t tested it myself.

Thanks for bringing these errors up, I have opened an issue in the Cesium recommended webpack repo to add these configurations to the config file and the tutorial.