Skip to content

Support fully specified import paths in ESM output for better Node.js and Webpack compatibility #827

@tbouffard

Description

@tbouffard

Is your feature request related to a problem? Please describe.

maxGraph v0.19.0 provides an ESM build, but its integration is not smooth:

Webpack (as of v0.10.1) requires a workaround to make it work: f5c43dee59678ec6ade66ff92ba40c15ec7b4b38

Node.js can't use the ESM output directly because import paths are missing the .js extension.
Example error as shown in #826:

[ERR_MODULE_NOT_FOUND]: Cannot find module '/dev/maxGraph/packages/core/lib/esm/view/mixins/_graph-mixins-types'
imported from /dev/maxGraph/maxGraph/packages/core/lib/esm/index.js

This is expected behavior according to Node.js ESM rules: https://nodejs.org/docs/latest-v16.x/api/esm.html#import-specifiers

A file extension must be provided when using the import keyword.

Webpack replicates this behavior in .js/.mjs files within packages marked as type: module: webpack/webpack#11467 (comment)

CommonJS support (added in v0.20.0 via #824) does not help in this case.

Errors detected with "Are the types wrong?"

This tool shows the problem when using the TypeScript node16 module resolution: the js extension are missing in imports.
See https://arethetypeswrong.github.io/?p=%40maxgraph%2Fcore%400.20.0

Image

Describe the solution you'd like

Describe alternatives you've considered

  • Keeping the workaround in Webpack config - not ideal.
  • Avoiding ESM in Node.js altogether - but headless usage with Node is still useful.

Additional context

TypeScript support
maxGraph is written in TypeScript, so .js extensions in imports look weird. But recent TS versions support this:

Also, moduleResolution: "node16" forces extensions: https://www.typescriptlang.org/docs/handbook/modules/reference.html#the-moduleresolution-compiler-option

ESLint
We can enforce and auto-fix with ESLint plugins:

To limit noise, this rule could be scoped to the core package only.

Related issues

Please notify those threads once the change is implemented.

Possible implementation plan

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions