Can't resolve 'swiper_angular' on ng build

[yoeran]

• Swiper Version: v6.5.0 (sha1-TKIkO0T8zvR+4oGZN3ZmYH2MUUE=)
• Platform/Target and Browser Versions: CI/CD (Azure Devops pipeline, nodejs v12 docker image) and macOS 10.15.7.
• Angular version: v9.1.12

What You Did

• We've implemented the Swiper module in our application
• Added SwiperModule to our app.module.ts
• Imported SwiperCore from swiper/core in the component that is consuming the swiper component

Expected Behavior

When we're developing the app locally using Angular-cli's ng serve everything works perfectly! When we run ng build we expect the app to build as well.

Actual Behavior

We get the following errors (both locally and in azure devops pipeline):

ERROR in ./node_modules/swiper/angular/swiper_angular.ngfactory.js
Module not found: Error: Can't resolve 'swiper_angular' in '/Users/username/repo/node_modules/swiper/angular'
ERROR in ./src/components/swipeable-boxes/swipeable-boxes.component.ngfactory.js
Module not found: Error: Can't resolve 'swiper_angular' in '/Users/username/repo/src/components/swipeable-boxes'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'swiper_angular' in '/Users/username/repo/src/app'

Do you have any pointers what the cause of this might be and how to fix it? Willing to help and work on a fix, but unsure why this happens in the first place.

[vltansky]

Is it happened only on ci build?

[yoeran]

No, unfortunately it also happens on my machine when running ng build

[vltansky]

Can you share specs of your pc ? Is it happens only on prod build ? Could you reproduce the bug on public repo ?

[komura-c]

I have encounter the same issue.

I used this link as reference. https://medium.com/@tanya/angular-library-module-not-found-error-527445d44019

And In tsconfig.json of my angular project, add this, maybe it works.

  "compilerOptions": {
    ...
    "paths": {
      "swiper_angular": ["node_modules/swiper/angular"]
    } 
  }

[yoeran]

Can you share specs of your pc ? Is it happens only on prod build ? Could you reproduce the bug on public repo ?

@vltansky

• What kinds of pc-specs would you like to know? I don't think pc-specs are relevant to the issue as this error occurs both on my machine and in azure devops (which off course has completely different specs).
• Yes, this only happens when running ng build --prod. The error does not occur when running ng build (apologies for not mentioning this earlier)
• I will try to reproduce it in a isolated repo
• The article that @komura-c mentioned might be a pointer https://medium.com/@tanya/angular-library-module-not-found-error-527445d44019
• Are there minimum requirements for the versions on typescript and/or angular that I missed?

---

@komura-c Thank you for the comment! It definitely sounds like the same issue. I hoped your fix would work, but unfortunately it did not change anything in our repository. Do you use a custom angular.json?

[komura-c]

@yoeran All good. I've changed nothing special in angular.json. spa project, angular v8. It seems internal typescript error of module imports. https://www.typescriptlang.org/docs/handbook/module-resolution.html#relative-vs-non-relative-module-imports And In tsconfig.json, using paths, you also need to add baseurl.

  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "swiper_angular": ["node_modules/swiper/angular"]
    } 
  }

I hope you can fix it soon.

[yoeran]

I've been digging deep and have a couple of findings:

1. It turns out enableIvy was set to false for our project (in the angularCompilerOptions in tsconfig.json). This triggers the error as mentioned before (even more verbose). You can see it reproduced in this repository: https://github.com/yoeran/swiper-reproduce-issue. Run npm run build to see the error (I'll add a snippet at the bottom of this comment, called "Error with enableIvy set to false")
2. After removing the enableIvy:false property from our tsconfig.json (default of enableIvy is true). We no longer have the error, however, we do get another error when building the app. This I have not been able to reproduce in an isolated repository. I'll add this error to this comment as well.

I did find a workaround, which meant installing ngx-swiper-wrapper@^9.0.1 and swiper@^5.4.5. This works fine for our current status. However it would be nice to be able to just use swiper and not the redundant (deprecated?) ngx-swiper-wrapper.

Error 1: When enableIvy is set to false (see linked repo to reproduce this)

ERROR in ./node_modules/swiper/angular/swiper_angular.ngfactory.js
Module not found: Error: Can't resolve 'swiper_angular' in '/Users/username/Code/SwiperBugReproduce/node_modules/swiper/angular'
resolve 'swiper_angular' in '/Users/username/Code/SwiperBugReproduce/node_modules/swiper/angular'
  Parsed request is a module
  using description file: /Users/username/Code/SwiperBugReproduce/node_modules/swiper/angular/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /Users/username/Code/SwiperBugReproduce
        using description file: /Users/username/Code/SwiperBugReproduce/package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/username/Code/SwiperBugReproduce/package.json (relative path: ./swiper_angular)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/swiper_angular doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/swiper_angular.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/swiper_angular.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/swiper_angular.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/swiper_angular.js doesn't exist
            as directory
              /Users/username/Code/SwiperBugReproduce/swiper_angular doesn't exist
      /Users/username/Code/SwiperBugReproduce/node_modules/swiper/angular/node_modules doesn't exist or is not a directory
      /Users/username/Code/SwiperBugReproduce/node_modules/swiper/node_modules doesn't exist or is not a directory
      /Users/username/Code/SwiperBugReproduce/node_modules/node_modules doesn't exist or is not a directory
      /Users/username/Code/node_modules doesn't exist or is not a directory
      /Users/username/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/username/Code/SwiperBugReproduce/node_modules
        using description file: /Users/username/Code/SwiperBugReproduce/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/username/Code/SwiperBugReproduce/package.json (relative path: ./node_modules/swiper_angular)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.js doesn't exist
            as directory
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular doesn't exist
[/Users/username/Code/SwiperBugReproduce/swiper_angular]
[/Users/username/Code/SwiperBugReproduce/swiper_angular.ts]
[/Users/username/Code/SwiperBugReproduce/swiper_angular.tsx]
[/Users/username/Code/SwiperBugReproduce/swiper_angular.mjs]
[/Users/username/Code/SwiperBugReproduce/swiper_angular.js]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper/angular/node_modules]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper/node_modules]
[/Users/username/Code/SwiperBugReproduce/node_modules/node_modules]
[/Users/username/Code/node_modules]
[/Users/username/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.ts]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.tsx]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.mjs]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.js]
 @ ./node_modules/swiper/angular/swiper_angular.ngfactory.js 8:0-37 10:36-51 10:384-399 10:401-416 31:239-257 32:59-77
 @ ./src/app/app.component.ngfactory.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts

Error 2: When enableIvy is removed (thus enableIvy defaults to true)

Compiling swiper_angular : module as esm5
Warning: Invalid constructor parameter decorator in /__w/12/s/node_modules/swiper/angular/fesm2015/swiper_angular.js:
 () => [
    { type: TemplateRef }
]
Error: getInternalNameOfClass() called on a non-ES5 class: expected SwiperSlideDirective to have an inner class declaration
    at Esm5ReflectionHost.getInternalNameOfClass (/__w/12/s/node_modules/@angular/compiler-cli/ngcc/src/host/esm5_host.js:88:23)
    at DelegatingReflectionHost.getInternalNameOfClass (/__w/12/s/node_modules/@angular/compiler-cli/ngcc/src/host/delegating_host.js:89:34)
    at extractDirectiveMetadata (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:237:69)
    at DirectiveDecoratorHandler.analyze (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:80:35)
    at NgccTraitCompiler.TraitCompiler.analyzeTrait (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:345:40)
    at analyze (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:297:58)
    at _loop_1 (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:319:21)
    at NgccTraitCompiler.TraitCompiler.analyzeClass (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:325:35)
    at NgccTraitCompiler.analyzeFile (/__w/12/s/node_modules/@angular/compiler-cli/ngcc/src/analysis/ngcc_trait_compiler.js:47:26)
    at DecorationAnalyzer.analyzeProgram (/__w/12/s/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:134:39)
An unhandled exception occurred: NGCC failed.

[lechediaz]

Hi everyone, I've been working on this issue and I resolved it doing this in tsconfig.json

"compilerOptions": {
  "baseUrl": "./",
    "paths": {
      "swiper_angular": ["../node_modules/swiper/angular"]
    }
}

Note the "../" in "swiper_angular": ["../node_modules/swiper/angular"], this is required cause that path is relative to the baseUrl, and node_modules is out of "./".

Hope it helps

[shorstki]

@lechediaz for me "swiper_angular" path worked only without ../. Angular v8

[tyrandeluna]

Hello guys! Same error here, in angular 7. "swiper_angular": ["../node_modules/swiper/angular"] didn't worked for me =/

[rickvandermeij-aanzee]

Related issue, after updating swiper from 6 to 7, Jest fails to test I do not have any problems with serve or build In Swiper 6, i do not have any problems

 FAIL   deals  apps/deals/src/app/pages/deal/deal-page.component.spec.ts
  ● Test suite failed to run

    Cannot find module 'swiper_angular' from 'src/app/pages/deal/deal-page.component.spec.ts'

       9 | import { MarkdownModule } from 'ngx-markdown';
      10 | import { EventReplayer } from 'preboot';
    > 11 | import { SwiperModule } from 'swiper/angular';
         | ^
      12 |
      13 | import { GeneralHelper } from '@project-core/lib/general/general.helper';
      14 | import * as routerActions from '@project-store/lib/router/router.actions';

      at Resolver.resolveModule (../../node_modules/jest-runtime/node_modules/jest-resolve/build/resolver.js:322:11)
      at Object.<anonymous> (src/app/pages/deal/deal-page.component.spec.ts:11:1)

[BeckmannM]

Related issue, after updating swiper from 6 to 7, Jest fails to test I do not have any problems with serve or build In Swiper 6, i do not have any problems

 FAIL   deals  apps/deals/src/app/pages/deal/deal-page.component.spec.ts
  ● Test suite failed to run

    Cannot find module 'swiper_angular' from 'src/app/pages/deal/deal-page.component.spec.ts'

       9 | import { MarkdownModule } from 'ngx-markdown';
      10 | import { EventReplayer } from 'preboot';
    > 11 | import { SwiperModule } from 'swiper/angular';
         | ^
      12 |
      13 | import { GeneralHelper } from '@project-core/lib/general/general.helper';
      14 | import * as routerActions from '@project-store/lib/router/router.actions';

      at Resolver.resolveModule (../../node_modules/jest-runtime/node_modules/jest-resolve/build/resolver.js:322:11)
      at Object.<anonymous> (src/app/pages/deal/deal-page.component.spec.ts:11:1)

Same issue here.

[vltansky]

Related issue, after updating swiper from 6 to 7, Jest fails to test I do not have any problems with serve or build In Swiper 6, i do not have any problems

 FAIL   deals  apps/deals/src/app/pages/deal/deal-page.component.spec.ts
  ● Test suite failed to run

    Cannot find module 'swiper_angular' from 'src/app/pages/deal/deal-page.component.spec.ts'

       9 | import { MarkdownModule } from 'ngx-markdown';
      10 | import { EventReplayer } from 'preboot';
    > 11 | import { SwiperModule } from 'swiper/angular';
         | ^
      12 |
      13 | import { GeneralHelper } from '@project-core/lib/general/general.helper';
      14 | import * as routerActions from '@project-store/lib/router/router.actions';

      at Resolver.resolveModule (../../node_modules/jest-runtime/node_modules/jest-resolve/build/resolver.js:322:11)
      at Object.<anonymous> (src/app/pages/deal/deal-page.component.spec.ts:11:1)

@BeckmannM @rickvandermeij-aanzee Can you share repo? So this error happens only in testing, while build, serve and prod build works fine?

[rickvandermeij-aanzee]

Yes, only while testing, building, serving works fine

i can try and share a repo at the end of next week, if really needed.

Related issue, after updating swiper from 6 to 7, Jest fails to test I do not have any problems with serve or build In Swiper 6, i do not have any problems

 FAIL   deals  apps/deals/src/app/pages/deal/deal-page.component.spec.ts
  ● Test suite failed to run

    Cannot find module 'swiper_angular' from 'src/app/pages/deal/deal-page.component.spec.ts'

       9 | import { MarkdownModule } from 'ngx-markdown';
      10 | import { EventReplayer } from 'preboot';
    > 11 | import { SwiperModule } from 'swiper/angular';
         | ^
      12 |
      13 | import { GeneralHelper } from '@project-core/lib/general/general.helper';
      14 | import * as routerActions from '@project-store/lib/router/router.actions';

      at Resolver.resolveModule (../../node_modules/jest-runtime/node_modules/jest-resolve/build/resolver.js:322:11)
      at Object.<anonymous> (src/app/pages/deal/deal-page.component.spec.ts:11:1)

@BeckmannM @rickvandermeij-aanzee Can you share repo? So this error happens only in testing, while build, serve and prod build works fine?

Yes, only while testing. I can provide a repo at the end if next week, if its really necessary?

[rickvandermeij-aanzee]

@vltansky i've created a reproduction

1. clone https://github.com/rickvandermey/angular-starterkit/tree/bug/swiper
2. run npm ci
3. run npm run test:ci

[wadehammes]

Same error as above, except for swiper/react using latest Jest. I am able to build, serve, and lint without error, just fails in jest testing:

Test suite failed to run

    Cannot find module 'swiper/react' from 'src/components/VideoGallery/VideoGallery.component.tsx'

[tech22]

Same error as above, except for swiper/react using latest Jest. I am able to build, serve, and lint without error, just fails in jest testing:

Test suite failed to run

    Cannot find module 'swiper/react' from 'src/components/VideoGallery/VideoGallery.component.tsx'

My workaround for tests was to import directly from node_modules directory. Example:

import { SwiperSlide } from '../../../node_modules/swiper/react'

[1beb]

Can confirm also happening with vuejs vue-test-utils/vue-jest.

[dusiromulo]

I don't know if this can help anyone, but only after (the paths config inside tsconfig.json did nothing and I am not using it) I put this configuration in my jest.config.js, swiper_angular was found.

moduleNameMapper: { '^swiper_angular$': '<rootDir>../../node_modules/swiper/angular', }

This jest.config.js is inside of a library project, inside Angular project. (<rootDir>/projects/my-lib/jest.config.js)

Unfortunately I wasn't able to make it work, because the code from 'swiper.esm.js' file is not transforming (I am using jest-preset-angular, the default version). And Jest throws this error:

`Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

.../node_modules/swiper/swiper.esm.js:13 export { default as Swiper, default } from 'swiper/core/core'; ^^^^^^

SyntaxError: Unexpected token 'export'

  at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1732:14)
  at Object.<anonymous> (../../node_modules/swiper/angular/fesm2015/swiper_angular.mjs:5:20)`

I'll try to create a repo to act like this.

[olegshilov]

hello everybody! I get worked solution with latest version of Swiper (8.0.7 for now) to fix tests, i update moduleNameMapper and transformIgnorePatterns in jest.config.js

{
  ...,
  moduleNameMapper: {
    swiper_angular: "<rootDir>/node_modules/swiper",
  },
  transformIgnorePatterns: [
    `node_modules/(?!(@angular|@testing-library|swiper|ssr-window|dom7))`,
  ],
}

i create repo for this, so you can check it here: https://github.com/olegshilov/swiper-angular-jest and successful tests job: https://github.com/olegshilov/swiper-angular-jest/actions/runs/2075808546

[erickjrpbasf]

@dusiromulo did you manage to solve the problem? I'm having the exact same issue.

@rickvandermeij-aanzee could you solve this issue?

---

I get the same error than @rickvandermeij-aanzee:

FAIL   default-store  apps/default-store/src/app/app.component.spec.ts
  ● Test suite failed to run

    Cannot find module 'swiper_angular' from '../../libs/shared/src/lib/shared.module.ts'

    Require stack:
      C:/Users/RamirE2/projects/frontend/libs/shared/src/lib/shared.module.ts
      C:/Users/RamirE2/projects/frontend/libs/shared/src/index.ts
      src/app/app.component.ts
      src/app/app.component.spec.ts

      4 | import { MatSnackBarModule } from '@angular/material/snack-bar';
      5 | import { MatSelectModule } from '@angular/material/select';
    > 6 | import { SwiperModule } from 'swiper/angular';
        | ^
      7 | import { RouterModule } from '@angular/router';
      8 | import { ErrorComponent } from './error/error.component';
      9 | import { SoldtoModalComponent } from './soldto-modal/soldto-modal.component';

      at Resolver.resolveModule (../../node_modules/jest-runtime/node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (../../libs/shared/src/lib/shared.module.ts:6:1)

And when I apply the solution provided by @dusiromulo:

jest.config.js:
moduleNameMapper: { '^swiper_angular$': '<rootDir>../../node_modules/swiper/angular', }

I get:

FAIL   default-store  apps/default-store/src/app/app.component.spec.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    C:\Users\RamirE2\projects\frontend\node_modules\swiper\swiper.esm.js:13
    export { default as Swiper, default } from './core/core.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1728:14)
      at ../../node_modules/swiper/angular/bundles/swiper_angular.umd.js:2:139
      at Object.<anonymous> (../../node_modules/swiper/angular/bundles/swiper_angular.umd.js:5:2)

Thank you very much.

[dusiromulo]

I've been digging deep and have a couple of findings:

1. It turns out enableIvy was set to false for our project (in the angularCompilerOptions in tsconfig.json). This triggers the error as mentioned before (even more verbose). You can see it reproduced in this repository: https://github.com/yoeran/swiper-reproduce-issue. Run npm run build to see the error (I'll add a snippet at the bottom of this comment, called "Error with enableIvy set to false")
2. After removing the enableIvy:false property from our tsconfig.json (default of enableIvy is true). We no longer have the error, however, we do get another error when building the app. This I have not been able to reproduce in an isolated repository. I'll add this error to this comment as well.

I did find a workaround, which meant installing ngx-swiper-wrapper@^9.0.1 and swiper@^5.4.5. This works fine for our current status. However it would be nice to be able to just use swiper and not the redundant (deprecated?) ngx-swiper-wrapper.

Error 1: When enableIvy is set to false (see linked repo to reproduce this)

ERROR in ./node_modules/swiper/angular/swiper_angular.ngfactory.js
Module not found: Error: Can't resolve 'swiper_angular' in '/Users/username/Code/SwiperBugReproduce/node_modules/swiper/angular'
resolve 'swiper_angular' in '/Users/username/Code/SwiperBugReproduce/node_modules/swiper/angular'
  Parsed request is a module
  using description file: /Users/username/Code/SwiperBugReproduce/node_modules/swiper/angular/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /Users/username/Code/SwiperBugReproduce
        using description file: /Users/username/Code/SwiperBugReproduce/package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/username/Code/SwiperBugReproduce/package.json (relative path: ./swiper_angular)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/swiper_angular doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/swiper_angular.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/swiper_angular.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/swiper_angular.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/swiper_angular.js doesn't exist
            as directory
              /Users/username/Code/SwiperBugReproduce/swiper_angular doesn't exist
      /Users/username/Code/SwiperBugReproduce/node_modules/swiper/angular/node_modules doesn't exist or is not a directory
      /Users/username/Code/SwiperBugReproduce/node_modules/swiper/node_modules doesn't exist or is not a directory
      /Users/username/Code/SwiperBugReproduce/node_modules/node_modules doesn't exist or is not a directory
      /Users/username/Code/node_modules doesn't exist or is not a directory
      /Users/username/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/username/Code/SwiperBugReproduce/node_modules
        using description file: /Users/username/Code/SwiperBugReproduce/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: /Users/username/Code/SwiperBugReproduce/package.json (relative path: ./node_modules/swiper_angular)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.js doesn't exist
            as directory
              /Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular doesn't exist
[/Users/username/Code/SwiperBugReproduce/swiper_angular]
[/Users/username/Code/SwiperBugReproduce/swiper_angular.ts]
[/Users/username/Code/SwiperBugReproduce/swiper_angular.tsx]
[/Users/username/Code/SwiperBugReproduce/swiper_angular.mjs]
[/Users/username/Code/SwiperBugReproduce/swiper_angular.js]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper/angular/node_modules]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper/node_modules]
[/Users/username/Code/SwiperBugReproduce/node_modules/node_modules]
[/Users/username/Code/node_modules]
[/Users/username/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.ts]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.tsx]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.mjs]
[/Users/username/Code/SwiperBugReproduce/node_modules/swiper_angular.js]
 @ ./node_modules/swiper/angular/swiper_angular.ngfactory.js 8:0-37 10:36-51 10:384-399 10:401-416 31:239-257 32:59-77
 @ ./src/app/app.component.ngfactory.js
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts

Error 2: When enableIvy is removed (thus enableIvy defaults to true)

Compiling swiper_angular : module as esm5
Warning: Invalid constructor parameter decorator in /__w/12/s/node_modules/swiper/angular/fesm2015/swiper_angular.js:
 () => [
    { type: TemplateRef }
]
Error: getInternalNameOfClass() called on a non-ES5 class: expected SwiperSlideDirective to have an inner class declaration
    at Esm5ReflectionHost.getInternalNameOfClass (/__w/12/s/node_modules/@angular/compiler-cli/ngcc/src/host/esm5_host.js:88:23)
    at DelegatingReflectionHost.getInternalNameOfClass (/__w/12/s/node_modules/@angular/compiler-cli/ngcc/src/host/delegating_host.js:89:34)
    at extractDirectiveMetadata (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:237:69)
    at DirectiveDecoratorHandler.analyze (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/directive.js:80:35)
    at NgccTraitCompiler.TraitCompiler.analyzeTrait (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:345:40)
    at analyze (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:297:58)
    at _loop_1 (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:319:21)
    at NgccTraitCompiler.TraitCompiler.analyzeClass (/__w/12/s/node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:325:35)
    at NgccTraitCompiler.analyzeFile (/__w/12/s/node_modules/@angular/compiler-cli/ngcc/src/analysis/ngcc_trait_compiler.js:47:26)
    at DecorationAnalyzer.analyzeProgram (/__w/12/s/node_modules/@angular/compiler-cli/ngcc/src/analysis/decoration_analyzer.js:134:39)
An unhandled exception occurred: NGCC failed.

Yes, it works now!

Thanks @olegshilov! The key part was the option inside jest.config.js: transformIgnorePatterns: [ 'node_modules/(?!(@angular|@testing-library|swiper|ssr-window|dom7))\', ]

[snowfrogdev]

I also can't get it to work with Jest. I have made a repo reproducing my setup in the hopes that someone can help. @olegshilov's solution didn't work for me.

https://github.com/snowfrogdev/swiper-angular-nx-jest

[Eux86]

I was having a similar problem and solved it adding these lines to jest.config

 moduleNameMapper: {
    '^swiper_angular$': 'node_modules/swiper/angular/bundles/swiper_angular.umd.js',
    },
  transformIgnorePatterns: ['node_modules/(?!swiper|ssr-window|dom7)'],

and downgrading swiper from 8.1.4 to 7.4.1

Hope this can help someone else :)

[vltansky]

I also can't get it to work with Jest. I have made a repo reproducing my setup in the hopes that someone can help. @olegshilov's solution didn't work for me.

snowfrogdev/swiper-angular-nx-jest

https://github.com/snowfrogdev/swiper-angular-nx-jest/pull/1

Looks like moduleNameMapper and transformIgnorePatterns settings works for nx too

[vltansky]

I was having a similar problem and solved it adding these lines to jest.config

 moduleNameMapper: {
    '^swiper_angular$': 'node_modules/swiper/angular/bundles/swiper_angular.umd.js',
    },
  transformIgnorePatterns: ['node_modules/(?!swiper|ssr-window|dom7)'],

and downgrading swiper from 8.1.4 to 7.4.1

Hope this can help someone else :)

try

moduleNameMapper: {
    swiper_angular: 'node_modules/swiper',
  },
  transformIgnorePatterns: [
    `node_modules/(?!(@angular|@testing-library|swiper|ssr-window|dom7))`,
  ],

with swiper 8.

[dolphinigle]

I was having a similar problem and solved it adding these lines to jest.config

 moduleNameMapper: {
    '^swiper_angular$': 'node_modules/swiper/angular/bundles/swiper_angular.umd.js',
    },
  transformIgnorePatterns: ['node_modules/(?!swiper|ssr-window|dom7)'],

and downgrading swiper from 8.1.4 to 7.4.1 Hope this can help someone else :)

try

moduleNameMapper: {
    swiper_angular: 'node_modules/swiper',
  },
  transformIgnorePatterns: [
    `node_modules/(?!(@angular|@testing-library|swiper|ssr-window|dom7))`,
  ],

with swiper 8.

Above does not work for me. This works instead: (swiper 8)

moduleNameMapper: {
    swiper_angular: 'node_modules/swiper/angular/esm2020/swiper_angular.mjs',
},
transformIgnorePatterns: ['node_modules/(?!(.*\\.(mjs|esm.js)$|swiper/.*$))'],

[nevius]

I can't get this to work. If I add

moduleNameMapper: {
    swiper_angular: 'node_modules/swiper',
  },
  transformIgnorePatterns: [
    `node_modules/(?!(@angular|@testing-library|swiper|ssr-window|dom7))`,
  ],

I get TypeError: Cannot read properties of undefined (reading 'ngModule')

Anyone got any ideas?

[vltansky]

@nevius please share reproduction repository

[Lugdunumn]

I can't get this to work. If I add

moduleNameMapper: {
    swiper_angular: 'node_modules/swiper',
  },
  transformIgnorePatterns: [
    `node_modules/(?!(@angular|@testing-library|swiper|ssr-window|dom7))`,
  ],

I get TypeError: Cannot read properties of undefined (reading 'ngModule')

Anyone got any ideas?

/* eslint-disable */
// Modules throwing error "Jest encountered an unexpected token"
const esModules = ['@angular', 'tslib', 'rxjs', 'swiper'];

export default {
  extensionsToTreatAsEsm: ['.ts'],
  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
  displayName: 'xxxx',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.(html|svg)$',
      useESM: true,
    },
  },
  coverageDirectory: '../../coverage/apps/xxxx',
  transform: {
    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
  },
  moduleNameMapper: {
    swiper_angular: 'node_modules/swiper/angular/esm2020/swiper_angular.mjs',
  },
  transformIgnorePatterns: [
    //'node_modules/(?!.*\\.mjs$)',
    `<rootDir>/node_modules/(?!.*\\.mjs$|${esModules.join('|')})`,
  ],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
};

This worked well for me.