Angular Module build failed when I attempt to run ng s after installing Tailwind

user_8342189 0
Viewed 807

I'm getting the following errors after installing @ngneat/tailwind when I attempt to run `ng s. How do I fix this ?

This is my current angular version :

Angular version

Angular CLI: 11.2.1
Node: 14.13.0
OS: win32 x64

Angular: 11.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.7
@angular-devkit/build-angular   0.1001.7
@angular-devkit/core            10.1.7
@angular-devkit/schematics      11.2.1
@schematics/angular             11.2.1
@schematics/update              0.1102.1
rxjs                            6.6.3
typescript

Error

Error: ./src/styles.css
Module build failed (from ./node_modules/@angular-builders/custom-webpack/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/@angular-builders/custom-webpack/node_modules/postcss-loader/dist/cjs.js):
TypeError: getProcessedPlugins is not a function
    at C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\tailwindcss\lib\processTailwindFeatures.js:75:83
    at LazyResult.runOnRoot (C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\@angular-builders\custom-webpack\node_modules\postcss\lib\lazy-result.js:303:16)
    at LazyResult.runAsync (C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\@angular-builders\custom-webpack\node_modules\postcss\lib\lazy-result.js:355:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.loader (C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\@angular-builders\custom-webpack\node_modules\postcss-loader\dist\index.js:95:14)
    at C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\@angular-builders\custom-webpack\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.loader (C:\Users\Administrator\Desktop\Projects\mapurbiz\mapurbiz\node_modules\@angular-builders\custom-webpack\node_modules\postcss-loader\dist\index.js:104:7)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

package.json

{
  "name": "mapurbiz",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.1",
    "@angular/common": "~11.2.1",
    "@angular/compiler": "~11.2.1",
    "@angular/core": "~11.2.1",
    "@angular/forms": "~11.2.1",
    "@angular/platform-browser": "~11.2.1",
    "@angular/platform-browser-dynamic": "~11.2.1",
    "@angular/router": "~11.2.1",
    "@ngneat/tailwind": "^6.0.3",
    "@types/leaflet": "^1.5.23",
    "leaflet": "^1.7.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "11.0.0",
    "@angular-devkit/build-angular": "^0.1001.7",
    "@angular/cli": "~11.2.1",
    "@angular/compiler-cli": "~11.2.1",
    "@tailwindcss/aspect-ratio": "0.2.0",
    "@tailwindcss/forms": "0.2.1",
    "@tailwindcss/line-clamp": "0.2.0",
    "@tailwindcss/typography": "0.4.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "postcss-ng-tailwind-in-components": "0.0.3",
    "protractor": "~7.0.0",
    "tailwindcss": "2.0.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^4.1.5"
  }
}
angular
1 Answers

The issue because ofthe PostCSS 7 compatibility build. As of v2.0, Tailwind CSS depends on PostCSS 8. Because PostCSS 8 is only a few months old from this date, many other tools in the ecosystem haven't updated yet, which means you might see an error like this in your terminal. You can read about this here on the tailwind official website.

Or continue Here:

If you run into the error mentioned above, uninstall Tailwind and re-install using the compatibility build instead:

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

The compatibility build is identical to the main build in every way, so you aren't missing out on any features or anything like that.

Once the rest of your tools have added support for PostCSS 8, you can move off of the compatibility build by re-installing Tailwind and its peer-dependencies using the latest tag:

npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
user_83421890
Related