Unable to load 3DTiles after upgrading app to CesiumJS v1.105.1

CesiumJS
1

I’ve upgraded my CesiumJS app from v1.96.0 to v1.105.1 and have found my own 3DTiles files are no longer loading from Cesium Ion.

The Cesium viewer is displaying the following message: ‘This application is using Cesium’s default ion access token. Please assign Cesium.Ion.defaultAccessToken with an access token from your ion account before making any Cesium API calls.’. However, I have checked that the access token is correct and have tested it successfully in an instance of my earlier app.

The Chrome developer console is displaying three warnings but no errors:

Cesium3DTileset constructor parameter options.url was deprecated in CesiumJS 1.104. It will be removed in 1.107. Use Cesium3DTileset.fromUrl instead. oneTimeWarning @ oneTimeWarning.js:38

Cesium3DTileset.readyPromise was deprecated in CesiumJS 1.104. It will be removed in 1.107. Use Cesium3DTileset.fromUrl instead. oneTimeWarning @ oneTimeWarning.js:38

Required property geometricError is undefined for this tile. Using parent's geometric error instead. oneTimeWarning @ oneTimeWarning.js:38

The code causing the error is as follows (where ‘bTile’ is a variable for a valid tileset ID):

const buildingTileset = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(bTile),
  })
);

I’ve tried updating the code for loading 3DTiles in accorance with the Changelog for Cesium v1.104 as follows:

try {
  const tileset = await Cesium.Cesium3DTileset.fromUrl(Cesium.IonResource.fromAssetId(bTile));
  viewer.scene.primitives.add(tileset);
} catch (error) {
  console.log(`Failed to load tileset: ${error}`);
}

When running or building the app with webpack I then receive the following error:

Module parse failed: Top-level-await is only supported in EcmaScript Modules
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

To resolve the issue I’ve tried adding the experimental ‘topLevelAwait’ feature to my webpack config:

const path = require("path");

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopywebpackPlugin = require("copy-webpack-plugin");
const Dotenv = require("dotenv-webpack");

// The path to the CesiumJS source code
const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "../Build/Cesium/Workers";

module.exports = {
  context: __dirname,
  entry: {
    app: "./src/index.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  // Add source mapping directive
  devtool: "source-map",
  // Add module rules for loading CSS and other files
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
        use: ["url-loader"],
      },
    ],
  },
  // Address Webpack compilation issues of Cesium
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),

    // Needed to compile multiline strings in Cesium
    sourcePrefix: "",
  },
  amd: {
    // Enable webpack-friendly use of require in Cesium
    toUrlUndefined: true,
  },
  // Add a Cesium alias that can be referenced in app code
  resolve: {
    alias: {
      // CesiumJS module name
      cesium: path.resolve(__dirname, cesiumSource),
    },
    // Add fallbacks for non-polyfilled packages in Webpack 5
    fallback: {
      assert: require.resolve('assert/'),
      buffer: require.resolve('buffer/'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      stream: require.resolve('stream-browserify'),
      url: require.resolve('url/'),
      util: require.resolve('util/'),
      zlib: require.resolve('browserify-zlib')
    },
  },
  // Add experimental topLevelAwait
  experiments: {
    topLevelAwait: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
    // Copy Cesium Assets, Widgets, and Workers to a static directory
    new CopywebpackPlugin({
      patterns: [
        { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
        { from: path.join(cesiumSource, "Assets"), to: "Assets" },
        { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
      ],
    }),
    new webpack.DefinePlugin({
      // Define relative base path in Cesium for loading assets
      CESIUM_BASE_URL: JSON.stringify(""),
    }),
    new Dotenv(),
  ],
};

This has not resolved the issue. Any advice or guidance would be appreciated.

2

It looks like developers are having success with 1.105.2 and webpack in the following thread:

I wonder if you can compare webpack configurations?