Webpack may not find directives submodules in new lit-based components

[markus-walther]

AXA Advice Team reports:

We are trying out pattern library comonents a little. With AXAButton v.7.0.0 one encounters the following error: ERROR in ./node_modules/@axa-ch/button/lib/index.react.js 3:0-52 Module not found: Error: Package path ./directives/class-map is not exported from package C:\eplatform\git-repos\duty-planner-fe\node_modules\lit (see exports field in C:\eplatform\git-repos\duty-planner-fe\node_modules\lit\packa ge.json) @ ./src/components/thirdparty/AxaButton.js 4:0-66 5:23-43 @ ./src/App.js 6:0-63 @ ./src/index.js 7:0-24 11:33-36 ERROR in ./node_modules/@axa-ch/icon/lib/index.js 2:0-56 Module not found: Error: Package path ./directives/unsafe-html is not exported from package C:\eplatform\git-repos\duty-planner-fe\node_modules\lit (see exports field in C:\eplatform\git-repos\duty-planner-fe\node_modules\lit\pac kage.json) @ ./node_modules/@axa-ch/button/lib/index.react.js 4:0-35 644:21-28 @ ./src/components/thirdparty/AxaButton.js 4:0-66 5:23-43 @ ./src/App.js 6:0-63 @ ./src/index.js 7:0-24 11:33-36 webpack 5.70.0 compiled with 2 errors in 5489 ms

Investigate, and if confirmed as a bug, fix this.

[markus-walther]

At Robert Kiemele from AXA advice: please post /src/components/thirdparty/AxaButton.js content here, and possibly also your Webpack config.

Note that Storybook, used for demonstrating the Pattern Library, also uses Webpack, and that our React-based tests of axa-button 7.00 all passed.

[rokie-web]

import { createElement } from 'react';
import createAXAButtonReact from '@axa-ch/button/lib/index.react';

const AXAButton = createAXAButtonReact(createElement);

export default AXAButton;

We used the default Webpack config which comes with react 17.0.2 when using create-react-app

[MKaHead]

Hello @rokie-web Problem if the components use different lit major versions. It is best to simply use the latest versions.

If the problem persists, please reopen the issue.