Angular error: Webpack has been initialised using a configuration object that does not match the API schem

Question

I'm having this error using angular 7, just started today and idk really what's going on here.

I tried update, remove and install all packages again, but no luck.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.entry should be one of these: function | object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] -> The entry point(s) of the compilation.
  Details:
  • configuration.entry should be an instance of function -> A Function returning an entry object, an entry string, an entry array or a promise to these things.
  • configuration.entry['styles'] should be a string. -> The string is resolved to a module which is loaded upon startup.
  • configuration.entry['styles'] should not contain the item 'C:/node_modules\angular-bootstrap-md\scss\mdb-free.scss' twice.
  • configuration.entry should be a string. -> An entry point without name. The string is resolved to a module which is loaded upon startup.
  • configuration.entry should be an array: [non-empty string] WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
• configuration.entry should be one of these: function | object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] -> The entry point(s) of the compilation.
  Details:
  • configuration.entry should be an instance of function -> A Function returning an entry object, an entry string, an entry array or a promise to these things.
  • configuration.entry['styles'] should be a string. -> The string is resolved to a module which is loaded upon startup.
  • configuration.entry['styles'] should not contain the item 'C:/node_modules\angular-bootstrap-md\scss\mdb-free.scss' twice.
  • configuration.entry should be a string. -> An entry point without name. The string is resolved to a module which is loaded upon startup.
  • configuration.entry should be an array: [non-empty string] at webpack (C:/node_modules\webpack\lib\webpack.js:31:9) at Observable.rxjs_1.Observable.obs [as _subscribe] (C:/node_modules@angular-devkit\build-webpack\src\webpack-dev-server\index.js:37:37) at Observable._trySubscribe (C:/node_modules\rxjs\internal\Observable.js:44:25) at Observable.subscribe (C:/node_modules\rxjs\internal\Observable.js:30:22) at C:/node_modules\rxjs\internal\util\subscribeTo.js:22:31 at Object.subscribeToResult (C:/node_modules\rxjs\internal\util\subscribeToResult.js:10:45) at MergeMapSubscriber._innerSub (C:/node_modules\rxjs\internal\operators\mergeMap.js:82:29) at MergeMapSubscriber._tryNext (C:/node_modules\rxjs\internal\operators\mergeMap.js:76:14) at MergeMapSubscriber._next (C:/node_modules\rxjs\internal\operators\mergeMap.js:59:18) at MergeMapSubscriber.Subscriber.next (C:/node_modules\rxjs\internal\Subscriber.js:67:18) at TapSubscriber._next (C:/node_modules\rxjs\internal\operators\tap.js:65:26) at TapSubscriber.Subscriber.next (C:/node_modules\rxjs\internal\Subscriber.js:67:18) at MergeMapSubscriber.notifyNext (C:/node_modules\rxjs\internal\operators\mergeMap.js:92:26) at InnerSubscriber._next (C:/node_modules\rxjs\internal\InnerSubscriber.js:28:21) at InnerSubscriber.Subscriber.next (C:/node_modules\rxjs\internal\Subscriber.js:67:18) at MergeMapSubscriber.notifyNext (C:/node_modules\rxjs\internal\operators\mergeMap.js:92:26)

Answer 1

Check your angular.json file , if there is a duplicate CSS file! sometimes when you install dependencies, they will add CSS file that already existed in the angular.json file.

Answer 2

This happened to me recently in an Angular Visual Studio 2019 project that already had bootstrap, after installing ngx-bootstrap. Searching further down into the error I found:

Webpack has been initialised using a configuration object that does not match the API schema. - configuration.entry['styles'] should not contain the item '...\source\repos...\ClientApp\node_modules\bootstrap\dist\css\bootstrap.min.css' twice.

And in angular.json I had:

        "styles": [
          "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],

I was able to fix this by removing one of the duplicate bootstrap entries:

        "styles": [
          "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],

And Then my project was running again. The key here was to check the error message for what is wrong in the configuration, if specified.

As an example, in the original post we see the very similar:

• configuration.entry['styles'] should not contain the item 'C:\Users\smoreira\Documents\projetos\oficiais\doc-translator-front\node_modules\angular-bootstrap-md\scss\mdb-free.scss' twice.