[SF][CheckboxTemplate/JSX-runtime]: Cannot find module '@ui5/webcomponents-base/jsx-runtime' error on version 2.6.0

[Ankitadoshi]

Bug Description

When we upgrade webcomponents to 2.6.X version, and run the build or unit test cases we are getting error as below:
This is happening for multiple components that uses List or table with Multiselect selection mode.
This is a high priority issue for us since we need 2.6.x version to implement the drag and drop feature for our project.

Component Versions:
"@ui5/webcomponents": "^2.6.0",
"@ui5/webcomponents-compat": "~2.6.0",
"@ui5/webcomponents-base": "^2.6.0",
"@ui5/webcomponents-fiori": "^2.6.0",
"@ui5/webcomponents-icons": "^2.4.0",
"@ui5/webcomponents-localization": "~2.4.0",
"@ui5/webcomponents-react": "^2.6.0",
"@ui5/webcomponents-react-compat": "^2.6.0",

While running test cases:
Cannot find module '@ui5/webcomponents-base/jsx-runtime' from 'node_modules/@ui5/webcomponents/dist/CheckBoxTemplate.js'
Require stack:
node_modules/@ui5/webcomponents/dist/CheckBoxTemplate.js
node_modules/@ui5/webcomponents/dist/CheckBox.js
node_modules/@ui5/webcomponents-react/dist/webComponents/CheckBox/index.js
node_modules/@ui5/webcomponents-react/dist/components/AnalyticalTable/pluginHooks/useRowDisableSelection.js
node_modules/@ui5/webcomponents-react/dist/components/AnalyticalTable/pluginHooks/AnalyticalTableHooks.js
node_modules/@ui5/webcomponents-react/dist/index.js
src/utils/pickListFilterUtils.js
src/store/middleware/filtersSlice.js
src/Components/Filters/Filters.js
src/Components/Filters/Filters.test.js

While building:
Failed to parse source map from '/Users/I523602/Desktop/dev/src/recruiting-applicationlist/node_modules/@ui5/webcomponents-base/dist/prod/thirdparty/preact/jsxRuntime.module.js.map' file: Error: ENOENT: no such file or directory, open '/Users/I523602/Desktop/dev/src/recruiting-applicationlist/node_modules/@ui5/webcomponents-base/dist/prod/thirdparty/preact/jsxRuntime.module.js.map'

Can you please let us know on how to resolve these errors?

Affected Component

SF

Expected Behaviour

The test cases and the build should should pass without any issues

Isolated Example

No response

Steps to Reproduce

1. Upgrade to web components 2.6.0
2. Run npm install
3. Run unit test cases or buils
   ...

Log Output, Stack Trace or Screenshots

No response

Priority

High

UI5 Web Components Version

2.6.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[pskelin]

The error when building (missing .js.map) is fixed with #10596
and available in the latest RC https://github.com/SAP/ui5-webcomponents/releases/tag/v2.7.0-rc.2
2.7 will be released this week.

The error in the tests is somewhat different, can't really tell without further info. Can you try if 2.7.0-rc.2 fixes both errors and let me know?

[Ankitadoshi]

Hi @pskelin
Yes post upgrading to 2.7.0, the issue with the build (missing .js.map) is resolved.

But our test cases are still failing. Seems like there are two issues:

1. As per my analysis this seems to be a path problem for jsx-runtime file.
   We see that multiple JS files like ***template.js are present for various components in the webcomponents/dist folder once we do npm install
   These template files all have import for jsx-runtime. For example in CheckboxTemplate.js first line.
   import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
   And if i check the @ui5/webcomponents-base package, the jsx-runtime is present in the dist folder so i feel that these import needs to be changed from

import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime"; 
to 
import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/dist/jsx-runtime";

2. Another issue is from the React Wrapper(ui5-webcomponents-react) as I can see the imports are not correctly added there as well
   https://github.com/SAP/ui5-webcomponents-react/blob/d68bd2c7ddc6848dc81655742f3fdbb622078dd9/packages/base/src/utils/index.ts
   Here as well the path does not have dist/

import { getEffectiveScopingSuffixForTag } from '@ui5/webcomponents-base/CustomElementsScope.js';
But the actual file is present inside dist folder so the import path should be
import { getEffectiveScopingSuffixForTag } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';

Not sure if we are missing any configurations here.
Please let me know if more information is needed

[ilhan007]

In the @ui5/webcomponents-base package.json we have this configuration that is supposed to handle the
import to "@ui5/webcomponents-base/jsx-runtime":

"exports": {
    "./jsx-runtime": "./dist/jsx-runtime.js",
    "./jsx-dev-runtime": "./dist/jsx-dev-runtime.js",
     ...

And for the second:

import { getEffectiveScopingSuffixForTag } from '@ui5/webcomponents-base/CustomElementsScope.js';

we do reexport of a lot of modules ( including CustomElementsScope) via this index.js file.

I suggest we get in contact offline to get the project running..

[Ankitadoshi]

Hi @ilhan007
Please let me know if there is any updates here. This is high priority for us since without this upgrade, We cannot take up drag and drop feature which is must have for our release

Thanks,
Ankita

[ilhan007]

Update 1

Failure 1:

Cannot find module '@ui5/webcomponents-base/CustomElementsScope.js' from 'node_modules/@ui5/webcomponents-react-base/dist/utils/index.js

Solution:
This is fixed and released with @ui5/webcomponents-react 2.7.1. I have updated your project locally to test the fix and the this failure stopped.

---

Failure 2:

Cannot find module '@ui5/webcomponents-base/jsx-runtime' from 'node_modules/@ui5/webcomponents/dist/CheckBoxTemplate.js'

Solution:
Seems the reexports are not working fine with jest (all issues happen only in tests),
so I have configured this mapping in the package.json under the "jest":

"moduleNameMapper": {
      "^@ui5/webcomponents-base/jsx-runtime$": "<rootDir>/node_modules/@ui5/webcomponents-base/dist/jsx-runtime.js"
}

---

Failure 3:

TypeError: Cannot read properties of undefined (reading 'states')
at Button._setBadgeOverlayStyle (node_modules/@ui5/webcomponents/src/Button.ts:379:20)

Solution:
This is a known problem, jest does not support a lot of browser native APIs, and recently we added code to the Button that uses ElementInternals API (which is standard browser API), but not supported in jest.
However, to make jest users happy we already merged this fix
that provides a shim for the missing native API in jest.

[ilhan007]

Update 2:

We have released 2.7.1 for all packages on the public npm (including the aforementioned ElementInternals shim for jest/jsdom env), but not available on the internal registry https://int.repositories.cloud.sap/artifactory/api/

Once available:

• Update your package.json, clean node_modules, and install 2.7.1 for all @ui5/* packages (see the screenshot)
• Add the moduleNameMapper setting in your package.json under jest (see the screenshot)
• Use the ssr-sdom-shim module
  You have to import it only for the tests, before importing the components you test. I am not sure if there is some entry point for the tests, or you will need to add it to all .test.js files, but this is the module that implements shims for missing browser native APIs in jest (jsdom)

import "ui5/webcomponents-base/dist/ssr-dom-shim.js";