[jira] [Work logged] (ARTEMIS-5999) Switch from CJS to ESM build

["ASF GitHub Bot (Jira)" <ji...@apache.org>]

     [ https://issues.apache.org/jira/browse/ARTEMIS-5999?focusedWorklogId=1027383&page=com.atlassian.jira.plugin.system.issuetabpanels:worklog-tabpanel#worklog-1027383 ]

ASF GitHub Bot logged work on ARTEMIS-5999:
-------------------------------------------

                Author: ASF GitHub Bot
            Created on: 29/Jun/26 09:21
            Start Date: 29/Jun/26 09:21
    Worklog Time Spent: 10m 
      Work Description: grgrzybek commented on PR #189:
URL: https://github.com/apache/artemis-console/pull/189#issuecomment-4830884227

   @GChuf hi - getting back to this oldish issue.
   Just FYI, recently I did a lot of tests related to what the actual JS is published. I created several combinations of exporters and importers:
   * pure `tsconfig.json` + `tsc` that produce ESM and (with additional config) CJS
   * `tsup` config that produces both ESM and CJS (in a package with `type=module` and `type=commonjs`)
   * commonjs consumers, ESM consumers
   * manually written CJS and ESM (no transpiling by tsup or tsc)
   
   there are some quirks which mostly revolve around _double default problem_: https://www.typescriptlang.org/docs/handbook/modules/appendices/esm-cjs-interop.html#no-__esmodule-detection-the-double-default-problem - oh my, it was a painful journey.
   
   Ideally I'd really like to have `@hawtio/react` provide both ESM and CJS modules, but I'm not there yet - I remember the problems were mostly ... icons. But even recently I found some nasty issue with SVG not being properly transpiled by `tsup`. See:
   * hawtio/hawtio-react#2088
   
   Now I'm trying to update to new Module Federation 2.0 (see: hawtio/hawtio-react#2079) and after that I'll try to provide newer/more flexible configuration of ESM/CJS and will add more comments.




Issue Time Tracking
-------------------

    Worklog Id:     (was: 1027383)
    Time Spent: 40m  (was: 0.5h)

> Switch from CJS to ESM build
> ----------------------------
>
>                 Key: ARTEMIS-5999
>                 URL: https://issues.apache.org/jira/browse/ARTEMIS-5999
>             Project: Artemis
>          Issue Type: Improvement
>          Components: Web Console
>    Affects Versions: console-1.7.0
>            Reporter: Gašper Čefarin
>            Priority: Minor
>              Labels: pull-request-available
>          Time Spent: 40m
>  Remaining Estimate: 0h
>
> This PR first removes the deprecated imports from from '@patternfly/react-core/deprecated' - If I remember correctly, I had some issues when initially trying out esm build without first taking care of this. It makes sense to remove deprecated imports anyway ...
> Then there's the commit including the changes inside tsup, webpack and package.json files - and with it, all the added .js extensions to imports:
> {code:java}
> import { CubesIcon } from "@patternfly/react-icons/dist/esm/icons/cubes-icon.js"{code}
> I was not able to get around this "issue" of adding .js everywhere.
> There's this option available in webpack which didn't work for me:
> {code:java}
> webpack.config.cjs{code}
> {code:java}
>     resolve: {
>       fullySpecified: false, // allows imports without extensions
>       extensions: ['.ts', '.tsx', '.js', '.cjs', '.jsx'],{code}
>  
> I've been sitting on this for a while and I just wanted to clean it up and submit it. If anyone wants to change or improve something, you're more than welcome to.
> And just to explain the reasoning behind the switch to ESM - this is what AI thinks about it:
> Here is why you should switch from CJS to ESM: * *Standardization & Future-Proofing:* ESM is the official ECMAScript standard, whereas CJS is a legacy system designed for Node.js before modules existed in the language.
>  * *Performance (Tree-Shaking):* ESM uses static structure ({{{}import{}}}/{{{}export{}}}), allowing bundlers like Webpack or Rollup to perform "tree-shaking"—removing unused code to create smaller, faster bundles. CJS modules are dynamic and harder to optimize.
>  * *Asynchronous Loading:* ESM supports asynchronous loading, improving efficiency in both browser and server environments.
>  * *Top-Level Await:* ESM allows the use of {{await}} at the top level of modules, simplifying asynchronous initialization code.
>  * *Better Interoperability:* Modern Node.js and browser environments are moving toward native ESM support.
>  * *Improved Safety:* ESM provides "live bindings," which are more secure and predictable than the mutable exports of CJS.
>  



--
This message was sent by Atlassian Jira
(v8.20.10#820010)

---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@artemis.apache.org
For additional commands, e-mail: issues-help@artemis.apache.org