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

Question

I have this simple helloworld react app created from an online course  however I get this error      Invalid configuration object  Webpack has been initialised using a   configuration object that does not match the API schema     - configuration has an unknown property  postcss   These properties are valid     object   amd   bail   cache   context   dependencies     devServer   devtool   entry  externals   loader   module   name     node   output   performance   plugins   profile   recordsInputPath     recordsO utputPath   recordsPath   resolve   resolveLoader   stats     target   watch   watchOptions       For typos  please correct them    For loader options  webpack 2 no longer allows custom properties in   configuration         Loaders should be updated to allow passing options via loader options in module rules         Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader         plugins             new webpack LoaderOptionsPlugin                 test    xxx       may apply this only for some modules            options                 postcss                                           - configuration resolve has an unknown property  root   These properties are valid     object   alias   aliasFields     cachePredicate   descriptionFiles   enforceExtension     enforceModuleExtension   extensions   fileSystem   mainFields     mainFiles   moduleExtensions   modules   plugins    resolver     symlinks   unsafeCache   useSyncFileSystemCalls       - configuration resolve extensions 0  should not be empty    My webpack file is      work with all paths in a cross-platform manner const path   require  path        plugins covered below const   ProvidePlugin     require  webpack    const CopyWebpackPlugin   require  copy-webpack-plugin    const HtmlWebpackPlugin   require  html-webpack-plugin        configure source and distribution folder paths const srcFolder    src   const distFolder    dist       merge the common configuration with the environment specific configuration module exports             entry point for application     entry             app   path join   dirname  srcFolder   ts    app tsx                  allows us to require modules using        import   someExport   from    my-module          instead of        import   someExport   from    my-module ts          with the extensions in the list  the extension can be omitted from the         import from path     resolve               order matters  resolves left to right         extensions         js     ts     tsx     json               root is an absolute path to the folder containing our application             modules         root  path join   dirname  srcFolder   ts               module            loaders                   process all TypeScript files  ts and tsx  through the TypeScript                 preprocessor               test     tsx    loader   ts-loader                    processes JSON files  useful for config files and mock data               test     json    loader   json                    transpiles global SCSS stylesheets                loader order is executed right to left                               test     scss                    exclude   path join   dirname  srcFolder   ts                     loaders    style    css    postcss    sass                                 process Bootstrap SCSS files                               test     scss                    exclude   path join   dirname  srcFolder   scss                     loaders    raw    sass                                          configuration for the postcss loader which modifies CSS after        processing        autoprefixer plugin for postcss adds vendor specific prefixing for        non-standard or experimental css properties     postcss    require  autoprefixer           plugins               provides Promise and fetch API for browsers which do not support            them         new ProvidePlugin                Promise    es6-promise                fetch    imports this  gt global exports global fetch whatwg-fetch                         copies image files directly when they are changed         new CopyWebpackPlugin                from  path join srcFolder   images                to  path join        images                           copies the index html file  and injects a reference to the output JS             file  app js         new HtmlWebpackPlugin               template  path join   dirname  srcFolder   index html                filename   path join        index html                inject   body                             output file settings        path points to web server content folder where the web server will serve         the files from file name is the name of the files  where  name  is the         name of each entry point      output            path  path join   dirname  distFolder   js            filename    name  js           publicPath    js                 use full source maps        this specific setting value is required to set breakpoints in they        TypeScript source in the web browser for development other source map     devtool   source-map           use the webpack dev server to serve up the web application     devServer               files are served from this folder         contentBase   dist              support HTML5 History API for react router         historyApiFallback  true             listen to port 5000  change this to another port if another server             is already listening on this port         port  5000             proxy requests to the JSON server REST service         proxy                  widgets                        server to proxy                 target   http   0 0 0 0 3010

User · Answer

A somewhat unlikely situation  I have removed the yarn lock file  which referenced an older version of webpack  So check to see the differences in your yarn lock file as a possiblity

User · Answer

I had the same issue and I solved it by installing latest npm version   npm install -g npm latest  and then change the webpack config js file to solve   - configuration resolve extensions 0  should not be empty   now resolve extension should look like   resolve        extensions      js     jsx        then run npm start

User · Answer

I had the same issue and I resolved this by making some changes in my web config js file  FYI I am using the latest version of webpack and webpack-cli  This trick just saved my day  I have attached the example of mine web config js file before and after version   Before    module exports         resolve            extensions     js     jsx              entry     index js       output             filename   bundle js             module            loaders                  test     js    loader   bable-loader   exclude   node modules                        After  I Just replaced loaders to rules in module object as you can see in my code snippet   module exports         resolve            extensions     js     jsx              entry     index js       output            filename   bundle js             module            rules                   test     js    loader   bable-loader   exclude   node modules                        Hopefully  This will help someone to get rid out of this issue

User · Answer

For the people like myself  who started recently  The loaders keyword is replaced with rules  even though it still represents the concept of loaders  So my webpack config js  for a React app  is as follows   var webpack   require  webpack    var path   require  path     var BUILD DIR   path resolve   dirname   src client public    var APP DIR   path resolve   dirname   src client app     var config       entry  APP DIR     index jsx     output        path  BUILD DIR      filename   bundle js         module         rules                     test      jsx            include   APP DIR          loader    babel-loader                        module exports   config

User · Answer

For me I had to change  cheap-module-eval-source-map to  eval-cheap-module-source-map A v4 to v5 nuance

User · Answer

I had the same problem  and in my case  all I had to do was the good ol      read the error message      My error message said      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  MojiFajlovi Faks 11Master 1Semestar UDD-UpravljanjeDigitalnimDokumentima Projekat    nc-front node modules bootstrap dist css bootstrap min css  twice    As the bold-ed error message line said  I just opened angular json file and found the styles to look like this    styles              node modules bootstrap dist css bootstrap min css          src styles css          node modules bootstrap dist css bootstrap min css   lt --   marked line                so I just removed the marked line     and it all went well

User · Answer

I guess your webpack version is 2 2 1  I think you should be using this Migration Guide --   https   webpack js org guides migrating   Also  You can use this example of TypeSCript   Webpack 2

User · Answer

I solved this issue by removing empty string from my resolve array  Check out resolve documentation on webpack s site     Doesn t work module exports       resolve        extensions         js     jsx                    Works  module exports       resolve        extensions     js     jsx

User · Answer

Try the below steps    npm uninstall webpack --save-dev   followed by  npm install webpack 2 1 0-beta 22 --save-dev   Then you should be able to gulp again  Fixed the issue for me

User · Answer

Webpack s configuration file has changed over the years  likely with each major release    The answer to the question   Why do I get this error   Invalid configuration object  Webpack has been initialised using a  configuration object that does not match the API schema   is because the configuration file doesn t match the version of webpack being used    The accepted answer doesn t state this and other answers allude to this but don t state it clearly npm install webpack 2 1 0-beta 22  Just change from  loaders  to  rules  in  webpack config js   and this  So I decide to provide my answer to this question   Uninstalling and re-installing webpack  or using the global version of webpack will not fix this problem   Using the correct version of webpack for the configuration file being used is what is important   If this problem was fixed when using a global version it likely means that your global version was  old  and the webpack config js file format your using is  old  so they match and viola things now work   I m all for things working  but want readers to know why they worked   Whenever you get a webpack configuration that you hope is going to solve your problem     ask yourself what version of webpack the configuration is for     There are a lot of good resources for learning webpack   Some are    Official Webpack website describing the webpack configuration  currently at version 4 x   While this is a great resource for looking up how webpack should work  it isn t always the best at learning how 2 or 3 options in webpack work together to solve a problem   But it is the best place to start because it forces you to know what version of webpack you are using   -  Webpack  v3   by Example - takes a bite-sized approach for learning webpack  picking a problem and then showing how to solve it in webpack   I like this approach  Unfortunately it is not teaching webpack 4 but is still good  Setting up Webpack4  Babel and React from scratch  revisited - This is specific to React but good if you want to learn many of the things that are required to create a react single page app  Webpack  v3      The Confusing Parts - Good and covers a lot of ground   It is dated Apr 10  2016 and doesn t cover webpack4 but many of the teaching points are valid or useful to learn    There are a lot more good resources for learning webpack4 by example  please add comments if you know of others   Hopefully  future webpack articles will state the versions being used explained

User · Answer

In my case the problem was the name of the folder where the project was contained  which had the sign     All I did was rename the folder and everything was ready

User · Answer

I have the same error than you      npm uninstall webpack --save-dev    amp       npm install webpack 2 1 0-beta 22 --save-dev    solve it

User · Answer

I got the same error message when introducing webpack to a project I created with npm init   Invalid configuration object  Webpack has been initialised using a configuration object that does not match the API schema     - configuration output path  The provided value  dist assets  is not an absolute path   I started over using yarn which fixed the problem for me   brew update brew install yarn brew upgrade yarn yarn init yarn add webpack webpack-dev-server path touch webpack config js yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev yarn add html-webpack-plugin yarn start   I found the following link helpful  Setup a React Environment Using webpack and Babel

User · Answer

It work s using rules instead of loaders  module       rules                 test      jsx          include   APP DIR        loader    babel-loader

User · Answer

I had webpack version 3 so I installed webpack-dev-server version 2 11 5 according to current https   www npmjs com package webpack-dev-server  Versions  page  And then the problem was gone

User · Answer

This error occurs me when I use path resolve    to set up  entry  and  output  settings  entry  path resolve   dirname     app jsx    Just try entry    dirname     app jsx

User · Answer

Just change from  loaders  to  rules  in  webpack config js   Because loaders is used in Webpack 1  and rules in Webpack2  You can see there have differences

User · Answer

This error usually happens when you have conflicting version  angular js   So the webpack could not start the application  You can simply fix it by removing the webpack and reinstall it   npm uninstall webpack --save-dev npm install webpack --save-dev   The restart your application and everything is fine   I hope am able to help someone  Cheers

User · Answer

Using different syntax  flags       can cause this problem from version to another in webpack  3 4 5      you have to read new webpack configuration updated and deprecated features

User · Answer

I don t exactly know what causes that  but I solve it this way  Reinstall whole project but remember that webpack-dev-server must be globally installed  I walk through some server errors like webpack cant be found  so I linked Webpack using link command  In output Resolving some absolute path issues    In devServer object  inline  false  webpack config js  module exports         entry     src js main js       output            path   dirname    dist            filename   bundle js           publicPath                 devServer            inline  false          contentBase     dist              module            loaders                                  test     jsx                     exclude   node modules bower components                    loader   babel-loader                   query                        presets    es2015    react                                                         package json       name    react-flux-architecture-es6      version    1 0 0      description    egghead      main    index js      scripts          start    webpack-dev-server          repository          type    git        url    git https   github com cichy react-flux-architecture-es6 git          keywords          React        flux          author    Jaroslaw Cichon      license    ISC      bugs          url    https   github com cichy react-flux-architecture-es6 issues          homepage    https   github com cichy react-flux-architecture-es6 readme      dependencies          flux     3 1 2        react     15 4 2        react-dom     15 4 2        react-router     3 0 2          devDependencies          babel-core     6 22 1        babel-loader     6 2 10        babel-preset-es2015     6 22 0        babel-preset-react     6 22 0

User · Answer

I changed loaders to rules in the webpack config js file and updated the packages html-webpack-plugin  webpack  webpack-cli  webpack-dev-server to the latest version then it worked for me

User · Answer

In webpack config js replace loaders       with rules       It worked for me

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

Examples related to reactjs

Examples related to typescript

Examples related to webpack