search

visgl / deck.gl

WebGL2 powered visualization framework
https://deck.gl
MIT License
12.31k stars 2.09k forks source link

[Bug] Npm Update from 8.9.31 -> 9.0.28 luma.gl has no exported member UniformValue #9131

Closed fuliii1 closed 2 months ago

fuliii1 commented 3 months ago

Description

Hi,

I would like to update @deck.gl in my angular project from 8.9.31 -> 9.0.28. During the project compilation I get the following error:

Namespace '"/ClientApp/node_modules/@luma.gl/shadertools/dist/lib/shader-module/shader-module"' has no exported member 'UniformValue'. [plugin angular-compiler]

I have attached my package.json file. package.json Thanks

Flavors

Expected Behavior

No response

Steps to Reproduce

After the update deck.gl and add @deck.gl/layers with version 9.0.28 the build failed.

Environment

Logs

No response

felixpalmer commented 3 months ago

Try deleting node_modules

fuliii1 commented 3 months ago

Hi @felixpalmer,

I have removed node_modules I have removed package-lock.json I have cleared npm cache After all I've ran npm install but ng serve has reported the same problem: 

TS2694: Namespace '"d:/CODE/.NET/CSharp/2022/HailPrevention/HailPrevention/ClientApp/node_modules/@luma.gl/shadertools/dist/lib/shader-module/shader-module"' has no exported member 'UniformValue'. [plugin angular-compiler]

    node_modules/@deck.gl/core/dist/shaderlib/picking/picking.d.ts:25:135:
      25 │ ...dist/lib/shader-module/shader-module").UniformValue>) | undefined;

Thanks

felixpalmer commented 2 months ago

@fuliii1 I tried this locally:

mkdir angular-package-bug
mv package.json angular-package-bug/
cd angular-package-bug
node --version
v18.20.4
npm --version
10.7.0
npm install

But I get the following error:

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: hailprevention@0.0.0
npm error Found: @angular/compiler@18.2.2
npm error node_modules/@angular/compiler
npm error   @angular/compiler@"18.2.2" from the root project
npm error
npm error Could not resolve dependency:
npm error peer @angular/compiler@"18.2.4" from @angular/compiler-cli@18.2.4
npm error node_modules/@angular/compiler-cli
npm error   dev @angular/compiler-cli@"^18.2.2" from the root project
npm error   peer @angular/compiler-cli@"^18.0.0" from @angular-devkit/build-angular@18.2.4
npm error   node_modules/@angular-devkit/build-angular
npm error     dev @angular-devkit/build-angular@"^18.2.2" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

Could you try to work with the package.json in isolation and reduce the number of dependencies? It's hard to debug the issue when the package.json is so large

fuliii1 commented 2 months ago

Hi @felixpalmer,

I've attached the my app source code. ClientApp.zip

I use node version:

node --version
v22.7.0

You may see different error because of your node version may not compatible with Angular version. https://angular.dev/reference/versions

You can reproduce the issue if you call

npm install
ng serve

I hope I could help in the investigation.

Many thanks

felixpalmer commented 2 months ago

I see the same error with node 22.7, what is your npm version?

fuliii1 commented 2 months ago

Hi @felixpalmer ,

npm version:

npm --version
9.8.1

Thanks

felixpalmer commented 2 months ago

OK I could get the install with npm install --force. I tried running your code and I do not see the error. Could you try to create a codesandbox that recreates the issue?

fuliii1 commented 2 months ago

Hi @felixpalmer,

I have updated the npm version to the latest on my dev machine.

npm --version
10.8.3

I haven't experienced any issue during npm install but ng serve still doesn't work. Error message is the same.

I'm going to create codesanbox sample soon to reproduce the problem soon.

Thanks for your support

fuliii1 commented 2 months ago

Hi @felixpalmer,

Finally I could upgrade to 9.0.28. Our package.json is this:

{
  "name": "hailprevention",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run HailPrevention:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "18.2.6",
    "@angular/common": "18.2.6",
    "@angular/compiler": "18.2.6",
    "@angular/core": "18.2.6",
    "@angular/forms": "18.2.6",
    "@angular/localize": "18.2.6",
    "@angular/platform-browser": "18.2.6",
    "@angular/platform-browser-dynamic": "18.2.6",
    "@angular/platform-server": "18.2.6",
    "@angular/router": "18.2.6",
    "@deck.gl/layers": "^9.0.28",
    "@deck.gl/mapbox": "^9.0.28",
    "@progress/kendo-angular-buttons": "^16.8.0",
    "@progress/kendo-angular-common": "^16.8.0",
    "@progress/kendo-angular-dateinputs": "^16.8.0",
    "@progress/kendo-angular-dialog": "^16.8.0",
    "@progress/kendo-angular-dropdowns": "^16.8.0",
    "@progress/kendo-angular-excel-export": "^16.8.0",
    "@progress/kendo-angular-grid": "^16.8.0",
    "@progress/kendo-angular-icons": "^16.8.0",
    "@progress/kendo-angular-inputs": "^16.8.0",
    "@progress/kendo-angular-intl": "^16.8.0",
    "@progress/kendo-angular-l10n": "^16.8.0",
    "@progress/kendo-angular-label": "^16.8.0",
    "@progress/kendo-angular-layout": "^16.8.0",
    "@progress/kendo-angular-notification": "^16.8.0",
    "@progress/kendo-angular-pdf-export": "^16.8.0",
    "@progress/kendo-angular-popup": "^16.8.0",
    "@progress/kendo-angular-progressbar": "^16.8.0",
    "@progress/kendo-angular-treeview": "^16.8.0",
    "@progress/kendo-data-query": "^1.7.0",
    "@progress/kendo-drawing": "^1.20.2",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-svg-icons": "latest",
    "@progress/kendo-theme-default": "9.0.0",
    "angular-plotly.js": "^5.2.2",
    "azure-maps-control": "3.1.1",
    "azure-maps-drawing-tools": "^1.0.4",
    "bootstrap": "^5.3.3",
    "core-js": "^3.38.1",
    "deck.gl": "^9.0.28",
    "file-saver": "^2.0.5",
    "guid-typescript": "^1.0.9",
    "html2canvas": "^1.4.1",
    "lzutf8": "^0.6.3",
    "mapbox-gl": "^1.13.3",
    "ngx-resize-observer": "^2.7.0",
    "oidc-client": "^1.11.5",
    "plotly.js": "^2.35.0",
    "popper.js": "^1.16.1",
    "rxjs": "^7.8.1",
    "tslib": "^2.7.0",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.2.6",
    "@angular/cli": "^18.2.6",
    "@angular/compiler-cli": "^18.2.6",
    "@angular/language-service": "^18.2.6",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "~2.0.13",
    "@types/node": "^22.5.2",
    "codelyzer": "^6.0.2",
    "eslint": "^9.9.1",
    "ini": "^4.1.3",
    "jasmine-core": "5.2.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "^6.4.4",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "ng-openapi-gen": "^0.51.0",
    "typescript": "5.5.4"
  },
  "optionalDependencies": {
    "protractor": "~7.0.0",
    "ts-node": "~10.9.2",
    "tslint": "~6.1.3"
  }
}

Now I'm facing other issue: I'm using MapboxOverlay instead of MapboxLayer. But I get WARNING: Too many active WebGL contexts. Oldest context will be lost.

Our solution based on this example: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/deck.gl/deck.gl.html

But it is unclear how to dispose the DeckGLOverlay class. Removing the control from map and call finalize seems not enough:

 private refreshMap(): void {
    // Add the layer to the map
    const refl3Dlayers = this._map.controls.getControls();
    if (refl3Dlayers) {
      for (const control of refl3Dlayers) {
        if (control instanceof DeckGLOverlay) {
          this._map.controls.remove(control);
          (control as DeckGLOverlay).finalize();
        }
      }
    }
    this._map.controls.add(new DeckGLOverlay({
      layers: [
        new PointCloudLayer({
          id: Constants.Refl3DLayerId,
          data: this._data[FormatDateTime(this.commonDataService.time)].filter(item => item.value >= this.reflectionLimit),
          pickable: false,
          coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
          pointSize: 500,
          sizeUnits: "meters",
          getPosition: d => d.position,
          //getNormal: d => d.normal,
          getColor: d => d.color,
          type: PointCloudLayer
        })
      ]
    }));
  }

Thanks

felixpalmer commented 2 months ago

Closing as issue appears to be solved. If you have another problem, open a fresh issue