7

I have clone ng2-admin directory from git hub few days back and run npm install after that i am able to run and see the UI, now I had been deleted node_modules folder, docs folder, and dist folder from ng2-admin now facing below error in browser console with scattered UI.

So how to fix below error, `

Uncaught Error: Module build failed: Error: No PostCSS Config found in: D:\ng2-admin\node_modules\bootstrap-loader
    at Error (native)
    at D:\ng2-admin\node_modules\postcss-load-config\index.js:51:26
    at Error (native)
    at D:\ng2-admin\node_modules\postcss-load-config\index.js:51:26
    at Object../node_modules/css-loader/index.js!./node_modules/postcss-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/index.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js!./node_modules/bootstrap-loader/no-op.js (http://localhost:5000/assets/vendor.bundle.js:56497:7)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./node_modules/postcss-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/index.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js!./node_modules/bootstrap-loader/no-op.js (http://localhost:5000/assets/vendor.bundle.js:88168:15)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at Object../node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js (http://localhost:5000/assets/vendor.bundle.js:52755:22)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at Object../node_modules/bootstrap-loader/loader.js (http://localhost:5000/assets/vendor.bundle.js:52782:18)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at Object../src/vendor.browser.ts (http://localhost:5000/assets/vendor.bundle.js:90058:1)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at Object.5 (http://localhost:5000/assets/vendor.bundle.js:90087:18)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at webpackJsonpCallback (http://localhost:5000/assets/polyfills.bundle.js:25:23)
    at http://localhost:5000/assets/vendor.bundle.js:2:1
./node_modules/css-loader/index.js!./node_modules/postcss-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/index.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js!./node_modules/bootstrap-loader/no-op.js @ util.js:164
__webpack_require__ @ bootstrap 7cfd64b…:52
./node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./node_modules/postcss-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/index.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js!./node_modules/bootstrap-loader/no-op.js @ no-op.js?6a4c:4
__webpack_require__ @ bootstrap 7cfd64b…:52
./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js @ no-op.js:1
__webpack_require__ @ bootstrap 7cfd64b…:52
./node_modules/bootstrap-loader/loader.js @ loader.js:1
__webpack_require__ @ bootstrap 7cfd64b…:52
./src/vendor.browser.ts @ vendor.browser.ts:24
__webpack_require__ @ bootstrap 7cfd64b…:52
5 @ src async:7
__webpack_require__ @ bootstrap 7cfd64b…:52
webpackJsonpCallback @ bootstrap 7cfd64b…:23
(anonymous) @ vendor.bundle.js:2
lang.js:134 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
client:38 [WDS] Errors while compiling.
client:80 ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js
Module build failed: Error: No PostCSS Config found in: D:\ng2-admin\node_modules\bootstrap-loader
    at Error (native)
    at D:\Client2\ng2-admin\node_modules\postcss-load-config\index.js:51:26
 @ ./~/style-loader!./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js 4:14-193
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader`  /no-op.js`
 @ ./~/bootstrap-loader/loader.js
 @ ./src/vendor.browser.ts
 @ multi vendor

`
Vinod
  • 1,234
  • 3
  • 21
  • 37
  • Looks like files are missing (as you write about deleting some modules/folders). What about restoring them, and trying again? – Joël Jan 12 '17 at 09:41
  • i have run npm install and again run npm update command, then npm start under ng2-admin path and now facing above issue, i think after deleting node_modules folder, npm install command tries to update libraries but don't know where it fails? – Vinod Jan 12 '17 at 14:40

5 Answers5

38

The solution is very simple. You need to add a file on your project root directory:

postcss.config.js

Inside, the content can be:

module.exports = {}

This is a translated version of a now-deleted non-English answer by Feng SHADU.

Ariel
  • 25,995
  • 5
  • 59
  • 69
4castle
  • 32,613
  • 11
  • 69
  • 106
  • I have same problem, and this solution works. https://github.com/akveo/ng2-admin/issues/604#issuecomment-271974780 – Leon Huang Jan 25 '17 at 09:33
2

If you don't want to add another file, it's enough to add your options in your webpack config:

         {
           loader: `postcss-loader`,
           options: {
             options: {},
             plugins: () => {
               autoprefixer({ browsers: [ 'last 2 versions' ] });
             }
           }
         },
kontrollanten
  • 2,649
  • 19
  • 32
  • 1
    Yup, so many of these libs require extra files, I find it can be clearer to just do some things inline like this. And be sure to add `const autoprefixer = require('autoprefixer');` at the top of your file, plus `npm i -D autoprefixer` to install it in the first place. – benjamin.keen Aug 11 '18 at 16:17
1

The solution is actually to properly reference the config file in the loader options like this (create an empty one if you don't have it yet, though):

    {
      loader: 'postcss-loader',
      options: {
        config: { 
          path: 'path/to/postcss.config.js' 
        } 
      }
    }

You are not supposed to create empty or dummy placeholder configs in the node_modules folders.

crtag
  • 2,018
  • 2
  • 14
  • 13
0

This can be caused by a reference error, more specifically an import for CSS file that doesn't exist.

Diego Alves
  • 2,462
  • 3
  • 32
  • 65
-1

Create node_modules/bootstrap-loader/postcss.config.js with the contents module.exports={};

EL missaoui habib
  • 1,075
  • 1
  • 14
  • 24