Old ES6 module based icon reference causing build error in Angular application

[MinhazH]

General Support Request

While upgrading Auro packages in the (RAIN - Contact Center Apps) angular application, the following error occurs:

./node_modules/@alaskaairux/icons/dist/icons/interface/check-sm_es6.js:1:0 - Error: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> export default {
|   "role": "img",
|   "color": "currentColor",

Investigation:

After some investigation, it was found that the auro-menuoption which we use extensively, is referencing old ES6 modules, which seems to be deprecated. The specific issue is with the check-sm_es6.js module, seems like check-sm_es6.js is not compliant with ESM.

Angular version we are using:

Auro packages version we are trying to use:

"@aurodesignsystem/auro-menu": "^3.11.4",
"@alaskaairux/icons": "^4.41.1",

Possible Solution

I've updated the ref. of auro-menuoption manually in the node_modules like the following and seems like that resolves our issue.

Additional context

No response

Exit criteria

No response

[jzellmann]

@Patrick-Daly-AA, any insight on when the bug will be resolved?

[Patrick-Daly-AA]

@jzellmann , I believe @blackfalcon is looking into this issue. we don't currently have an ETA as we are also balancing our time working on higher priority work on theming.

[jzellmann]

Thanks, @Patrick-Daly-AA / @blackfalcon ! Keep us in mind when this bug does get tackled. I'll add a breakout story on our backlog to revisit.

[blackfalcon]

@jzellmann if you have tried to update things lately, you will see that we no longer reference those non-ESM scripts you highlighted. But... we are still having issues with this component, please see this related issue: https://github.com/AlaskaAirlines/auro-select/issues/196

Between dropdown, menu and select, and other non-esm dependencies, we are having a heck of a time getting this one addressed.

Sorry for the delay.

[jordanjones243]

This issue was recently fixed in this update where we are no longer using the es6 checkmark icon. Please see changes on lines 11-13 in the auro-menuoption.js file for reference:

• https://github.com/AlaskaAirlines/auro-menu/compare/v3.11.7...v3.11.8