Error: export 'default' (imported as 'streams') was not found in 'web-streams-polyfill' with Webpack 5.42.0

[RuslanAktaev]

Hello!

I have Angular Universal project and I use this package to create File and Blob polyfills on server side. After updating to Angular v12 I faced some problem with building app.

My server.ts file:

import { createWindow } from 'domino';
import { File, Blob } from 'web-file-polyfill';

const win = createWindow(template);

global.window = win as Window & typeof globalThis;
global.document = win.document;

global.localStorage = localStorage;
global.File = File;
global.Blob = Blob;

When I try to build project, an error throws:

./node_modules/web-blob/src/package.js:4:51-58 - Error: export 'default' (imported as 'streams') was not found in 'web-streams-polyfill' (possible exports: ByteLengthQueuingStrategy, CountQueuingStrategy, ReadableStream, TransformStream, WritableStream)

If I change this this line in the following way:

import * as streams from "web-streams-polyfill"

It works well. How can I fix this? Maybe there is some Webpack config to fix this?

I set esModuleInterop: true in tsconfig.json, but it doesn't help, because it's not .ts file.

Angular Universal v12.1.0
Angular CLI v12.1.1
Webpack v5.42.0
Node.js 14.17.3

I have tried versions 1.0.2, 1.0.1, 1.0.0 of this library

[Gozala]

Hi @RuslanAktaev, I'm afraid this package had been deprecated in favor of @web-std/file, but I have failed to do my duties to reflect that. Please consider switching.

That said chances are this issue will not be fixed by simply switching to that package. If that is the case could you please try and submit a reproducible test case so it could be isolated and addressed ? I'm afraid moder JS toolchains seem to disagree how to support ESM and fixing things for one setup often breaks the other. That is why we'd need some test case so it could be verified against various tools.