Perspective with Latest Angular in NX Monorepo

[mrudangit]

Add any other context about the problem here.

Created Sample NX mono repo here : https://github.com/TurboPerspective/Turbo

after npm install

1. Start Node Server
   npm run startServer

Works fine

2. Start Angular App
   npm run startClient

Followed documentation etc.

but getting build errors.

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome130.0", "edge130.0", "firefox115.0", "ios17.0", "safari17.0" + 7 overrides)
node_modules/@finos/perspective-viewer/dist/esm/perspective-viewer.js:2110:9:
2110 │ var Ie = await Me(je);
╵ ~~~~~
✘ [ERROR] Top-level await is not available in the configured target environment ("chrome130.0", "edge130.0", "firefox115.0", "ios17.0", "safari17.0" + 7 overrides)
node_modules/@finos/perspective-viewer/dist/esm/perspective-viewer.js:2111:0:
2111 │ await K(Ie);
╵ ~~~~~
✘ [ERROR] Top-level await is not available in the configured target environment ("chrome130.0", "edge130.0", "firefox115.0", "ios17.0", "safari17.0" + 7 overrides)
node_modules/@finos/perspective-viewer/dist/esm/perspective-viewer.js:2112:0:
2112 │ await J();
╵ ~~~~~

[mrudangit]

2.x was working fine before I know 3.x has breaking changes because of esmodules it seems
Any pointers to have it working in Angular and Perspective 3.x

[texodus]

I don't know anything about Turbo, but that error message looks pretty self explanatory to me - looks you've defined (or defaulted to) browser compatibility in your bundler that does not support a JavaScript version with a minimum viable WebAssembly environment.

[mrudangit]

Thanks for the reply.
130 version supports a minimum viable web assembly environment.
I think it started after Perspective moved to ES build in 3.x

I was able import via CDNs

[mrudangit]

this what I am doing

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import perspective from "@finos/perspective";

@component({
imports: [RouterModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
title = 'TurboBlotter';

constructor() {
console.log('AppComponent constructor');
this.initPerspective().then(() => {
console.log('Perspective loaded');
});
}

  private async initPerspective() {
    console.log('AppComponent initPerspective');
    const w = await perspective.worker();
    const table = await w.table([{ x: 1 }, { x: 2 }, { x: 3 }]);
  }

}

[mrudangit]

get this build error

Application bundle generation complete. [0.084 seconds]

Page reload sent to client(s).
X [ERROR] No matching export in "node_modules/@finos/perspective/src/ts/perspective-server.worker.ts" for import "default"
node_modules/@finos/perspective/dist/esm/perspective.js:2:7:
2 │ import w from "../../src/ts/perspective-server.worker.js";
╵ ^
7:30:27 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@finos/perspective/dist/esm/perspective.js:2:7: ERROR: No matching export in "node_modules/@finos/perspective/src/ts/perspective-server.worker.ts" for import "default"
at failureErrorWithLog (D:\PerspectiveJan2025\turbo\node_modules\vite\node_modules\esbuild\lib\main.js:1472:15)
at D:\PerspectiveJan2025\turbo\node_modules\vite\node_modules\esbuild\lib\main.js:945:25
at D:\PerspectiveJan2025\turbo\node_modules\vite\node_modules\esbuild\lib\main.js:1353:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[texodus]

I cannot debug your build from a log snippet posted GitHub comment, we need a minimal repro.

This repro is appreciated but it is not minimal enough for me to debug - you will to do some more work to isolate the issue if there is an incompatibility with Turbo.

[mrudangit]

Try this if possible

git clone https://github.com/TurboPerspective/Turbo.git

cd to root folder

npm install

then

nx run TurboClient:serve

sample angular app is here

https://github.com/TurboPerspective/Turbo/tree/main/apps/TurboClient

[mrudangit]

other way

git clone https://github.com/TurboPerspective/Turbo.git

cd to root folder

0. npm install

1. Start Node Server - This is perspective running in node hosting a remote table
   npm run startServer

2. Start Angular App in different command window
   npm run startClient