transloco: Bug(TranslocoTestingModule): Cannot find module 'flat'

Is there an existing issue for this?

I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Transloco

Is this a regression?

Current behavior

This occurs:

For Angular 16 applications using Transloco
when running Jest tests with @angular-builders/jest and jest-preset-angular
Only for the tests that import the TranslocoTestingModule as per the instructions in the docs

Those specific Jest tests importing the TranslocoTestingModule will fail with the error:

Cannot find module 'flat' from 'node_modules/@ngneat/transloco/fesm2022/ngneat-transloco.mjs'

This does not occur when using the experimental @angular-devkit/build-angular:jest builder but this is not an option for this specific project, because that experimental builder doesn’t support code coverage generation properly.

Expected behavior

Jest tests should work when importing the TranslocoTestingModule

Please provide a link to a minimal reproduction of the bug, if you won’t provide a link the issue won’t be handled.

https://github.com/vankeer/transloco-sandbox/tree/transloco-testing-bug

Transloco Config

export function getTranslocoTestingModule(options: TranslocoTestingOptions = {}) {
  return TranslocoTestingModule.forRoot({
    langs: { en, es },
    translocoConfig: {
      availableLangs: ['en', 'es'],
      defaultLang: 'en',
    },
    preloadLangs: true,
    ...options
  });
}



### Please provide the environment you discovered this bug in

```markdown
Transloco: 5
Angular: 16(.2)
Node: 18(.18) (also occurs in 16)
Package Manager: NPM 9.8.1
OS: Mac OS X Ventura 13.5.2

Browser

N/A

Additional context

Explicitly installing the flat module does not help (but should not be necessary anyway).

Run npx jest or npx ng test in the linked demo repo.

Side-note, but commit 290920b645b94845ff0265451e2af560b083b98d shows a working version using the experimental @angular-devkit builder for Jest.

Related issues (that do not provide a solution for this specific problem as far as I can tell):

#301
#402

I would like to make a pull request for this bug

About this issue

Original URL
State: open
Created 9 months ago
Reactions: 11
Comments: 21

Most upvoted comments

@guzmanoj Perfect, this is the easiest solution, thank you. Hopefully Jest will make it easier for us in the future.

I am now using the following combination: NX 17.2.8 Angular 17.0.9 Jest 29.7.0 jest-preset-angular 13.1.6 @ngneat/transloco 6.0.4

All is now working by adding the following to jest.preset.js in the root.

  moduleNameMapper: {
    '^flat': 'node_modules/flat/index.js',
  },

elmarbeckmann on Jan 17, 2024

Perhaps a simpler solution could be mapping the flat dependency? Here’s how my jest.preset.js looks like:


const nxPreset = require('@nrwl/jest/preset').default;

module.exports = {
    ...nxPreset,
    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
    coverageReporters: ['html', 'json', 'lcov'],
    transform: {
        '^.+\\.(ts|mjs|html)$': [
            'jest-preset-angular',
            {
                tsconfig: '<rootDir>/tsconfig.spec.json',
                stringifyContentPathRegex: '\\.(html|svg)$',
                isolatedModules: true,
                diagnostics: false
            }
        ]
    },
    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
    moduleNameMapper: {
        '^flat': 'node_modules/flat/index.js'
    },
    snapshotSerializers: [
        'jest-preset-angular/build/serializers/no-ng-attributes',
        'jest-preset-angular/build/serializers/ng-snapshot',
        'jest-preset-angular/build/serializers/html-comment'
    ]
};

guzmanoj on Nov 5, 2023

@dmytro-afonin When the war in my country is over.

This is more of a documentation issue. flat is used by Transloco at runtime so it makes sense to use ESM instead of commonjs as it was up until now ( there was no ESM distribution ).

As I wrote (and you can see both on the versions themselves and on the Transloco changelog) versions 5.0.8-10 are deprecated as they contain the breaking change of upgrading flat to ESM.

I invite all of you to find and share the best solution for using ESM on jest as this change should stay IMO (security reasons, ESM on browser).

You are welcome to share thoughts, though please note that I won’t be available to respond anytime soon.

shaharkazaz on Oct 31, 2023

Have this issue on a new project using Transloco 6.0.0 and Jest 29.4.1

danipavic on Oct 17, 2023

We have the same issue after upgrading to Transloco Version 5, an upgrade to version 6 does not help. Downgrading to version 4.X.X lets us run our tests again. We’ re on Angular 16, so version 5 is recommended but at least in our case it seems to be working so far.

Digni on Oct 17, 2023

Have this issue on a project with angular v17, Transloco 6.0.1 and Jest 29.5.10

dziraev on Dec 26, 2023

@kevintyj Transloco v5.0.7 should have the cjs version of flat and ng 16 support

shaharkazaz on Dec 8, 2023

What ended up working for us was changing jest.config.js to contain:

const { pathsToModuleNameMapper } = require('ts-jest');

const moduleNameMapper = pathsToModuleNameMapper({}, {
  prefix: '<rootDir>/',
});

moduleNameMapper['flat'] = '<rootDir>/node_modules/flat/index.js';

module.exports = {
    ...
  moduleNameMapper,
  transformIgnorePatterns: ['node_modules/?!(.*\\.mjs$)']
};

Tests run a bit slower (cache enabled), from about 30s went up to 40s.

jkremlacek on Oct 23, 2023

the flat package is now distributed in the ECMAScript module syntax. You’ll need to transform code inside the flat package into plain JavaScript. You can do this by including it in the Jest code transformation. e.g. your jest.config.ts should look like this:

  transform: {
    '^.+\\.(ts|mjs|js|html)$': [
      'jest-preset-angular',
      {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.(html|svg)$',
      },
    ],
  },
 // Ignore node_modules except for .mjs files and the @ngneat package. 
  transformIgnorePatterns: ['node_modules/?!(.*\\.mjs$|@ngneat)'],

Piiiiiiiiiiiim on Oct 17, 2023

Looks like a duplicate of https://github.com/ngneat/transloco/issues/704. It seems v6 was on purpose released as major version because of this breaking change, see comment https://github.com/ngneat/transloco/issues/704#issuecomment-1729253257.

I have minimal nx workspace setup with reproduction of this issue:

Full run details: https://github.com/minijus/transloco-jest/actions/runs/6546630677/job/17777465759

Update: “quick fix” could be to override flat with v5.0.2 as in this change: https://github.com/minijus/transloco-jest/pull/1/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

minijus on Oct 17, 2023