GoogleChromeLabs / GoogleChromeLabs/container-query-polyfill
can't add to angular project
- 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
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