can't add to angular project

[arnoudb]

Hi, this polyfill is great! Works like charm via a CDN, but when i add it to an Angular project in the standard way (npm install and then add an import in polyfills.ts like:

import 'zone.js'; // example that gives no errors
import 'container-query-polyfill';

I get a runtime error.

Uncaught ReferenceError: require is not defined
    1071 polyfills.js:5940

// offending line in the generated polyfill.: 
var _asyncToGenerator = require("<my local path>/node_modules/@angular-devkit/build-angular/node_modules/@babel/runtime/helpers/asyncToGenerator.js").default;

I'm not sure but i think this is because package.json format. The angular bundler sees it as a node module (commonjs). This feels a bit strange to me as this is a browser polyfill.

The zone.js polyfill (just an example that works) misses the next in the package.json:

"type": "module",

while container-query-polyfill does have this in the package.json definition:

Final note: copying the polyfill to the web root dir and include it with a <script> tag works fine

i'm using version 1.0.0 of the polyfill and my angular version is 13.3.11

Best, Arnoud

[dreamboyx1]

I've been experiencing a similar issue in a Create React App application. Removing the "type": "module", line from the polyfill package.json seems to fix it. However, didn't want to write special code, so ended up just using a <script> tag.

[Marshal27]

Give v1.1.7 a try over at Marshal27/shadow-container-query-polyfill.