Having Loader issues with Cesium Models

CesiumJS
1

Hello,
I recently tried to install cesium with my Reactjs app and when starting the application, I am getting the following errors:

I updated my Webpack.config.js to the following but I still get errors!

{
test: /.js|.jsx$/,// Match JavaScript files
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
},
},
{
test: /.kml$/,
use: ‘raw-loader’,
},

ERROR in ./node_modules/@cesium/engine/Source/Scene/Model/I3dmLoader.js 150:30
Module parse failed: Unexpected token (150:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
| texturesLoaded: {
| get: function () {

  return this._gltfLoader?.texturesLoaded;

| },
| },
@ ./node_modules/@cesium/engine/index.js 940:0-75 940:0-75
@ ./node_modules/cesium/Source/Cesium.js
@ ./src/modules/WilsonContainer.tsx
@ ./src/components/drawer/MainDrawer.tsx
@ ./src/bootstrap.tsx
@ ./src/index.ts

ERROR in ./node_modules/@cesium/engine/Source/DataSources/ModelVisualizer.js 162:28
Module parse failed: Unexpected token (162:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
|
| if (!defined(modelData) || resource.url !== modelData.url) {

  if (defined(modelData?.modelPrimitive)) {

| primitives.removeAndDestroy(modelData.modelPrimitive);
| delete modelHash[entity.id];
@ ./node_modules/@cesium/engine/index.js 748:0-85 748:0-85
@ ./node_modules/cesium/Source/Cesium.js
@ ./src/modules/WilsonContainer.tsx
@ ./src/components/drawer/MainDrawer.tsx
@ ./src/bootstrap.tsx
@ ./src/index.ts

ERROR in ./node_modules/@cesium/engine/Source/Scene/Cesium3DTilesVoxelProvider.js 315:37
Module parse failed: Unexpected token (315:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
| function addAttributeInfo(provider, metadata, className) {
| const { schema, statistics } = metadata;

const classStatistics = statistics?.classes[className];
| const properties = schema.classes[className].properties;
|
@ ./node_modules/@cesium/engine/index.js 415:0-101 415:0-101
@ ./node_modules/cesium/Source/Cesium.js
@ ./src/modules/WilsonContainer.tsx
@ ./src/components/drawer/MainDrawer.tsx
@ ./src/bootstrap.tsx
@ ./src/index.ts

ERROR in ./node_modules/@cesium/engine/Source/Core/buildModuleUrl.js 44:27
Module parse failed: Unexpected token (44:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
| if (typeof CESIUM_BASE_URL !== “undefined”) {
| baseUrlString = CESIUM_BASE_URL;

} else if (defined(import.meta) && defined(import.meta.url)) {
| // ESM
| baseUrlString = getAbsoluteUri(“.”, import.meta.url);
@ ./node_modules/@cesium/engine/Source/Core/Iau2006XysData.js 1:0-49 258:11-25
@ ./node_modules/@cesium/engine/Source/Core/Transforms.js
@ ./node_modules/@cesium/engine/Source/Scene/Model/ModelSceneGraph.js
@ ./node_modules/@cesium/engine/index.js
@ ./node_modules/cesium/Source/Cesium.js
@ ./src/modules/WilsonContainer.tsx
@ ./src/components/drawer/MainDrawer.tsx
@ ./src/bootstrap.tsx
@ ./src/index.ts

ERROR in ./node_modules/@cesium/engine/Source/Workers/createTaskProcessorWorker.js 73:21
Module parse failed: Unexpected token (73:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
| function onMessageErrorHandler(event) {
| postMessage({

  id: event.data?.id,

| error: postMessage failed with error: ${JSON.stringify(event)},
| });
@ ./node_modules/@cesium/engine/index.js 1125:0-101 1125:0-101
@ ./node_modules/cesium/Source/Cesium.js
@ ./src/modules/WilsonContainer.tsx
@ ./src/components/drawer/MainDrawer.tsx
@ ./src/bootstrap.tsx
@ ./src/index.ts

ERROR in ./node_modules/@cesium/engine/Source/Scene/Model/MetadataPipelineStage.js 86:29
Module parse failed: Unexpected token (86:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See Concepts | webpack
| const { shaderBuilder, model } = renderResources;
| const { structuralMetadata = {}, content } = model;

const statistics = content?.tileset.metadataExtension?.statistics;
|
| const propertyAttributesInfo = getPropertyAttributesInfo(
@ ./node_modules/@cesium/engine/index.js 946:0-97 946:0-97
@ ./node_modules/cesium/Source/Cesium.js
@ ./src/modules/WilsonContainer.tsx
@ ./src/components/drawer/MainDrawer.tsx
@ ./src/bootstrap.tsx
@ ./src/index.ts

2

I’ve tired the installation guide but I still have issues with modules:

3

Hi there,

There was a fix recently to avoid the import.meta error in webpack. That will go out with the next release on October 2.

For the errors related to the optional chaining operator (?.), see this solution.

It occurs that optional chaining won’t be supported by Webpack 4 alone, however, it is already supported in Webpack 5, so if it’s possible the best course of action would be to upgrade to Webpack 5.

Otherwise if you can’t update to Webpack 5, you should use Babel (@babel/plugin-proposal-optional-chaining) or TypeScript compiler (target at most ES2019) for optional chaining transpilation.

1 Like
4

Thank you for the reply!
Do you have any documentation for Cesium ion on webTAK?
I’m a developer on TAK products such as webTAK and ATAK and would love to be able to get 3Dtiles of buildings using the google api along with Cesium but I’m not sure how to call and render the information….

Hope you can guide me!?

I tried the example code you have on the cesium site and I have both tokens, cesium and google, but the example code does not even allow me to render the buildings.

5

No specific info about webTAK or ATAK. But id you provide additional info like code examples, we can help troubleshoot.

1 Like