Orb tries to load worker file that doesn't exist [Angular]

[frne]

Context

Using Orb in an Angular 17 component:

export class ApplicationsComponent implements AfterViewInit {

  @ViewChild('graph')
  graphElement!: ElementRef<HTMLDivElement>;

  orbInstance!: Orb;

  reload() {
    this.orbInstance.data.setup({
      nodes: [
        {id: "foo", label: "Test App"}
      ],
      edges: []
    })

    this.orbInstance.view.render(() => {
      this.orbInstance.view.recenter();
    });
  }

  ngAfterViewInit(): void {
    this.orbInstance = new Orb<Node, Edge>(this.graphElement.nativeElement)
    this.reload();
  }
}

Problem

When constructing new Orb in ngAfterViewInit(), it tries to load a worker file using a GET call to the following URL:

http://localhost:8990/@fs/home/boss/Projects/rapid-arch/frontend/.angular/cache/17.2.2/vite/deps/process.worker?type=module&worker_file

The following error occurs:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Question

It seems that Orb is trying to load a webworker or similar, but this URL doesn't exist (content of index.html is returned). Is it possible to preload the worker or supply it under a different path? Is there any configuration to change or deactivate this behavior? If not, can it be changed?

[antejavor]

Hi @frne, thanks for opening the issue. Someone from our team will pick this up and get back to you here. In the meantime, what are you trying to build with Orb? 😃

[frne]

Thanks for taking care @antejavor
It's currently just a PoC / side project to visualize solution architecture using a directed graph.

[edanweis]

I'm having the same issue building a graph editor with Vue. Seems to be pointing to a worker file in the local development server

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

http://localhost:5173/node_modules/.vite/deps/process.worker?worker_file&type=module

[cizl]

@frne Did you correctly set up the worker script in angular.json?

In your project setup do you have a tsconfig.worker.json? In angular.json you should have something similar to the following:

      "architect": {
        "build": {
            ...
            "webWorkerTsConfig": "./path/to/tsconfig.worker.json",
            ...

And set up the worker tsconfig file similar to this:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2020",
      "webworker"
    ],
    "module": "es2020",
    "types": ["node"],
    "allowJs": true
  },
  "include": [
    "../../node_modules/@memgraph/orb/**/*.worker.ts",
    "../../node_modules/@memgraph/orb/**/*.worker.js"
  ]
}

Otherwise Angular won't know what to do with simulator.worker.js.
If set up correctly, you should see the script as a separate worker in your browser. In chrome it would be under DevTools -> Sources -> Threads (right sidebar)

[cizl]

I'm having the same issue building a graph editor with Vue. Seems to be pointing to a worker file in the local development server

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

http://localhost:5173/node_modules/.vite/deps/process.worker?worker_file&type=module

Not too familiar with Vue, but maybe something similar should be set up regarding WebWorkers?
If the worker needs to be in the source files of the Vue project repository, maybe you can try running a postinstall script to copy the worker from the dependencies into the project src folder.

[gcleaves]

@edanweis, the Vue problem is more an issue with the local development server failing to set the correct content type. Are you using Nuxt? I'm facing the same problem, but it only happens with the development server using nitrojs. If I do a proper build, then everything works as expected because the production server serves process.worker with content type "text/javascript".

I can't for the life of me figure out how to instruct nitrojs/h3 to server that file with the correct content type.

[frne]

Fixing the tsconfig resolved it. Thank you @cizl

[stefanak-michal]

Hi.

I have same type of problem with Vite+React. Please, does anybody knows how to solve it?

It is problem only when it runs live (dev). When I make build it works there correctly.

[tonilastre]

@stefanak-michal have you had any success with this? I am unsure if we can add any improvements to the library itself. I saw you moved from Vite to Parcel where it is working ok: stefanak-michal/cyphergui#111

[stefanak-michal]

@tonilastre no success with Vite. Therefore the switch. It works as I needed with Parcel.