Issue: Measurement Tool Crashes Cesium Renderer in Production Build: lineWidth is out of range. Check minimumAliasedLineWidth and maximumAliasedLineWidth

Hi all,

I’m trying to use the Cesium Ion Measurement Tool in my CRA + CRACO-based React project. Here’s a breakdown of my setup:

Package Versions

{
  "@cesiumgs/ion-sdk-measurements": "file:packages/cesiumgs-ion-sdk-measurements-7.0.0/package",
  "cesium": "1.108",
  "craco-cesium": "^1.2.0"
}

Peer Dependencies (in local ion-sdk-measurements)

"peerDependencies": {
  "@cesium/engine": "*",
  "@cesium/widgets": "*"
}

I followed the advice in this thread:
:link: Cesium Ion SDK initialization crashes renderer in production


How I Installed the Measurement SDK

I installed the @cesiumgs/ion-sdk-measurements locally using:

npm install --save ./packages/cesiumgs-ion-sdk-measurements-7.0.0/package

Implementation

Here’s my hook for activating the measurement tool:

import {
  AreaUnits,
  DistanceUnits,
  MeasureUnits,
  viewerMeasureMixin,
  VolumeUnits
} from '@cesiumgs/ion-sdk-measurements';
import { useEffect } from 'react';

export const useMeasurementTool = ({ viewerRef }) => {
  useEffect(() => {
    if (!viewerRef.current) return;

    viewerRef.current.extend(viewerMeasureMixin, {
      units: new MeasureUnits({
        distanceUnits: DistanceUnits.METERS,
        areaUnits: AreaUnits.SQUARE_METERS,
        volumeUnits: VolumeUnits.CUBIC_METERS,
      }),
    });
  }, [viewerRef]);
};

Error on Render

As soon as the measurement tool is initialized, Cesium throws the following error:

An error occurred while rendering. Rendering has stopped.
DeveloperError: renderState.lineWidth is out of range.  Check minimumAliasedLineWidth and maximumAliasedLineWidth.

Error
    at new DeveloperError (http://localhost:2023/static/js/bundle.js:18738:11)
    at new RenderState (http://localhost:2023/static/js/bundle.js:65207:11)
    at __webpack_modules__../node_modules/@cesium/engine/Source/Renderer/RenderState.js.RenderState.fromCache (http://localhost:2023/static/js/bundle.js:65430:16)
    at __webpack_modules__../node_modules/@cesium/engine/Source/Scene/PointPrimitiveCollection.js.PointPrimitiveCollection.update (http://localhost:2023/static/js/bundle.js:144498:90)
    at __webpack_modules__../node_modules/@cesium/engine/Source/Scene/PrimitiveCollection.js.PrimitiveCollection.update (http://localhost:2023/static/js/bundle.js:149282:19)
    at PrimitiveCollection.update (http://localhost:2023/cesium/Cesium.js:139352:21)
    at updateAndRenderPrimitives (http://localhost:2023/cesium/Cesium.js:227240:23)
    at executeCommandsInViewport (http://localhost:2023/cesium/Cesium.js:227092:5)
    at Scene4.updateAndExecuteCommands (http://localhost:2023/cesium/Cesium.js:226910:7)
    at render (http://localhost:2023/cesium/Cesium.js:227548:11)}
    ...

My Question

Has anyone successfully used the @cesiumgs/ion-sdk-measurements package with:

  • "cesium": "1.108"
  • "craco-cesium": "^1.2.0"
  • CRA (React + CRACO)

I’m not sure if this is a bug in ion-sdk-measurements, or if there’s a compatibility issue between Cesium versions or with how line widths are handled in WebGL (especially on certain GPUs or platforms).

Any guidance or working examples would be greatly appreciated.

Thanks in advance!

Hi,
I’m going to move this to the CesiumJS category. @cesiumgs/ion-sdk-measurements is poorly named package that has more to do with CesiumJS than Cesium ion. You will have better luck getting feedback in that group.

image

Hey @pradip27

This renderState.lineWidth error is usually one of the first that pops up when you’re including/bundling multiple versions of CesiumJS into the same project. This is not something that we currently support and will cause issues like you’re seeing. (GH issue)

The ion sdk versions require a matching version of CesiumJS. ion SDK measurements v7.0.0 that you’re trying to use relies on CesiumJS v1.129 (@cesium/engine version 17.0.0 under the hood). You will either have to upgrade your CesiumJS version or downgrade to the matching version of the ion sdk to match CesiumJS v1.108 (You may have to reach out to your sales contact for the download link)

You can check your versions with npm ls. A setup like below will NOT work!

I’ve opened another issue in our internal ion-sdk repo to try and investigate how we define dependencies and whether we can make that more clear at the installation step before it crashes.

1 Like

Hey @jjspace :waving_hand:

Thanks a lot for the clarification!

You’re absolutely right — I checked and realized I had mismatched versions of cesium and the @cesium/ion-sdk. I was using CesiumJS v1.108 with ion-sdk v7.0.0, which, as you pointed out, relies on CesiumJS v1.129 (engine v17.0.0). That explains the renderState.lineWidth error.

I’ll align the versions accordingly — either upgrade CesiumJS or roll back the ion-sdk to a version compatible with 1.108.

Appreciate you raising the internal issue around dependency clarity -that’ll definitely help others avoid similar pitfalls.

Thanks again for the support!