SyntaxError: Named export 'graphviz' not found. #120

magjac · 2022-10-05T09:58:37Z

After having adopted type=module for d3-graphviz like D3 version 7 has, I get the following error when trying to npm run test for d3-graphviz using hpcc-js/wasm version 1.15.5 or later:

file:///home/magjac/d3-graphviz/src/dot.js:1
import { graphviz } from "@hpcc-js/wasm";
         ^^^^^^^^
SyntaxError: Named export 'graphviz' not found. The requested module '@hpcc-js/wasm' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@hpcc-js/wasm';
const { graphviz } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
    at async formattedImport (/home/magjac/d3-graphviz/node_modules/mocha/lib/nodejs/esm-utils.js:7:14)
    at async Object.exports.requireOrImport (/home/magjac/d3-graphviz/node_modules/mocha/lib/nodejs/esm-utils.js:38:28)
    at async Object.exports.loadFilesAsync (/home/magjac/d3-graphviz/node_modules/mocha/lib/nodejs/esm-utils.js:91:20)
    at async singleRun (/home/magjac/d3-graphviz/node_modules/mocha/lib/cli/run-helpers.js:125:3)
    at async Object.exports.handler (/home/magjac/d3-graphviz/node_modules/mocha/lib/cli/run.js:370:5)

Am I importing this incorrectly?

It works fine with version 1.15.4.

For background and details of the D3 change, see d3/d3#3469 and d3/d3#3501.

npm run build works without problems.

My system:

$ npm --version
8.15.0
$ node --version
v16.17.1
$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 22.04.1 LTS
Release:	22.04
Codename:	jammy

See magjac/d3-graphviz#242 for details.

The text was updated successfully, but these errors were encountered:

GordonSmith · 2022-10-05T10:01:25Z

You may need to manually specify the esm module:

import { graphviz } from "@hpcc-js/wasm/dist/index.es6";

GordonSmith · 2022-10-05T10:03:09Z

My package.json must not be 100% correct here: https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/package.json#L18-L33

If you can spot anything let me know...

magjac · 2022-10-05T11:14:55Z

I should say that it worked fine also with hpcc-js/wasm version 1.15.5 or later before I adopted type=module, e.g. in the d3-graphviz master branch.

You may need to manually specify the esm module:
import { graphviz } from "@hpcc-js/wasm/dist/index.es6";

That didn't work:

(!) Plugin node-resolve: Could not resolve import "@hpcc-js/wasm/dist/index.es6" in /home/magjac/d3-graphviz/src/dot.js using exports defined in /home/magjac/d3-graphviz/node_modules/@hpcc-js/wasm/package.json.
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@hpcc-js/wasm/dist/index.es6 (imported by src/dot.js)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
@hpcc-js/wasm/dist/index.es6 (guessing 'index_es6')

My package.json must not be 100% correct here: https://github.com/hpcc-systems/hpcc-js-wasm/blob/trunk/package.json#L18-L33

If you can spot anything let me know...

This is mostly black magic to me. I don't know what any of this means. The change I've made to my package.json can be seen in this commit: magjac/d3-graphviz@f0ecc3f. I don't know if it's correct either. D3 recommends reading Sindre Sorhus’s FAQ, but I can't make heads or tails of it.

magjac · 2022-10-05T11:17:49Z

Also also tried this patch:

diff --git a/src/dot.js b/src/dot.js
index 4b14ae7..fbdb4fd 100644
--- a/src/dot.js
+++ b/src/dot.js
@@ -1,5 +1,4 @@
-import { graphviz } from "@hpcc-js/wasm";
-import { graphvizSync } from "@hpcc-js/wasm";
+import * as hpccWasm from "@hpcc-js/wasm";
 import * as d3 from "d3-selection";
 import {extractAllElementsData, extractElementData, createElementWithAttributes} from "./element.js";
 import {convertToPathData} from "./svg.js";
@@ -12,8 +11,8 @@ export function initViz() {
 
     // force JIT compilation of @hpcc-js/wasm
     try {
-        graphviz.layout("", "svg", "dot").then(() => {
-            graphvizSync().then((graphviz1) => {
+        hpccWasm.graphviz.layout("", "svg", "dot").then(() => {
+            hpccWasm.graphvizSync().then((graphviz1) => {
                 this.layoutSync = graphviz1.layout.bind(graphviz1);
                 if (this._worker == null) {
                     this._dispatch.call("initEnd", this);
diff --git a/src/graphviz.js b/src/graphviz.js
index 97650ec..bc3b68f 100644
--- a/src/graphviz.js
+++ b/src/graphviz.js
@@ -49,7 +49,7 @@ import {drawnNodeSelection} from "./drawNode.js";
 import {workerCode} from "./workerCode.js";
 import {sharedWorkerCode} from "./workerCode.js";
 import {workerCodeBody} from "./workerCode.js";
-import {graphvizVersion as hpccWasmGraphvizVersion} from "@hpcc-js/wasm";
+import * as hpccWasm from "@hpcc-js/wasm";
 
 export function Graphviz(selection, options) {
     this._options = {
@@ -120,7 +120,7 @@ export function Graphviz(selection, options) {
         this._workerPortClose = this._worker.terminate.bind(this._worker);
         this._workerCallbacks = [];
     } else {
-        hpccWasmGraphvizVersion().then(((version) => {
+        hpccWasm.graphvizVersion().then(((version) => {
             this._graphvizVersion = version;
         }).bind(this));
     }

but got:

(node:821400) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

/home/magjac/d3-graphviz/node_modules/@hpcc-js/wasm/dist/index.node.es6.js:284
export { GraphvizSync, StackElement, StackParser, expatVersion, graphviz, graphvizSync, graphvizVersion, parse, wasmFolder };
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
    at async formattedImport (/home/magjac/d3-graphviz/node_modules/mocha/lib/nodejs/esm-utils.js:7:14)
    at async Object.exports.requireOrImport (/home/magjac/d3-graphviz/node_modules/mocha/lib/nodejs/esm-utils.js:38:28)
    at async Object.exports.loadFilesAsync (/home/magjac/d3-graphviz/node_modules/mocha/lib/nodejs/esm-utils.js:91:20)
    at async singleRun (/home/magjac/d3-graphviz/node_modules/mocha/lib/cli/run-helpers.js:125:3)
    at async Object.exports.handler (/home/magjac/d3-graphviz/node_modules/mocha/lib/cli/run.js:370:5)

GordonSmith · 2022-10-05T12:20:13Z

The above log is showing you pulling in the "node" version, which would be bad... Your using plain js so try this:
import { graphviz } from "@hpcc-js/wasm/dist/index.es6.js"?

GordonSmith · 2022-10-05T12:30:32Z

You should also bump your rollup and plugins versions to latest and retest...

magjac · 2022-10-05T14:10:19Z

The above log is showing you pulling in the "node" version, which would be bad... Your using plain js so try this:
import { graphviz } from "@hpcc-js/wasm/dist/index.es6.js"?

Same problem:

(!) Plugin node-resolve: Could not resolve import "@hpcc-js/wasm/dist/index.es6.js" in /home/magjac/d3-graphviz/src/dot.js using exports defined in /home/magjac/d3-graphviz/node_modules/@hpcc-js/wasm/package.json.
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
@hpcc-js/wasm/dist/index.es6.js (imported by src/dot.js)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
@hpcc-js/wasm/dist/index.es6.js (guessing 'index_es6_js')

You should also bump your rollup and plugins versions to latest and retest...

I tried that and also upgraded all the babel dependencies, but it didn't help.

GordonSmith · 2022-10-05T14:14:47Z

As a temp workaround (as I have this same exercise ahead of me soon) - you could use the "alias" rollup plugin to resolve the correct source file:
https://www.npmjs.com/package/@rollup/plugin-alias with:

  { find: '@hpcc-js/wasm', replacement: '@hpcc-js/wasm/dist/index.es6.js' },

magjac · 2022-10-05T14:23:47Z

I tried that with this patch:

diff --git a/rollup.config.js b/rollup.config.js
index 44c950b..b143612 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,5 +1,6 @@
 import resolve from '@rollup/plugin-node-resolve';
 import babel from 'rollup-plugin-babel';
+import alias from '@rollup/plugin-alias';
 
 export default [
     {
@@ -37,6 +38,11 @@ export default [
             (process.env.NODE_ENV === 'production' && babel({
                 exclude: ['node_modules/**'],
             })),
+            alias({
+                entries: [
+                    { find: '@hpcc-js/wasm', replacement: '@hpcc-js/wasm/dist/index.es6.js' },
+                ]
+            }),
         ],
     }
 ];

but still got:

file:///home/magjac/d3-graphviz/src/dot.js:1
import { graphviz } from "@hpcc-js/wasm";
         ^^^^^^^^
SyntaxError: Named export 'graphviz' not found. The requested module '@hpcc-js/wasm' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@hpcc-js/wasm';
const { graphviz } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
    at async formattedImport (/home/magjac/d3-graphviz/node_modules/mocha/lib/nodejs/esm-utils.js:7:14)
    at async Object.exports.requireOrImport (/home/magjac/d3-graphviz/node_modules/mocha/lib/nodejs/esm-utils.js:38:28)
    at async Object.exports.loadFilesAsync (/home/magjac/d3-graphviz/node_modules/mocha/lib/nodejs/esm-utils.js:91:20)
    at async singleRun (/home/magjac/d3-graphviz/node_modules/mocha/lib/cli/run-helpers.js:125:3)
    at async Object.exports.handler (/home/magjac/d3-graphviz/node_modules/mocha/lib/cli/run.js:370:5)

magjac · 2022-10-05T14:25:42Z

This is my full rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import alias from '@rollup/plugin-alias';

export default [
    {
        input: 'index.js',
        output: {
            file: 'build/d3-graphviz.js',
            format: 'umd',
            name: 'd3-graphviz',
            sourcemap: true,
            globals: {
                'd3-selection': 'd3',
                'd3-transition': 'd3',
                'd3-interpolate': 'd3',
                'd3-zoom': 'd3',
                'd3-dispatch': 'd3',
                'd3-format': 'd3',
                'd3-timer': 'd3',
                'd3-path': 'd3',
                '@hpcc-js/wasm': '@hpcc-js/wasm',
            },
        },
        external: [
            'd3-selection',
            'd3-transition',
            'd3-interpolate',
            'd3-zoom',
            'd3-dispatch',
            'd3-format',
            'd3-timer',
            'd3-path',
            '@hpcc-js/wasm',
        ],
        plugins: [
            resolve(),
            (process.env.NODE_ENV === 'production' && babel({
                exclude: ['node_modules/**'],
            })),
            alias({
                entries: [
                    { find: '@hpcc-js/wasm', replacement: '@hpcc-js/wasm/dist/index.es6.js' },
                ]
            }),
        ],
    }
];

GordonSmith · 2022-10-05T15:20:55Z

I can reproduce this locally - but the only quick workaround I would have is to bundle my lib into yours (i.e. don't make it external).
Also your marking you package as being a "module", but your generating "umd" code? I suspect if I rolled back my "exports" section and just used "main" and "module" pointing to the browser version, then it might also work - I need to play more.

magjac · 2022-10-05T20:24:46Z

I tried format: 'es',, but it made no difference. I don't know what this setting means.

EAlexRojas · 2022-10-13T10:50:52Z

My two cents:

The error appears while running the tests and not when building, so it seems to be related to the tests
In SyntaxError: Named export 'graphviz' not found. #120 (comment) we see that the module that is being imported is actually dist/index.node.es6.js and that is because the tests are being run by mocha which uses node to execute the tests.
It should not be an issue to import the node es6 module in mocha, but looks like the module loader is having issue loading it. I think it's because the hpcc-js-wasm package.json is missing "type": "module",, which is needed when you expose both commonjs and ESM modules (as reference the entry in webpack doc: https://webpack.js.org/guides/package-exports/#providing-commonjs-and-esm-version-stateful)
I tested by adding checking out the code from Upgrade to d3 version 7 and adopt type=module magjac/d3-graphviz#242, then modifying the hpcc-js-wasm package.json to add "type": "module", and that seems to fix the syntax error
(the tests are still showing errors but that does not seem to be related to the issue here)

GordonSmith · 2022-10-14T11:50:04Z

@EAlexRojas thanks for the deep dive! FYI I am in the process of bumping versions to latest GraphViz and will revisit.

FWIW dist/index.node.es6.js has other "esm" issues (it still referenced __dirname for example).

GordonSmith · 2022-10-23T09:14:32Z

@magjac, @EAlexRojas - I have just pushed a release and believe I have a clearer idea of this whole exports issue. In this release I have made minimal changes to the exports (and hope it will work for you),

It is still a CommonJS by default package, but in the future I will switch to a esm by default package and clean up the naming conventions - but that will require a major version bump.

whitten · 2022-10-24T20:25:47Z

@magjac did @GordonSmith change anything that helped ?

EAlexRojas · 2022-10-28T09:54:02Z

I tested again by checking out the magjac/d3-graphviz#242 PR and using the newly released version of @hpcc-js/wasm (1.18.0) and it seems the issue is fixed, the tests are able to import and use the module.
cc @magjac

magjac · 2022-10-29T13:10:15Z

Sorry for the late reply. Yes, this problem is now gone. Thanks a lot.

I have some other problems that I need to investigate further, but they might very well be my own.

Need fix of hpcc-systems/hpcc-js-wasm#120

magjac mentioned this issue Oct 5, 2022

Vulnerability with d3-color magjac/d3-graphviz#198

Closed

magjac closed this as completed Oct 29, 2022

magjac added a commit to magjac/d3-graphviz that referenced this issue Oct 30, 2022

upgrade @hpcc-js/wasm to version 1.17.1 (Graphviz 7.0.0)

0cc35da

Need fix of hpcc-systems/hpcc-js-wasm#120

magjac mentioned this issue Nov 13, 2022

Error handling using GraphvizSync() layout #125

Closed

magjac added a commit to magjac/d3-graphviz that referenced this issue Nov 17, 2022

upgrade @hpcc-js/wasm to version 1.17.1 (Graphviz 7.0.0)

8572795

Need fix of hpcc-systems/hpcc-js-wasm#120

magjac added a commit to magjac/d3-graphviz that referenced this issue Nov 17, 2022

upgrade @hpcc-js/wasm to version 1.17.1 (Graphviz 7.0.0)

5d40a55

Need fix of hpcc-systems/hpcc-js-wasm#120

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SyntaxError: Named export 'graphviz' not found. #120

SyntaxError: Named export 'graphviz' not found. #120

magjac commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

magjac commented Oct 5, 2022

magjac commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

magjac commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

magjac commented Oct 5, 2022

magjac commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

magjac commented Oct 5, 2022

EAlexRojas commented Oct 13, 2022

GordonSmith commented Oct 14, 2022

GordonSmith commented Oct 23, 2022 •

edited

whitten commented Oct 24, 2022

EAlexRojas commented Oct 28, 2022

magjac commented Oct 29, 2022

SyntaxError: Named export 'graphviz' not found. #120

SyntaxError: Named export 'graphviz' not found. #120

Comments

magjac commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

magjac commented Oct 5, 2022

magjac commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

magjac commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

magjac commented Oct 5, 2022

magjac commented Oct 5, 2022

GordonSmith commented Oct 5, 2022

magjac commented Oct 5, 2022

EAlexRojas commented Oct 13, 2022

GordonSmith commented Oct 14, 2022

GordonSmith commented Oct 23, 2022 • edited

whitten commented Oct 24, 2022

EAlexRojas commented Oct 28, 2022

magjac commented Oct 29, 2022

GordonSmith commented Oct 23, 2022 •

edited