[BUG] Webpack 5 / Angular 12 conflicting star exports

🐞 Bug report

Description

After using taiga-ui in a new project with Angular 12 and module federation (using Webpack 5), there are a few problematic areas that are causing the webpack build to fail with the following error:

./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-components.js:16:0-61 - Error: The requested module '@taiga-ui/core/components/primitive-checkbox' contains conflicting star exports for the name 'ɵ0' with the previous requested module '@taiga-ui/core/components/dialog'

i.e.: From primitive checkbox this area:

...
icons: {
        checked: ({$implicit}) =>
            $implicit === 'm' ? 'tuiIconCheck' : 'tuiIconCheckLarge',
        indeterminate: ({$implicit}) =>
            $implicit === 'm' ? 'tuiIconMinus' : 'tuiIconMinusLarge',
    },
...

Will build the checked function as:

const ɵ0 = ({ $implicit }) => $implicit === 'm' ? 'tuiIconCheck' : 'tuiIconCheckLarge';

Then taking a look at the dialog module (at the dialog service):

const DEFAULT_OPTIONS: TuiDialogOptions<undefined> = {
    size: 'm',
    required: false,
    closeable: true,
    dismissible: true,
    label: '',
    header: '',
    data: undefined,
};

The data property gets built as:

const ɵ0 = undefined;
const DEFAULT_OPTIONS = {
    size: 'm',
    required: false,
    closeable: true,
    dismissible: true,
    label: '',
    header: '',
    data: ɵ0,
};

Reproduction

1. Using a project with Angular 12 (Webpack 5)
2. Create a 2 app project using module federation @angular-architects/module-federation (one app is the shell, one is the remote)
3. Use @taiga-ui/core in the remote app (import the module)
4. Serve the remote app ng serve remote -o
5. See the error output in the console.

Expected behavior

Successful compilation of Angular apps using TaigaUI with webpack 5 and module federation.

Versions

• OS: [e.g. iOS]
• Browser: Chrome
• Angular: 112
• Package: @taiga-ui/core@2.8.2

Additional context

Full error stack:

./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-components.js:16:0-61 - Error: The requested module '@taiga-ui/core/components/primitive-checkbox' contains conflicting star exports for the name 'ɵ0' with the previous requested module '@taiga-ui/core/components/dialog'

./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-directives.js:6:0-58 - Error: The requested module '@taiga-ui/core/directives/hint-controller' contains conflicting star exports for the name 'ɵ0' with the previous requested module '@taiga-ui/core/directives/dropdown-controller'

./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core-directives.js:12:0-53 - Error: The requested module '@taiga-ui/core/directives/table-mode' contains conflicting star exports for the name 'ɵ0' with the previous requested module '@taiga-ui/core/directives/dropdown-controller'

./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core.js:5:0-42 - Error: The requested module '@taiga-ui/core/directives' contains conflicting star exports for the name 'ɵ0' with the previous requested module '@taiga-ui/core/components'

./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core.js:8:0-39 - Error: The requested module '@taiga-ui/core/modules' contains conflicting star exports for the name 'ɵ0' with the previous requested module '@taiga-ui/core/components'

./node_modules/@taiga-ui/core/fesm2015/taiga-ui-core.js:11:0-41 - Error: The requested module '@taiga-ui/core/providers' contains conflicting star exports for the name 'ɵ0' with the previous requested module '@taiga-ui/core/components'

I’ll dig in further on my end and see what I can uncover around webpack/webpack config with module federation. Wanted to get a bug reported in case others come across this as well, with Angular 12 being released yesterday.

[waterplea]

Thank you! We will get this fixed in the next release, probably today.

[waterplea]

Right now there’s a PR that fixes this particular issue, I tried it on a fresh project and it compiled. So we will roll out a new version today and we can keep investigating this issue afterwards. @sean-perkins you can try working off the current main branch where the issue is reproducible so you will know that it fixes the case. I wonder if Angular adds names to those items because it has to — it moved the arrow function out of the object and gave it name. So maybe it would still do that and add it to the barrel even if you make all the imports named. 🤔