question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Webpack 5 / Angular 12 conflicting star exports

See original GitHub issue

🐞 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

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
waterpleacommented, May 14, 2021

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

0reactions
waterpleacommented, May 14, 2021

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. 🤔

Read more comments on GitHub >

github_iconTop Results From Across the Web

Compiler generates conflicting exports ɵ0 #42451 - GitHub
node_modules/packageA/fesm2015/packageA.js - Error: The requested module 'packageA/moduleB' contains conflicting star exports for the name ...
Read more >
Webpack 5 release (2020-10-10)
Webpack is now able to track access to nested properties of exports. This can improve Tree Shaking (Unused export elimination and export ......
Read more >
Upgrade Angular 12 to 13 - Compile error in mjs file
If that does not work , you may have to make appropriate changes to upgrade the webpack libraries to a higher version (webpack...
Read more >
Bug listing with status UNCONFIRMED as at 2022/12/24 17 ...
Bug :128538 - "sys-apps/coreutils: /bin/hostname should be installed from coreutils not sys-apps/net-tools" status:UNCONFIRMED resolution: severity:enhancement ...
Read more >
@angular/animations | Yarn - Package Manager
4 (2022-12-14). animations. Commit, Type, Description. 6c1064c72f, fix, fix incorrect handling of camel-case css properties ( ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found