Lots of work being done but hard to understand

[orefalo]

Well, first and foremost, Thank you! I can see by the number of commits that you have put major work in this project.

Trying to find a simple webpack example is far from trivial - the implementation is spread in comments across the code/documentation.

Anyway, you could open my eyes?

Thank you so much

[orefalo]

just found this - https://github.com/aduh95/viz.js-playground

[orefalo]

so.. I am almost there - I replaced viz.js with @adhum95/viz.js in graphql-voyager. My branch can be found at https://github.com/orefalo/graphql-voyager

I am getting a webpack error (I HATE WEBPACK!)

ERROR in ./node_modules/@aduh95/viz.js/dist/index.mjs 11:9
Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type.
|  */
| class e {
>   _worker;
|   _isNodeWorker;
|   _listeners = [];
 @ ./src/graph/svg-renderer.ts 10:0-33 20:27-30
 @ ./src/graph/index.ts
 @ ./src/components/Voyager.tsx
 @ ./src/components/index.tsx
 @ ./src/index.tsx
 @ multi ./src/polyfills.ts ./src/index.tsx

[aduh95]

I looks like your webpack doesn't know about class properties... It was added to the language quite recently (ES2022), so if you update your dependencies the issue go away. If not, you may need to tweak your Babel configuration to force it to transpile class fields (i.e. to add include: ['@babel/plugin-proposal-class-properties'], to your @babel/preset-env config object).

[orefalo]

Morning Antoine, thank you for your feedback. I didn't know about this plugin, but I believe I solved this particular problem by following your recommendations on https://github.com/aduh95/viz.js/issues/20 and switching to webpack5 (which bundles the plugin by default)

I created a new branch called webpack5 https://github.com/orefalo/graphql-voyager/tree/webpack5 at first, webpack complained with:

ERROR in ./src/graph/get-viz.js-worker.js (./node_modules/worker-loader/dist/cjs.js!./src/graph/get-viz.js-worker.js) 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/worker-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> export default function Worker_fn() {
|   return new Worker(__webpack_public_path__ + "bundle.worker.js");
| }
 @ ./src/graph/svg-renderer.ts 5:0-61 18:45-54
 @ ./src/graph/index.ts 3:0-31 3:0-31

I then changed the get-viz.js-worker.js to a .ts and I got this error:

ERROR in /Users/orefalo/GitRepositories/graphql-voyager/src/graph/get-viz.js-worker.ts
./src/graph/get-viz.js-worker.ts (./node_modules/worker-loader/dist/cjs.js!./src/graph/get-viz.js-worker.ts) 2:25-58
[tsl] ERROR in /Users/orefalo/GitRepositories/graphql-voyager/src/graph/get-viz.js-worker.ts(2,26)
      TS2307: Cannot find module '@aduh95/viz.js/dist/render.wasm' or its corresponding type declarations.
ts-loader-default_e3b0c44298fc1c14
 @ ./src/graph/svg-renderer.ts 5:0-58 18:45-54

I left the branch in this latest state because I believe I am getting closer to the Grail ;-)

If I could leverage your expertise one more time,

viz.js is instantiated in this file → https://github.com/orefalo/graphql-voyager/blob/webpack5/src/graph/svg-renderer.ts

Pulling my hairs on these over complex webpack configurations.

Thank you

[orefalo]

I got it to...

  ERROR in ./src/graph/get-viz.js-worker.js 1:0-61
  Module not found: Error: Package path ./dist/render.browser.js is not exported from package /Users/orefalo/GitRepositories/graphql-voyager/node_modules/@aduh95/viz.js (see exports field in /Users/orefalo/GitRepositories/graphql-voyager/node_modules/@aduh95/viz.js/package.json)

  ERROR in ./src/graph/get-viz.js-worker.js 2:0-59
  Module not found: Error: Package path ./dist/render.wasm is not exported from package /Users/orefalo/GitRepositories/graphql-voyager/node_modules/@aduh95/viz.js (see exports field in /Users/orefalo/GitRepositories/graphql-voyager/node_modules/@aduh95/viz.js/package.json)

anu idea why this stupid webpack/babel pair doesn't find the files (they are on the disk by the way...)

[aduh95]

I then changed the get-viz.js-worker.js to a .ts and I got this error:

Maybe try .mjs instead of .ts if .js is not working for you.

anu idea why this stupid webpack/babel pair doesn't find the files (they are on the disk by the way...)

So my package is defining a "exports" field in its package.json, which does two things:

• encapsulation: that's why Webpack doesn't want to let you load the file with its path (that's there so I can decide to move files around without being a breaking change for my users)
• conditional exports: it lets me define a different file if the user is targeting node or the web.

More info on this can be found in Node.js docs: https://nodejs.org/api/packages.html#exports

To fix this, you should get away with changing those two imports: https://github.com/orefalo/graphql-voyager/blob/f1caf42b08ffa25d8d76bd21a3ba7225471000e7/src/graph/get-viz.js-worker.js#L1-L2

With:

import loadWASM from '@aduh95/viz.js/worker';
import wasmLocation from '@aduh95/viz.js/wasm';

Let me know if that fixed it for you.

[orefalo]

ok - so I tried for many hours and it didn't compile. I don't think it's your library. WebPack has turned so complex... all there plugin and generated layers make the output unpredictable. Anyway, I am trying with other bundlers to see if I get any chances of success. plz stay tuned.