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.