Cannot find module '@jsonforms/angular-material'

General
1

I am using angularMaterialRenderers in my Angular project (version 16.2.12) with the following dependencies based on I read in this document, “Use JSON Forms 3.2 if you need to stay on Angular 16.”, I have used 3.2.0 version as well.(jsonforms/MIGRATION.md at master · eclipsesource/jsonforms · GitHub):

  • "@jsonforms/angular": "^3.2.1"
  • "@jsonforms/angular-material": "^3.2.1"
  • "@jsonforms/core": "^3.2.1"
  • "@jsonforms/material-renderers": "^3.2.1"
here is usage in my component :

import { angularMaterialRenderers } from '@jsonforms/angular-material';

this.renderers = angularMaterialRenderers;


 <jsonforms
 [(data)]="dynamicFormData"
 [schema]="schema"
 [uischema]="uiSchema"
 [renderers]="renderers"
 (errors)="setJsonFormError($event)"
></jsonforms>

The project compiles and runs successfully, and all features and functionalities work correctly on the UI.

ui schema

{
    "elements": [
        {
            "type": "Control",
            "label": "API URL",
            "scope": "#/properties/properties/properties/URL"
        },
        {
            "type": "Control",
            "label": "Account",
            "scope": "#/properties/credentials/properties/Account"
        },
        {
            "type": "Control",
            "label": "API Key",
            "scope": "#/properties/credentials/properties/ApiKey",
            "options": {
                "format": "password"
            }
        }
    ],
    "type": "VerticalLayout"
}

Schema

{
    "type": "object",
    "properties": {
        "properties": {
            "type": "object",
            "properties": {
                "URL": {
                    "type": "string",
                    "description": "The URL of the PointGrab API.",
                    "default": "https://cpms.pointgrab.com/be/cp"
                }
            },
            "required": [
                "URL"
            ]
        },
        "credentials": {
            "type": "object",
            "properties": {
                "Account": {
                    "type": "string",
                    "description": "The PointGrab account."
                },
                "ApiKey": {
                    "type": "string",
                    "description": "The PointGrab API key."
                }
            },
            "required": [
                "Account",
                "ApiKey"
            ]
        }
    },
    "required": [
        "properties",
        "credentials"
    ]
}

However, when I run the test cases using npm run test, I encounter the following error:
Even I have checked module is correctly installed and present in node_modules

Test suite failed to run
Cannot find module '@jsonforms/angular-material' from 'src/app/ingress/dialogs/ingress-dialog.component.ts'

Require stack:
  src/app/ingress/dialogs/ingress-dialog.component.ts
  src/app/ingress/dialogs/ingress-dialog.component.spec.ts

How can I resolve this issue?

2

Hi @jjain77_jcplc,

This is very hard to diagnose from afar as there are many different ways of setting up tests. You could take a look at our renderers and their test setup and see whether you can find something that’s missing on your side.

To help you in more detail, you need to provide a reproducible example of the issue.

3

@jjain77_jcplc Have you found a way to resolve this issue?

4

Yes, but temporary, I just ignore my spec file in jest.config.js.

testPathIgnorePatterns: [
‘/src/app/dynamic-forms/dialogs/dynamic-forms-dialog.component.spec.ts’,
‘/src/app/dynamic-forms/components/ingress-list/dynamic-forms-list.component.spec.ts’,
],

5

I also have the same issue for @jsonforms/angular JsonFormsModule, so if I write a test for custom components, I face this issue “Cannot find module”. I don’t know if there is a reason why when we run the test we face this issue.

6

@jjain77_jcplc I fixed this by adding this line in jest. configuration file
“moduleNameMapper”: {
“^@jsonforms/angular-material$”: “/node_modules/@jsonforms/angular-material/lib/esm2022/library”,
“^@jsonforms/angular$”: “/node_modules/@jsonforms/angular/lib/esm2022/library”
},
you can try and see if it will resolve the issue

7

ohh that great to hear, I will try in my code as well…
Great Thanks !! and Happy Coding :+1:

1 Like
8

Just forgot to tell you that in “moduleFileExtensions” you should added “mjs”. :smiley:

1 Like