import {saveAs} from 'file-saver': CommonJS or AMD dependencies can cause optimization bailouts

Question

After upgrading to Angular 10, my download file-saver saveAs triggers the following compilation warning:

CommonJS or AMD dependencies can cause optimization bailouts.

The compiler also provides a link to an explanation and how to disable the warning. Instead of disabling the warning, is there a ES bundle implementation for the saveAs functionality?

score 24 · Accepted Answer · edited Jul 22 '22 at 20:15

24

Use file-saver-es instead.

npm install -S file-saver-es

Then in your code import saveAs and other codes keep as before.

import { saveAs } from 'file-saver-es';

and if you're using typescript add following to your tsconfig:

"paths": {
      "file-saver-es": [
        "@types/file-saver"
      ]
    }

edited Jul 22 '22 at 20:15

Matthieu Riegler

31,918
20
95
134

answered Jan 21 '21 at 05:18

Larry Guo

356
2
4

3

There is no `@types/file-saver-es`. – Mikhail Orlov Mar 29 '21 at 12:01
1

@MikhailOrlov see the edit about that ! – Matthieu Riegler Jul 22 '22 at 20:15
2

@MatthieuRiegler it looks like there IS now a `@types/file-saver-es` – adamdport Oct 05 '22 at 20:38

score 7 · Answer 2 · answered Jul 03 '21 at 14:44

7

I tried everything but nothing worked. So decided to shut angular up.

I added file-saver as an allowed commonjs dependancy in angular.json file.

"allowedCommonJsDependencies": ["file-saver"],

That goes in projects->architect->build->options.

answered Jul 03 '21 at 14:44

Ε Г И І И О

11,199
1
48
63

Only hides the warning unfortunately. – Brian Reinhold Apr 10 '23 at 21:52

Ammaar Patel · Answer 3 · 2020-09-14T09:25:10.887

There is a pull request on file-saver to use es modules but it's almost a year old now so I don't know if it's going to happen. The pull request is here. You could also use the repository of the pull request, but it's behind the original repo. There is also another repo here which is called ngx-filesaver and uses FileSaver.js. I haven't tried it so I don't know if it will fix the issue, or if it is even any good.

Update

I tried ngx-filesaver and it seems to just wrap FileSaver.js in an Angular Module. So whilst it gives you a service to use which is more inline with the rest of your angular code, it doesn't deal with the commonJS or AMD dependency warning.

import {saveAs} from 'file-saver': CommonJS or AMD dependencies can cause optimization bailouts

3 Answers3

Update