fix: add missing file extension in imports of the npm package

[tbouffard]

Webpack follows node.js rules for imports:

In .mjs or .js files with a package.json whose ‘type’ is ‘module’, imports must be fully specified.
This means that the extension must be included. This is how the ESM is defined in node.js

The ‘type’ of the library is defined as ‘module’ in the package.json file, so this behaviour is applied. So, the imports have been updated to include the .js file extension. An eslint plugin is used to enforce and automatically fix missing file extension in imports.

Previously, as the imports didn't include the file extension in version 0.7.0 of the library, webpack raised errors like in the following:

ERROR in ./node_modules/@process-analytics/bv-experimental-add-ons/dist/index.js 16:0-32
Module not found: Error: Can't resolve './bpmn-elements' in '/user/app/node_modules/@process-analytics/bv-experimental-add-ons/dist'
Did you mean 'bpmn-elements.js'?
BREAKING CHANGE: The request './bpmn-elements' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@process-analytics/bv-experimental-add-ons/dist/index.js 17:0-24
Module not found: Error: Can't resolve './paths' in '/user/app/node_modules/@process-analytics/bv-experimental-add-ons/dist'
Did you mean 'paths.js'?
BREAKING CHANGE: The request './paths' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@process-analytics/bv-experimental-add-ons/dist/index.js 18:0-26
Module not found: Error: Can't resolve './plugins' in '/user/app/node_modules/@process-analytics/bv-experimental-add-ons/dist'
Did you mean 'index.js'?
BREAKING CHANGE: The request './plugins' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

ERROR in ./node_modules/@process-analytics/bv-experimental-add-ons/dist/index.js 19:0-34
Module not found: Error: Can't resolve './plugins-support' in '/user/app/node_modules/@process-analytics/bv-experimental-add-ons/dist'
Did you mean 'plugins-support.js'?
BREAKING CHANGE: The request './plugins-support' failed to resolve only because it was resolved as fully specified
...

Notes

webpack details

• rationale: webpack 5.0.0-beta.30 Module not found: Error: Can't resolve '../../core-js/object/define-property' webpack/webpack#11467 (comment)
• node.js rules: https://nodejs.org/api/esm.html#esm_mandatory_file_extensions
• similar errors occurred in missing extension in import paths in @babel/runtime/helpers/esm babel/babel#12158
• possible workaround when using older version of the library: webpack 5.0.0-beta.30 Module not found: Error: Can't resolve '../../core-js/object/define-property' webpack/webpack#11467 (comment)

Extensions in import and TypeScript transpilatoin

TypeScript has not planned to change the imports declared in the ts files at transpilation time. See microsoft/TypeScript#16577 (comment)

New eslint rule to enforce js extension in imports

See https://github.com/eslint-community/eslint-plugin-n/blob/85b794508a0fb92e021c09e63378314093772640/docs/rules/file-extension-in-import.md

https://github.com/import-js/eslint-plugin-import/blob/v2.23.4/docs/rules/extensions.md was also experimented (see below for more details.

About this problem in bpmn-visualization

There is no problem in bpmn-visualization. We provide a single bundle file which is referenced in the package.json. So, there is no JS files importing other modules.

Investigating using the extensions rule in eslint-plugin-import.

I have not been able to get it to work. Also, eslint-plugin-import does not provide automatic correction for erroneous imports, whereas eslint-plugin-n does. It's a pain. So, for all these reasons, I've decided to stick with eslint-plugin-n, at least for now.

I have followed

• https://github.com/import-js/eslint-plugin-import/blob/f72f2072f4245f2c3494816d7c14352fc9e07c0a/README.md#importextensions
• https://github.com/import-js/eslint-plugin-import/blob/f72f2072f4245f2c3494816d7c14352fc9e07c0a/README.md#typescript (already activated)

I got errors like these

/development/process-analytics/repo/bv-experimental-add-ons/packages/demo/src/plugins-by-name.ts
  24:30 error Missing file extension ‘ts’ for ‘./shared/diagrams.js’ import/extensions
  25:31 error Missing file extension ‘ts’ for ‘./shared/zoom-component.js’ import/extensions

The problem may be due to an unresolved issue: import-js/eslint-plugin-import#2111

Tasks

• Reproduce the problem. At least manually with the webpack project in the bpmn-visualization-examples repository. test(webpack): validate that bv-addons can be used without error bpmn-visualization-examples#606
• Validate the fix in a webpack project/application. Locally using the PR of the examples repository, replace the content of the bv-addons npm package in the node_modules folder of the project. Use the npm package built with this PR
• Make the jest tests pass: see 8abe363
• No need to add a new dependency with eslint-plugin-n. Use the rules available in the import plugin https://github.com/import-js/eslint-plugin-import/blob/v2.23.4/docs/rules/extensions.md. I have not been able to make it work (see above), so keep using eslint-plugin-n.
• a TypeScript configuration may also enforce this. See A compiler option to enforce file extensions. microsoft/TypeScript#42813 and moduleResolution bundler https://www.typescriptlang.org/docs/handbook/modules/guides/choosing-compiler-options.html#considerations-for-bundling-libraries --> not accurate for our use case

[github-actions]

🎊 PR Preview 151f0af has been successfully built and deployed to https://process-analytics-bv-experimental-add-ons-demo-pr-301.surge.sh

🕐 Build time: 0.01s

_{🤖 By surge-preview}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud