ARTEMIS-5999 - Switch from CJS to ESM build

[GChuf]

No description provided.

[grgrzybek]

@GChuf thanks.

I tried moving Hawtio (application built with webpack and the library built with tsup/esbuild), but there were some issues and I had to remove "type":"module" from Hawtio's package.json.

Here are my notes from last year when I tried this:

tsup, webpack and cjs/esm modules

I wanted to change @hawtio/react package to "type":"module" and have tsup/esbuild to produce two outputs (esm, cjs).

But then webpack kind of do double conversion:

// ../../node_modules/@patternfly/react-styles/css/components/ExpandableSection/expandable-section.js
var require_expandable_section2 = __commonJS({
  "../../node_modules/@patternfly/react-styles/css/components/ExpandableSection/expandable-section.js"(exports) {
    "use strict";
    exports.__esModule = true;
...

// src/ui/util/ExpandableText.tsx
var import_expandable_section2 = __toESM(require_expandable_section2(), 1);
...

    const expandableToggle = !isDetached && /* @__PURE__ */ jsxs53(
      "button",
      {
        className: css(import_expandable_section2.default.expandableSectionToggle),

The problems:

• import_expandable_section2.default.expandableSectionToggle fails, import_expandable_section2.default.default.expandableSectionToggle would work
• in theory allowSyntheticDefaultImports: false would work, but it causes problems with react importing

I had problems with double default importing and various issues related have webpack/tsup and jest working (jest still marks ESM support as experimental).

I still don't fully understand when you need the extension in the import/require statements but looks like I use extensionless imports. AFAIR, extensionless imports work well when tsconfig.json uses "moduleResolution": "bundler" which is the recommended setting for libraries and for applications.

Also about the icons - I didn't have problems with extensionless imports. If you check @patternfly/react-icons package.json, there's no "type":"module" even if there's a "module":"dist/esm/index.js" option.
When I tried subpath imports for individual icons with esm variant, I had issues with React - this famous:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function

so I stayed with importing (c)js variants...

And finally about removing deprecated components - I've migrated the Artemis console (my local, not-yet-pushed branch) to Patternfly 6, but didn't change the styles yet - and yes, it involves the Select/Dropdown component.

I'd eventually suggest migrating to PF6 - especially because Hawtio 5 will be using Patternfly 6 (Patternfly 5 is no longer maintained).

WDYT?