Using SplitButton causes ReferenceError: Cannot access 'TieredMenu' before initialization

[bendehghan]

Describe the bug

Looks like a new bug in 15.4.0
While running tests into my application I got the following error:

    ReferenceError: Cannot access 'TieredMenu' before initialization

      37 | import {RadioButtonModule} from 'primeng/radiobutton';
      38 | import {SpeedDialModule} from 'primeng/speeddial';
    > 39 | import {SplitButtonModule} from 'primeng/splitbutton';
         | ^
      40 | import {TabViewModule} from 'primeng/tabview';
      41 | import {TieredMenuModule} from 'primeng/tieredmenu';
      42 | import {ToggleButtonModule} from 'primeng/togglebutton';

      at Object.<anonymous> (node_modules/primeng/fesm2020/primeng-tieredmenu.mjs:195:243)
      at Object.<anonymous> (node_modules/primeng/fesm2020/primeng-splitbutton.mjs:8:21)
      at Object.<anonymous> (src/app/rc/dm-rc.module.ts:39:1)
      at Object.<anonymous> (src/app/rc/main-rc/main-rc.component.spec.ts:10:1)

Environment

Mac Jest tests.

Angular version

        "@angular/animations": "15.2.8",
        "@angular/cdk": "15.2.8",
        "@angular/common": "15.2.8",
        "@angular/compiler": "15.2.8",
        "@angular/core": "15.2.8",
        "@angular/forms": "15.2.8",
        "@angular/platform-browser": "15.2.8",
        "@angular/platform-browser-dynamic": "15.2.8",
        "@angular/router": "15.2.8",
        "@angular-builders/custom-webpack": "15.0.0",
        "@angular-builders/jest": "15.0.0",
        "@angular-devkit/architect": "0.1502.6",
        "@angular-devkit/build-angular": "15.2.6",
        "@angular-devkit/core": "15.2.6",
        "@angular-eslint/builder": "15.2.1",
        "@angular-eslint/eslint-plugin": "15.2.1",
        "@angular-eslint/eslint-plugin-template": "15.2.1",
        "@angular-eslint/schematics": "15.2.1",
        "@angular-eslint/template-parser": "15.2.1",
        "@angular/cli": "15.2.6",
        "@angular/compiler-cli": "15.2.8",
        "@angular/language-service": "15.2.8",

PrimeNG version

14.1.0

Build / Runtime

Angular CLI App

Node version (for AoT issues node --version)

v19.6.1

Browser(s)

CLI

Steps to reproduce the behavior

import {SplitButtonModule} from 'primeng/splitbutton';
npx jest --clearCache && npx jest --no-cache --updateSnapshot .

Things I've tried

Using primeng 15.3.0 and zone.js 12 works fine. With 15.4.0 and required zone.js 13 I get the new errors.

[bendehghan]

This is a similar bug:
#11931

[viceice]

I got the same errors when importing MenubarModule or TieredMenuModule.

ReferenceError: Cannot access 'Menubar' before initialization
ReferenceError: Cannot access 'TieredMenu' before initialization

[bendehghan]

Can somebody please triage this so we can at least get it on the radar? What is the triage process? Are we missing any info to get going?
Thank you :)

[blackholegalaxy]

ping @cagataycivici @cetincakiroglu

[cetincakiroglu]

Thanks for reporting, we're investigating the issue.

[pudrik]

I got the same issue on 16.0.2, both Menubar and TiredMenu. From what i can tell the errors manifest themselfs different depending on the order of the import statement

[pudrik]

Looking closer into this issue the problem seem to be the combination of angular and primeng version. for instance latest source and angular 16.1.5 works but not angular 16.1.6. Same applies for many other version combinations.

Depending on what enviornment youre using for testing a possible workaround is to use a preloader to patch any modules / barrell that causing the undesired error by removing the imports. (think extra step in workflow file)

example
/libs/ui/ui.module.ts <-- has a ref to TieredMenu normaly used in program run but not used in Unit test (Remove lines so tests can run)
/libs/ui/component/somecomponent/somecomponent.spec.ts <-- what gets the error, but dont have any ref to TieredMenu

simple sed operation would work.
sed -i '/TieredMenu/d' /libs/ui/ui.module.ts

[bhalash]

Adding that this is still an issue for me and my team, even with the latest 16.2.0 release. Are there any suggested workarounds in the interim?

[vespertilian]

As of 16.1.0 this is also an issue with the Mega Menu. 16.0.2 works.

[psbenz]

Possible workaround:

jest.mock('primeng/splitbutton', () => ({
SplitButtonModule: jest.fn(),
}));
jest.mock('primeng/contextmenu', () => ({
ContextMenuModule: jest.fn(),
}));

[osmolo]

jest.mock('primeng/splitbutton', () => ({
SplitButtonModule: jest.fn(),
}));

Suggested workaround doesn't work for me.
mockConstructor does not have a module def (ɵmod property)
Unexpected value 'mockConstructor' imported by the module 'SharedModule'. Please add an @NgModule annotation. (SharedModule is my module that imports SplitButtonModule)

[psbenz]

I added the mocks in setup-jest.ts and it works for me

[osmolo]

I'm using Angular 16.2 and endend up mocking this way in setup-jest.ts:

@NgModule()
export class SplitButtonMockModule { }

jest.mock('primeng/splitbutton', () => ({
  SplitButtonModule: SplitButtonMockModule,
}));