How to solve "Can't import the named export 'CommonModule' from non EcmaScript module (only default export is available)"

Question

I'm trying to use ng2-pdf-viewer package.

I have added this module to app.module.ts as like that:

import { PdfViewerModule } from 'ng2-pdf-viewer';

imports: [
    PdfViewerModule,
]

But I got these types of errors:

Error: ./node_modules/ng2-pdf-viewer/fesm2015/ng2-pdf-viewer.mjs 194:29-49
Can't import the named export 'VerbosityLevel' from non EcmaScript module (only default export is available)

Error: ./node_modules/ng2-pdf-viewer/fesm2015/ng2-pdf-viewer.mjs 791:12-21
Can't import the named export 'ViewChild' from non EcmaScript module (only default export is available)

Error: ./node_modules/ng2-pdf-viewer/fesm2015/ng2-pdf-viewer.mjs 690:39-51
Can't import the named export 'debounceTime' from non EcmaScript module (only default export is available)

NodeJs: v16.18.1

Npm: v8.19.2

Angular Cli: 11.2.13

OS: linux x64(Ubuntu)

I have tried these:

• Removed node_modules and npm install
• Removed package-lock.json and npm install
• Cleared npm cache by using npm cache clean
• Tried to import the module to app.module.ts as import * PdfViewerModule from 'ng2-pdf-viewer';
• Tried this solution: https://stackoverflow.com/a/69343125/284199
• I've also tried [ngx-extended-pdf-viewer] package as alternative. But nothing changes.

What is wrong with this?

Thanks