Ng-bootstrap: gulp demo-server task fails with "No PostCSS Config found in: ..." errors

[tmeneau]

Bug description:

Trying to run gulp demo-server triggers the below postcss errors, and the local webpack demo server fails to render any content. I've included some stack traces at the end of this post for reference.

Workaround

I'm not completely clear on the cause of this behavior, but I believe this is an issue with postcss caused by changes to Webpack's configuration API in a recent beta release. I was able to use the workaround described here and wanted to post here in case anyone encounters the same behavior.

For convenience, here's the specific workaround:

Or you can create a file named postcss.config.js in root directory.
Just leave it empty or write the following line.

module.exports = {};

_note: I had to add the module.exports = {} content to the postcss.config.js file_

References

I've tracked down the following similar issue reports across other projects:

• postcss-loader
• ng2-admin

Stacktraces

ERROR in ./~/css-loader?sourceMap-loader!./~/postcss-loader!./~/sass-loader!./demo/src/style/app.scss
Module build failed: Error: No PostCSS Config found in: /[...]/ng-bootstrap/demo/src/style
    at Error (native)
    at /[...]/ng-bootstrap/node_modules/postcss-load-config/index.js:51:26
 @ ./demo/src/style/app.scss 4:14-191
 @ ./demo/src/app/app.component.ts
 @ ./demo/src/app/app.module.ts
 @ ./demo/src/main.ts
 @ multi app

ERROR in ./~/css-loader?sourceMap-loader!./~/postcss-loader!./~/prismjs/themes/prism.css
Module build failed: Error: No PostCSS Config found in: /[...]/ng-bootstrap/node_modules/prismjs/themes
    at Error (native)
    at /[...]/node_modules/postcss-load-config/index.js:51:26
 @ ./~/prismjs/themes/prism.css 4:14-115
 @ ./demo/src/vendor.ts
 @ multi vendor

ERROR in ./~/css-loader?sourceMap-loader!./~/postcss-loader!./~/bootstrap/dist/css/bootstrap.css
Module build failed: Error: No PostCSS Config found in: /[...]/ng-bootstrap/node_modules/bootstrap/dist/css
    at Error (native)
    at /[...]/ng-bootstrap/node_modules/postcss-load-config/index.js:51:26
 @ ./~/bootstrap/dist/css/bootstrap.css 4:14-125
 @ ./demo/src/vendor.ts
 @ multi vendor

Version of Angular, ng-bootstrap, and Bootstrap:

I've reproduced this using the current Master branch.

_edit: added content of linked workaround for convenience_

[MickL]

Same here. I can't contribute without seeing instant results.

[maxokorokov]

As it was mentioned in one of the links - the workaround for now is to create a postcss.config.js file at the root level of the project and export and empty module module.exports = {} in it

[pkozlowski-opensource]

The "regression" was introduced in this commit: https://github.com/michael-ciniawsky/postcss-load-config/commit/a6c32fd1e9ddf26a506691fc5e1861221a70a8e8 - I guess this check is too restrictive and introduces stronger assumptions. Unfortunately this is not our direct dependency but comes from postcss-loader.

I'm going to send a PR that adds an empty postcss.config.js file but this is just a temporary measure (I was trying to track down why postcss-load-config tries to load config file from a disk but quickly got lost in the WebPack madness....). The proper solution will require:

• simplification of our WebPack config
• moving to yarn (or at least using shrinkwrap for npm) so we are not surprised by issues like this in the feature => #872

I'm going to open a separate issue to track CSS loading simplifications.