Bug(TranslocoTestingModule): Cannot find module 'flat' #714

vankeer · 2023-10-12T15:59:57Z

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?

No

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):

I would like to make a pull request for this bug

No

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

Digni · 2023-10-17T06:05:43Z

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.

devfservant · 2023-10-17T06:57:59Z

Personally, I have no issue with Transloco v5, only with v6

danipavic · 2023-10-17T08:23:18Z

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

minijus · 2023-10-17T11:51:23Z

Looks like a duplicate of #704.
It seems v6 was on purpose released as major version because of this breaking change, see comment #704 (comment).

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

jkremlacek · 2023-10-17T11:52:54Z

Same issue for us.

I managed to make Jest work with Transloco v6 by switching option useESM: true in Jest config (combined with many other changes that are consequence of switching Jest to use ESM when combined with jest-preset-angular). However this solution cannot be used outside of development experimentation for us as it requires node --experimental-vm-modules --no-cache to be used as launcher for Jest.

Piiiiiiiiiiiim · 2023-10-17T13:01:34Z

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)'],

jkremlacek · 2023-10-18T06:24:38Z

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.

vankeer · 2023-10-26T08:02:39Z

Thanks for your replies!

@jkremlacek that Jest config ended up working for me: I updated the ng16 sandbox repo provided with this issue https://github.com/vankeer/transloco-sandbox/blob/bugfix/714-cannot-find-module-flat/jest.config.ts

Downgrading to 5.0.7 instead of 5.0.10 also fixes the issue, so the issue is clearly related to the last changes in those Transloco patch versions.

When I run Jest with ng test I still get the error: Expected to be running in 'ProxyZone', but it was not found.. This is fixed when I comment out the line in setup-jest.ts (or remove setupFilesAfterEnv in the jest config) but then the jest command doesn't work anymore because zone-testing.js is missing.

dmytro-afonin · 2023-10-31T17:07:53Z

When should we expect fix?

dmytro-afonin · 2023-10-31T17:10:15Z

Indeed downgrading to 5.0.7 works for me as well

shaharkazaz · 2023-10-31T17:27:05Z

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

guzmanoj · 2023-11-05T18:14:07Z

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'
    ]
};

maximeqontrol · 2023-11-07T08:47:33Z

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'
    ]
};

This solution works fine for me thank you !

kevintyj · 2023-12-08T09:09:01Z

Been trying all of these solutions, does not seem to work on a pnpm based nx monorepo.
Have tried:
Explicitly adding @5.0.2 as a dev dependency and using moduleNameMapper to map the dependency
Tried adding |@ngneat pattern to transformIgnorePatterns
Downgrading transloco to v 5 or below (Seems to not work properly with ng17/standalone components)

shaharkazaz · 2023-12-08T15:51:31Z

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

kevintyj · 2023-12-08T17:30:44Z

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

Thank you so much for the response. We would love to stay on ng17, still looking for ways to fix this, but it's quite a big of a bottleneck for our pipeline at the moment. We are going to try to manually transpile ESM flat dependency to CJS somehow in the build step reliably, but it seems to spit out other errors.

shaharkazaz · 2023-12-08T19:26:50Z

@kevintyj I'll clarify, it supports v16 and above (at least it should) so you can keep using angular v17.

Did you encounter any issues?

dziraev · 2023-12-26T11:35:02Z

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

elmarbeckmann · 2024-01-17T16:37:55Z

@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',
  },

jjs98 · 2024-03-31T09:25:59Z

As mentioned in #704 already:

transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|.pnpm|flat/)'],

works just fine for me

using version
"nx": "18.2.1", "@jsverse/transloco": "^7.1.0",

dhutaryan · 2024-04-11T13:30:13Z

@jjs98 didn't work for me, still have the following error

Details:

    /node_modules/@jsverse/transloco/node_modules/flat/index.js:12
    export function flatten (target, opts) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

"@jsverse/transloco": "^7.1.0"

shaharkazaz · 2024-05-14T07:37:29Z

Would anyone want to add a documentation section on the possible solutions for the jest/ESM issues addressed here?

elmarbeckmann mentioned this issue Jan 17, 2024

bug(transloco): error when running tests after updating to v5.0.9 #704

Closed

1 task

shaharkazaz mentioned this issue Apr 13, 2024

Bug: Jest test fails with marker jsverse/transloco-keys-manager#189

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug(TranslocoTestingModule): Cannot find module 'flat' #714

Bug(TranslocoTestingModule): Cannot find module 'flat' #714

vankeer commented Oct 12, 2023

Digni commented Oct 17, 2023

devfservant commented Oct 17, 2023

danipavic commented Oct 17, 2023

minijus commented Oct 17, 2023 •

edited

jkremlacek commented Oct 17, 2023 •

edited

Piiiiiiiiiiiim commented Oct 17, 2023

jkremlacek commented Oct 18, 2023 •

edited

vankeer commented Oct 26, 2023

dmytro-afonin commented Oct 31, 2023

dmytro-afonin commented Oct 31, 2023

shaharkazaz commented Oct 31, 2023

guzmanoj commented Nov 5, 2023

maximeqontrol commented Nov 7, 2023

kevintyj commented Dec 8, 2023

shaharkazaz commented Dec 8, 2023

kevintyj commented Dec 8, 2023 •

edited

shaharkazaz commented Dec 8, 2023 •

edited

dziraev commented Dec 26, 2023

elmarbeckmann commented Jan 17, 2024

jjs98 commented Mar 31, 2024 •

edited

dhutaryan commented Apr 11, 2024 •

edited

shaharkazaz commented May 14, 2024

Bug(TranslocoTestingModule): Cannot find module 'flat' #714

Bug(TranslocoTestingModule): Cannot find module 'flat' #714

Comments

vankeer commented Oct 12, 2023

Is there an existing issue for this?

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

Is this a regression?

Current behavior

Expected behavior

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

Transloco Config

Browser

Additional context

I would like to make a pull request for this bug

Digni commented Oct 17, 2023

devfservant commented Oct 17, 2023

danipavic commented Oct 17, 2023

minijus commented Oct 17, 2023 • edited

jkremlacek commented Oct 17, 2023 • edited

Piiiiiiiiiiiim commented Oct 17, 2023

jkremlacek commented Oct 18, 2023 • edited

vankeer commented Oct 26, 2023

dmytro-afonin commented Oct 31, 2023

dmytro-afonin commented Oct 31, 2023

shaharkazaz commented Oct 31, 2023

guzmanoj commented Nov 5, 2023

maximeqontrol commented Nov 7, 2023

kevintyj commented Dec 8, 2023

shaharkazaz commented Dec 8, 2023

kevintyj commented Dec 8, 2023 • edited

shaharkazaz commented Dec 8, 2023 • edited

dziraev commented Dec 26, 2023

elmarbeckmann commented Jan 17, 2024

jjs98 commented Mar 31, 2024 • edited

dhutaryan commented Apr 11, 2024 • edited

shaharkazaz commented May 14, 2024

minijus commented Oct 17, 2023 •

edited

jkremlacek commented Oct 17, 2023 •

edited

jkremlacek commented Oct 18, 2023 •

edited

kevintyj commented Dec 8, 2023 •

edited

shaharkazaz commented Dec 8, 2023 •

edited

jjs98 commented Mar 31, 2024 •

edited

dhutaryan commented Apr 11, 2024 •

edited