Error: [object Object] is not a PostCSS plugin After updating to Angular 11.1.0 #19839
Comments
|
got the same error for HttpClient |
|
I solved this by running: |
|
Yes, please try removing |
|
@petebacondarwin i did that still same error |
|
I'm having the same problem as OP, and neither |
|
Please can one of you provide a reproduction that we can debug? |
|
I've removed node_modules, cleared npm's cache and reinstalled everything. Not fixed |
|
I have a strong belief that is due to the PostCSS update. Before Angular 11 used PostCSS 7 and now I've seen on my package-lock.json plenty of references to PostCSS 8. I am freaking out a little bit because this error:
Is a PostCSS error when referencing the |
|
@mrctrifork if you do |
|
I confirm that running |
|
@petebacondarwin where can i send code for you to reproduce ? |
|
@jerkovicl - I have emailed you at your protonmail account. |
|
@petebacondarwin yeah i sent app code to you, did you receive it? |
|
Same here, did you run tests before release ?, how can an error like this reach a release
```
Error: (webpack)-dev-server/client?http://0.0.0.0:0&sockPath=/sockjs-node
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: [object Object] is not a PostCSS plugin
at Processor.normalize (/home/naxs/Trabajo/NaxsCloud/NaxsCloudWeb/node_modules/postcss/lib/processor.js:168:15)
at new Processor (/home/naxs/Trabajo/NaxsCloud/NaxsCloudWeb/node_modules/postcss/lib/processor.js:52:25)
at postcss (/home/naxs/Trabajo/NaxsCloud/NaxsCloudWeb/node_modules/postcss/lib/postcss.js:55:10)
at Object.loader (/home/naxs/Trabajo/NaxsCloud/NaxsCloudWeb/node_modules/postcss-loader/dist/index.js:94:41)
at /home/naxs/Trabajo/NaxsCloud/NaxsCloudWeb/node_modules/webpack/lib/NormalModule.js:313:13
at /home/naxs/Trabajo/NaxsCloud/NaxsCloudWeb/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /home/naxs/Trabajo/NaxsCloud/NaxsCloudWeb/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/home/naxs/Trabajo/NaxsCloud/NaxsCloudWeb/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/naxs/Trabajo/NaxsCloud/NaxsCloudWeb/node_modules/@ngtools/webpack/src/ivy/loader.js:57:9
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:97:5)
Error: ./src/main.ts Error: ./src/polyfills.ts Error: ./src/styles.css Error: ./node_modules/text-security/text-security.css Error: ./node_modules/text-security/text-security-circle.css Error: ./node_modules/swiper/swiper-bundle.min.css Error: ./node_modules/@clr/icons/clr-icons.min.css Error: ./node_modules/@clr/ui/clr-ui.min.css Error: ./node_modules/flatpickr/dist/flatpickr.min.css Error: ./node_modules/select2/dist/css/select2.min.css Error: ./node_modules/ag-grid-community/dist/styles/ag-grid.css Error: ./node_modules/ag-grid-community/dist/styles/ag-theme-balham.css |
|
OK so there are two issues here:
|
|
Transferring to the CLI project, since we think it is most likely a problem there. |
|
In the reproduction from @jerkovicl the ApiService.ɵfac = function ApiService_Factory(t) { return new (t || ApiService)(_angular_core__WEBPACK_IMPORTED_MODULE_2__["ɵɵinject"](_angular_common_http__WEBPACK_IMPORTED_MODULE_3__["HttpClient"])); };
ApiService.ɵprov = _angular_core__WEBPACK_IMPORTED_MODULE_2__["ɵɵdefineInjectable"]({ token: ApiService, factory: ApiService.ɵfac });
ApiService = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_ngneat_until_destroy__WEBPACK_IMPORTED_MODULE_1__["UntilDestroy"])({ checkProperties: true }),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [HttpClient])
], ApiService);You can note that there is a bare Looking at the output of the Angular compiler (before webpack) we see: ApiService.ɵfac = function ApiService_Factory(t) { return new (t || ApiService)(i0.ɵɵinject(i1.HttpClient)); };
ApiService.ɵprov = i0.ɵɵdefineInjectable({ token: ApiService, factory: ApiService.ɵfac });
ApiService = __decorate([
UntilDestroy({ checkProperties: true }),
__metadata("design:paramtypes", [HttpClient])
], ApiService);
export { ApiService };
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApiService, [{
type: Injectable
}], function () { return [{ type: i1.HttpClient }]; }, null); })();Here you can see that there are |
|
Update on the missing __metadata("design:paramtypes", [HttpClient])Setting this to The only time when this setting needs to be true is if your application queries the metadata at runtime, which is fairly rare these days and if you are doing so then you probably know what you are doing. That being said, we should probably work out why this import is being dropped... |
|
My refrenceError with angular-cli 11.1.0 is with Observable like as EDIT: it's difference referenceError (Uncaught ReferenceError: OverlayContainer is not defined) but at least reproduce an error with this public repo, https://github.com/chunghha/docker-ng-cli/tree/develop, when you use the cli 11.1.0 but not with the cli 11.0.7. |
|
I can reproduce the issues reference errors; disabling the new Ivy integration in the CLI does not show the same issue so there appears to be some bug there. A workaround could be to set the environment variable |
|
Good news for the |
|
The In regards to the reference errors (fix pending as well: #19841), the |
…r package `postcss-loader` version 4.2.0 added an `implementation` option. Using the using will ensure that the correct postcss version is used. More info: webpack-contrib/postcss-loader@deac978 Fixes #19839
…r package `postcss-loader` version 4.2.0 added an `implementation` option. Using the using will ensure that the correct postcss version is used. More info: webpack-contrib/postcss-loader@deac978 Fixes #19839 (cherry picked from commit 5711e69)
|
Just published v11.1.1 which should contain the necessary fixes for this issue. Please update to that version. |
Works like a Magic :) |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
🐞 bug report
Affected Package
the application itself
Is this a regression?
Not a regression
Description
I updated my app from Angular 11.0.9 to Angular 11.1.0 because there was a bug with the HttpClient and now it doesn't compile
🔬 Minimal Reproduction
I ran
ng update @angular/cdk @angular/core @angular/cli @angular/materialProcess finished successfully
And then tried to
ng serveorng buildand yields the output below🔥 Exception or Error
🌍 Your Environment
Angular Version:
Anything else relevant?
Nothing else, can't build the app
The text was updated successfully, but these errors were encountered: