GoogleChromeLabs / GoogleChromeLabs/container-query-polyfill

can't add to angular project

Open
#59 2 comments 4 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.1k
Forks
48
PR merge metrics
No merged PRs in 30d

Description

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("/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 tag works fine

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

Best, Arnoud

Contributor guide

Open the contributing guide

Research direction

Reproduce the runtime error in an Angular 13.3.11 project using the import in polyfills.ts, then inspect the generated polyfill and package.json for how the package is bundled. Compare this with the working zone.js import; done means the npm-installed polyfill loads through Angular without the require-is-not-defined error.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.