DeveloperError:renderState.lineWidth is out of range. Check minimumAliasedLineWidth and maximumAliasedLineWidth

CesiumJS
1

Hello, everyone,
I packaged a section of code related to Cesium into a private npm package. However, when I installed and used it in one of my Vue projects using the command ‘npm i xxx’, I encountered this error. Strangely, this issue only occurs when running the code in a development environment; it works fine when packaged and run in a production environment (I suspect there might be different error handling methods for Cesium between the development and production environments). The entire npm package’s code has been tested and runs correctly; it’s just that running it via npm installation leads to this issue (running the code files from npm as project files works without problems). The issue arises in the method below, but I am unclear where the problem lies. I have searched Google for a whole day and still haven’t found a solution. If you are familiar with this issue and see this post, I look forward to your response; any suggestions would be greatly appreciated.

Here are some code snippets where the error occurs, I’m sorry that I can’t provide the whole package code.

  
  export interface ContourLine {

    grade: number;

    positions: Cesium.Cartesian3[][];
  }
  
  export interface ContourResult {

    lines: ContourLine[];
  }

  coloring(
    t: number,
    startColor: Cesium.Color = Cesium.Color.fromCssColorString('#0e6bf4'),
    endColor: Cesium.Color = Cesium.Color.fromCssColorString('#fb5106')
  ) {
    return Cesium.Color.lerp(startColor, endColor, t, new Cesium.Color());
  }


  visualize(result: ContourResult, lineWidth = 2, colorFunc: Function | null = null): Cesium.GroundPolylinePrimitive[] {
    const primitives: Cesium.GroundPolylinePrimitive[] = [];
    const { lines } = result;
    lines.forEach(line => {
      const { positions, grade } = line;
      const t = (grade - this.minHeight) / (this.maxHeight - this.minHeight); // 插值比例
      const instances: Cesium.GeometryInstance[] = [];
      positions.forEach(ps => {
        const instance = new Cesium.GeometryInstance({
          geometry: new Cesium.GroundPolylineGeometry({
            positions: ps,
            width: lineWidth
          }),
        });
        instances.push(instance);
      });
      const color = colorFunc ? colorFunc(t) : this.coloring(t);
      primitives.push(
        new Cesium.GroundPolylinePrimitive({
          geometryInstances: instances,
          appearance: new Cesium.PolylineMaterialAppearance({
            material: new Cesium.Material({
              fabric: {
                type: 'Color',
                uniforms: {
                  color: color,
                },
              },
            }),
          }),
        })
      );
    });
    return primitives;
  }

npm package info:

  • Cesium : 1.123.0
  • Rollup : 4.28.1
  • Typescript : 5.7.2

Vue app info:

  • Cesium : 1.123.0
  • Vite : 6.0.1
  • Typescript : 5.6.2
  • Vue-tsc : 2.1.10

The expectational output added to the scene is like that

contour
contour1120×802 168 KB

Thanks to the community.

2

IIRC @jjspace ran into this issue where ContextLimits values were being improperly overridden when packaging add-on to CesiumJS.

@jjspace Do you happen to remember how you solved that?

3

I have found that that ContextLimits error:

DeveloperError: renderState.lineWidth is out of range. Check minimumAliasedLineWidth and maximumAliasedLineWidth.

Is usually the “canary in the mines” and first error that pops up when you are loading 2 different versions of Cesium into the same page/build. CesiumJS works a little with global variables/classes and when 2 versions of cesium are built into 1 project they can refer to different objects (like Scene and Scene2)

Please make sure you are only using 1 version of CesiumJS. If I understand you correctly you are using CesiumJS directly in a project and using CesiumJS through another library that uses CesiumJS itself? I’m guessing this could potentially cause 2 versions to be bundled if they don’t match?

I believe the last time this came up was this thread: Cesium ion SDK: initialization crashes renderer in production build

4

@Gabby_Getz
@jjspace
Thank you so much! Following your guide, I found the solution. The issue was not caused by Cesium but by a Vite plugin. Now, I have switched to ‘vite-plugin-cesium-build’ to use Cesium in my app, and it works properly.