Cannot find module '@primeuix/styled' from 'node_modules/primeng/fesm2022/primeng-themes.mjs' #16353

ratsey · 2024-09-06T19:09:39Z

Describe the bug

Recognising that I'm using ^18.0.0-beta.1, although my code is running fine with the new themeing architecture, my tests are failing. I see that I do have @primeuix/styled in my node_modules, so do I need to somehow boostrap the theming in the same way that I do now in the app.component.ts with PrimeNGConfig?

    Cannot find module '@primeuix/styled' from 'node_modules/primeng/fesm2022/primeng-themes.mjs'

    Require stack:
      node_modules/primeng/fesm2022/primeng-themes.mjs
      node_modules/primeng/fesm2022/primeng-base.mjs
      node_modules/primeng/fesm2022/primeng-api.mjs
      node_modules/primeng/fesm2022/primeng-card.mjs
      projects/portal-common/src/components/hero/hero.component.ts
      projects/portal-common/src/components/hero/hero.component.spec.ts

      1 | import { CommonModule } from '@angular/common';
      2 | import { Component, computed, input, Signal } from '@angular/core';
    > 3 | import { CardModule } from 'primeng/card';
        | ^
      4 |
      5 | @Component({
      6 |   selector: 'lib-hero',

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.<anonymous> (node_modules/primeng/fesm2022/primeng-themes.mjs:1:15)
      at Object.<anonymous> (node_modules/primeng/fesm2022/primeng-base.mjs:3:27)
      at Object.<anonymous> (node_modules/primeng/fesm2022/primeng-api.mjs:6:27)
      at Object.<anonymous> (node_modules/primeng/fesm2022/primeng-card.mjs:5:61)
      at Object.<anonymous> (projects/portal-common/src/components/hero/hero.component.ts:3:1)
      at Object.<anonymous> (projects/portal-common/src/components/hero/hero.component.spec.ts:3:1)

Environment

Angular CLI: 18.1.4
Node: 20.16.0
Package Manager: npm 10.8.1
OS: win32 x64

Angular: 18.2.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server 
... router, ssr

Package                         Version
---------------------------------------------------------       
@angular-devkit/architect       0.1801.4
@angular-devkit/build-angular   18.1.4
@angular-devkit/core            18.2.3
@angular-devkit/schematics      18.2.3
@angular/cli                    18.1.4
@schematics/angular             18.1.4
ng-packagr                      18.2.1
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

Angular build is downgraded whilst waiting for a federated modules fix

Reproducer

No response

Angular version

18.1.4

PrimeNG version

18.0.0-beta.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.16.0

Browser(s)

Edge 128.0.2739.63 (Official build) (64-bit)

Steps to reproduce the behavior

Component Template

<div
  class="flex flex-column h-full w-full border-round gap-5 justify-content-between flex-wrap cursor-pointer"
  (click)="gotoLink()"
  [ngClass]="backgroundColor()"
  (keypress)="gotoLink()"
  tabindex="-1"
>
  <div
    class="flex-grow-1 bg-cover bg-center border-round-top"
    [style.background-image]="'url(' + imagePath() + ')'"
  ></div>
  <div class="flex-grow-1 p-0 m-0" [class]="fontColour()">
    <div test_id="title" class="font-semibold text-xl m-3">{{ title() }}</div>
    <div class="m-3 text-sm line-height-4">{{ message() }}</div>
  </div>
</div>

Component Code

import { CommonModule } from '@angular/common';
import { Component, computed, input, Signal } from '@angular/core';
import { CardModule } from 'primeng/card';

@Component({
  selector: 'lib-hero',
  standalone: true,
  imports: [CommonModule, CardModule],
  templateUrl: './hero.component.html',
  styleUrl: './hero.component.css',
})
export class HeroComponent {
  title = input<string>();
  link = input<string>();
  imagePath = input<string>();
  message = input<string>();
  backgroundColor = input<string>();

  // This computed signal could be improved upon by checking the alpha value of the background colour
  fontColour: Signal<string> = computed(() => {
    return this.backgroundColor()!.toString().includes('white')
      ? 'text-black'
      : 'text-white';
  });

  gotoLink() {
    window.open(this.link(), '_blank');
  }
}

Component Test

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MockRender } from 'ng-mocks';
import { HeroComponent } from './hero.component';

describe('HeroComponent', () => {
  let component: HeroComponent;
  let fixture: ComponentFixture<HeroComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({}).compileComponents();

    fixture = MockRender(HeroComponent);
    component = fixture.componentInstance;

    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have a defined title', () => {
    expect(component.title).toBeDefined();
  });
});

Actual Test Output

  ● Test suite failed to run

    Cannot find module '@primeuix/styled' from 'node_modules/primeng/fesm2022/primeng-themes.mjs'

    Require stack:
      node_modules/primeng/fesm2022/primeng-themes.mjs
      node_modules/primeng/fesm2022/primeng-base.mjs
      node_modules/primeng/fesm2022/primeng-api.mjs
      node_modules/primeng/fesm2022/primeng-card.mjs
      projects/portal-common/src/components/hero/hero.component.ts
      projects/portal-common/src/components/hero/hero.component.spec.ts

      1 | import { CommonModule } from '@angular/common';
      2 | import { Component, computed, input, Signal } from '@angular/core';
    > 3 | import { CardModule } from 'primeng/card';
        | ^
      4 |
      5 | @Component({
      6 |   selector: 'lib-hero',

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.<anonymous> (node_modules/primeng/fesm2022/primeng-themes.mjs:1:15)
      at Object.<anonymous> (node_modules/primeng/fesm2022/primeng-base.mjs:3:27)
      at Object.<anonymous> (node_modules/primeng/fesm2022/primeng-api.mjs:6:27)
      at Object.<anonymous> (node_modules/primeng/fesm2022/primeng-card.mjs:5:61)
      at Object.<anonymous> (projects/portal-common/src/components/hero/hero.component.ts:3:1)
      at Object.<anonymous> (projects/portal-common/src/components/hero/hero.component.spec.ts:3:1)

Expected behavior

Tests run without exception

The text was updated successfully, but these errors were encountered:

cagataycivici · 2024-09-07T11:51:38Z

This should have been installed transitively, we'll review, thank you.

ratsey · 2024-09-07T11:55:10Z

It's only in my tests that it's failing, the app runs just fine. Plus it's there in my node modules folder so no idea why it doesn't see it.

…

On Sat, Sep 7, 2024, 7:52 AM Cagatay Civici ***@***.***> wrote: This should have been installed transitively, we'll review, thank you. — Reply to this email directly, view it on GitHub <#16353 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABVTXGCDKAQVUW625N7ESCTZVLSGDAVCNFSM6AAAAABNZEPV22VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZVGE3DGMBUGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

mertsincan · 2024-09-07T16:48:15Z

Interesting! Can you share a repo that includes your config? Thanks,

ratsey · 2024-09-09T14:13:30Z

Unfortunately it's company code that I can't share. This is the package.json content though:

{
  "name": "x",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "build": "ng build shell && ng build reporting && ng build mfe2",
    "watch": "ng build --watch --configuration development",
    "test": "jest",
    "test:since-dev": "jest --changedSince=origin/dev --coverage",
    "test:watch": "jest --watch",
    "coverage": "jest --coverage",
    "serve:ssr:pom-portal": "node dist/pom-portal/server/server.mjs",
    "lint": "ng lint",
    "ci-install": "npm ci",
    "ci-build": "npm cache verify && ng build shell",
    "ci-lint": "npm run lint",
    "ci-audit": "npm audit --audit-level=high",
    "ci-test": "npm run test",
    "ci-e2e": "npm run ng e2e",
    "sonar-scanner": "sonar-scanner",
    "prepare": "husky"
  },
  "private": true,
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  },
  "dependencies": {
    "@angular/animations": "^18.1.3",
    "@angular/cdk": "^18.2.3",
    "@angular/common": "^18.2.3",
    "@angular/compiler": "^18.2.3",
    "@angular/core": "^18.2.3",
    "@angular/forms": "^18.2.3",
    "@angular/platform-browser": "^18.2.3",
    "@angular/platform-browser-dynamic": "^18.2.3",
    "@angular/platform-server": "^18.2.3",
    "@angular/router": "^18.2.3",
    "@angular/ssr": "^18.2.3",
    "@fortawesome/fontawesome-free": "^6.6.0",
    "chart.js": "^4.4.4",
    "es-module-shims": "^1.5.12",
    "express": "^4.18.2",
    "font-awesome": "^4.7.0",
    "ngx-cookie-service": "^18.0.0",
    "powerbi-client-angular": "^3.0.5",
    "primeicons": "^7.0.0",
    "primeng": "^18.0.0-beta.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.7.0",
    "xml-to-json-util": "^1.0.1",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-architects/native-federation": "^18.1.3",
    "@angular-devkit/build-angular": "^18.1.4",
    "@angular-eslint/builder": "18.3.0",
    "@angular-eslint/eslint-plugin": "18.3.0",
    "@angular-eslint/eslint-plugin-template": "18.3.0",
    "@angular-eslint/schematics": "18.3.0",
    "@angular-eslint/template-parser": "18.3.0",
    "@angular/cli": "^18.1.4",
    "@angular/compiler-cli": "^18.2.3",
    "@softarc/eslint-plugin-sheriff": "^0.17.0",
    "@softarc/sheriff-core": "^0.17.0",
    "@types/express": "^4.17.17",
    "@types/jest": "^29.5.12",
    "@types/node": "^18.18.0",
    "@types/webpack-env": "^1.18.5",
    "@typescript-eslint/eslint-plugin": "^8.0.0",
    "@typescript-eslint/parser": "^8.0.0",
    "angular-eslint": "18.3.0",
    "eslint": "^9.8.0",
    "eslint-config-prettier": "^9.1.0",
    "husky": "^9.1.5",
    "jest": "^29.7.0",
    "jest-preset-angular": "^14.2.2",
    "lint-staged": "^15.2.10",
    "ng-mocks": "^14.13.1",
    "ng-packagr": "^18.2.1",
    "prettier": "3.3.3",
    "primeflex": "^3.3.1",
    "ts-jest": "^29.2.5",
    "typescript": "^5.5.4",
    "typescript-eslint": "^8.4.0"
  }
}

ratsey · 2024-09-09T15:55:31Z

Update. I'm digging through the jest-resolve package to try to focus in on the issue. Not sure how much help this is, but the Jest function findNodeModule in jest-resolve/build/resolver.js is throwing this error:

Error: No known conditions for "." specifier in "@primeuix/styled" package

I will update this post as I find more.

Update 2: If I change the node-modules @primeuix/styled/package.json to 'default' rather than 'imports' I get a different error. Not sure if further, or just errored sooner though.

  "exports": {
    ".": {
      "types": "./index.d.mts",
      "default": "./index.mjs"
    }

New error is

Error: No known conditions for "./object" specifier in "@primeuix/utils" package

Update 3: Continuing that thread, by adding these lines to the package.json of both @primeuix/styled/package.json and @primeuix/utils/package.json, I was able to run my Jest tests successfully.

styled

  "exports": {
    ".": {
      "types": "./index.d.mts",
      "default": "./index.mjs",
      "import": "./index.mjs"
    }

utils

  "exports": {
    ".": {
      "types": "./index.d.mts",
      "import": "./index.mjs",
      "default": "./index.mjs"
    },
    "./*": {
      "types": "./*/index.d.mts",
      "import": "./*/index.mjs",
      "default": "./*/index.mjs"
    }
  },

ratsey · 2024-09-11T15:48:51Z

@cagataycivici Have you been able to replicate this one? My 'fix' works for me but isn't a valid approach since my gitlab pipelines are failing the testing since they are doing a clean node-modules install.

ratsey · 2024-09-12T19:36:17Z

Far from my area of expertise so forgive my naivete. This appears to be a CommonJS vs ESM issue - Jest has only experimental support for ESM. I'm trying to find the Jest settings for it, but adding 'require' or 'default' values to the PrimeNG export settings is resolving the issue. It doesn't look like support for CommonJS was dropped so I'm still at a loss as to why this just stopped working.

rpastro · 2024-09-19T21:52:47Z

@ratsey I just started porting my app to PrimeNG v18 and I had the same issue. I was able to fix the tests by making the following changes to my jest.config.ts file. I hope this helps you.

Add @primeuix/styled and @primeuix/utils to the esModules list in transformIgnoreModules parameter.
Add the location of the @primeuix packages in the moduleNameMapper parameter.

const esModules: string = [
  '@angular',
  '@ngrx',
  '@ngx-translate',
  '@primeuix/styled',
  '@primeuix/utils',
  'gridstack',
  'jquery',
  'lodash-es',
  'ngx-infinite-scroll',
  'primeng',
  'uuid'
].join('|');

const config: Config = {

...

  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/test/__mocks__/style-mock.ts',
    '@/environments/(.*)': '<rootDir>/src/environments/$1',
    '@/lib/(.*)': '<rootDir>/src/lib/$1',
    '@/(.*)': '<rootDir>/src/app/$1',
    '@primeuix/styled': '<rootDir>/node_modules/@primeuix/styled/index.mjs',
    '@primeuix/utils/(.*)': '<rootDir>/node_modules/@primeuix/utils/$1/index.mjs',
    'gridstack-angular': '<rootDir>/node_modules/gridstack/dist/angular/esm2020/gridstack-angular.mjs',
  },

...

  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
  transformIgnorePatterns: [`<rootDir>/node_modules/(?!${esModules})`]

...

};

export default config;

mertsincan · 2024-09-20T08:06:23Z

Thanks a lot @ratsey, Fixed in primeuix v0.1.2.

jogerj · 2024-09-20T11:45:40Z

@mertsincan the primeng repo still needs to update the dependency to use 0.1.2 tho

cetincakiroglu · 2024-09-23T15:19:36Z

Fixed in 18.0.0-beta.2 76a86f9

jogerj · 2024-09-23T18:27:06Z

@cetincakiroglu

~~https://www.npmjs.com/package/primeng/v/18.0.0-beta.2?activeTab=code~~
~~was the correct branch published? the published package still depends on 0.0.6 :(~~
Fixed in 18.0.0-beta.3

ratsey added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 6, 2024

mertsincan mentioned this issue Sep 20, 2024

Missing "default" module in packages primefaces/primeuix#6

Closed

mertsincan closed this as completed Sep 20, 2024

cetincakiroglu added this to the 18.0.0-beta.2 milestone Sep 20, 2024

cetincakiroglu reopened this Sep 21, 2024

cetincakiroglu removed the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 21, 2024

github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 21, 2024

cetincakiroglu closed this as completed Sep 23, 2024

cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Sep 23, 2024

cetincakiroglu self-assigned this Sep 23, 2024

AStoker mentioned this issue Nov 1, 2024

Yarn Plug'n'Play cannot resolve @primeuix #16682

Closed

jogerj mentioned this issue Nov 18, 2024

Component: Jest cannot find module '@primeng/themes' #16767

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot find module '@primeuix/styled' from 'node_modules/primeng/fesm2022/primeng-themes.mjs' #16353

Cannot find module '@primeuix/styled' from 'node_modules/primeng/fesm2022/primeng-themes.mjs' #16353

ratsey commented Sep 6, 2024

cagataycivici commented Sep 7, 2024

ratsey commented Sep 7, 2024 via email

mertsincan commented Sep 7, 2024

ratsey commented Sep 9, 2024

ratsey commented Sep 9, 2024 •

edited

Loading

ratsey commented Sep 11, 2024

ratsey commented Sep 12, 2024 •

edited

Loading

rpastro commented Sep 19, 2024

mertsincan commented Sep 20, 2024

jogerj commented Sep 20, 2024

cetincakiroglu commented Sep 23, 2024

jogerj commented Sep 23, 2024 •

edited

Loading

Cannot find module '@primeuix/styled' from 'node_modules/primeng/fesm2022/primeng-themes.mjs' #16353

Cannot find module '@primeuix/styled' from 'node_modules/primeng/fesm2022/primeng-themes.mjs' #16353

Comments

ratsey commented Sep 6, 2024

Describe the bug

Environment

Reproducer

Angular version

PrimeNG version

Build / Runtime

Language

Node version (for AoT issues node --version)

Browser(s)

Steps to reproduce the behavior

Component Template

Component Code

Component Test

Actual Test Output

Expected behavior

cagataycivici commented Sep 7, 2024

ratsey commented Sep 7, 2024 via email

mertsincan commented Sep 7, 2024

ratsey commented Sep 9, 2024

ratsey commented Sep 9, 2024 • edited Loading

styled

utils

ratsey commented Sep 11, 2024

ratsey commented Sep 12, 2024 • edited Loading

rpastro commented Sep 19, 2024

mertsincan commented Sep 20, 2024

jogerj commented Sep 20, 2024

cetincakiroglu commented Sep 23, 2024

jogerj commented Sep 23, 2024 • edited Loading

ratsey commented Sep 9, 2024 •

edited

Loading

ratsey commented Sep 12, 2024 •

edited

Loading

jogerj commented Sep 23, 2024 •

edited

Loading