CODEWITHSUNDEEP
reactjstypescriptwebpack
Luis Valencia
Luis Valencia

Reputation: 34038

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

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=>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'
            }
        }
    }

};

Upvotes: 192

Views: 533109

Answers (30)

Khaoula Arfaoui
Khaoula Arfaoui

Reputation: 75

Try setting devtool to 'eval-cheap-module-source-map' instead of 'cheap-module-eval-source-map'

Upvotes: 0

Albert Vila Calvo
Albert Vila Calvo

Reputation: 15845

For Expo projects

If you are using Expo SDK version 45 you'll need to use Expo CLI 6.1.0 at most. Higher versions of the CLI will throw this error:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.node should be one of these:
   false | object { __dirname?, __filename?, global? }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration.node has an unknown property 'module'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
    * configuration.node has an unknown property 'dgram'. These properties are valid:
      object { __dirname?, __filename?, global? }
(continues)

To fix the problem, install the version 6.1.0 of the expo-cli with npm install -g [email protected].

Also take a look at https://github.com/expo/expo-cli/issues/4639 where there are other solutions.

Aside: Expo SDK 46 no longer requires a global CLI package. See The New Expo CLI and the Expo SDK 46 announcement.

Upvotes: 1

CoupDeMistral
CoupDeMistral

Reputation: 198

mine is probably an extreme edge case, but it turned out I was getting this error message because I had created a React component called Config. Renaming it to something else fixed the problem. Hopefully this will help someone else who made the same mistake

Upvotes: 0

Ajay jangid
Ajay jangid

Reputation: 1003

for me this works: just removing all !(exclamation marks) from your Project's Directory path: like from "C:\Users}\Desktop\Node\HelloWorld!\new" to this "C:\Users}\Desktop\Node\HelloWorld\new"

or make your Project's Directory path clean i.e. remove all special characters(such as !,@ etc..) from the Project Directory path.

Upvotes: 0

Archimedes Trajano
Archimedes Trajano

Reputation: 41580

If you're using Expo 46 with monorepo support and Create React App, the webpack versions are different. It does not handle the transitive correctly so you have to explicitly add the versions in your expo app project.

yarn add --dev [email protected] [email protected] [email protected]

Upvotes: 0

Kamal Kant
Kamal Kant

Reputation: 1148

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: 'babel-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: 'babel-loader', exclude: /node_modules/ }
        ]
    }
}

Hopefully, This will help someone to get rid out of this issue.

Upvotes: 3

vishpatel73
vishpatel73

Reputation: 317

Just need to install npm use this command:

npm install webpack

if the webpack is not installed globally then use this command to install it:

npm install webpack -g

Upvotes: 0

Louis Cribbins
Louis Cribbins

Reputation: 189

I ran into this problem while trying to use WebPack5 with Cypress and Cucumber (based off of this example https://github.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example). Changing plugin\index.js to this worked for me!

const browserify = require('@cypress/browserify-preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;

module.exports = (on, config) => {
  const options = {
    ...browserify.defaultOptions,
    typescript: require.resolve('typescript'),
  };

  on('file:preprocessor', cucumber(options));
  on('task', {
    log(message) {
      console.log(message)

      return null
    },
  })
};

Upvotes: 0

Yuvaraj
Yuvaraj

Reputation: 699

If you encounter this error after migrating angular version from 11 to 12 and using single spa,

then you can configure "package.json" for the below packages

"single-spa": "^5.9.3"

"single-spa-angular": "^5.0.2"

"@angular-builders/custom-webpack": "^12.1.3"

"webpack": "^5.70.0"

after npm install

Upvotes: 1

Rafael
Rafael

Reputation: 131

Try this piece, the thing is, rules must be a list or array whatever...

module:{
    rules:[
        {
            test:/\.js$/,
            exclude: /node_modules/,
            use:{
                loader:'babel-loader'
            },
        }
    ]
}

Upvotes: 0

Martlark
Martlark

Reputation: 14581

In my case it was caused by copying the webpack.js from another project and not changing the 'entry' and 'output' paths to match the new project structure. Once I'd fixed the paths everything worked again.

Upvotes: 2

PHANTOM-X
PHANTOM-X

Reputation: 586

Installing "webpack": "^5.41.1" with npm i -S webpack@latest will fix this issue.

Upvotes: 11

IAmNaN
IAmNaN

Reputation: 10582

Check your source_path in webpacker.yml. I had the same error on a project where webpacker.yml was copied from another project. It should point to the directory that contains your packs directory.

Upvotes: 1

James Ikubi
James Ikubi

Reputation: 2948

If you are coming from the single SPA world, and you encounter this error. I realized the issue is caused by the scripts to serve the application.

An example is this:

"scripts": {
    "start": "ng serve",
    "serve:single-spa:play": "ng s --project play --disable-host-check --port 4202 --deploy-url http://localhost:4202/ --live-reload false"
  },

To make this work, change the start script to the one below:

"scripts": {
    "start": "npm run serve:single-spa:play",
    "serve:single-spa:play": "ng s --project play --disable-host-check --port 4202 --deploy-url http://localhost:4202/ --live-reload false"
  },

Upvotes: 1

Jamie Hutber
Jamie Hutber

Reputation: 28106

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.

Upvotes: 2

JGFMK
JGFMK

Reputation: 8904

For me I had to change:

cheap-module-eval-source-map

to:

eval-cheap-module-source-map

A v4 to v5 nuance.

Upvotes: 3

Seif Tml
Seif Tml

Reputation: 2423

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.

Upvotes: 1

kangkyu
kangkyu

Reputation: 6130

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.

enter image description here

Upvotes: 0

h.aittamaa
h.aittamaa

Reputation: 359

It work's using rules instead of loaders

module : {
  rules : [
    {
      test : /\.jsx?/,
      include : APP_DIR,
      loader : 'babel-loader'
    }
  ]
}

Upvotes: 10

Filip Savic
Filip Savic

Reputation: 3248

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" <-- **marked line**
    ],

... so I just removed the marked line...

and it all went well. :)

Upvotes: 1

Luis Ciber
Luis Ciber

Reputation: 300

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.

Upvotes: 1

Jos&#233; Quinto Zamora
Jos&#233; Quinto Zamora

Reputation: 2118

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.

Upvotes: 17

John Adeshola
John Adeshola

Reputation: 667

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

Upvotes: 22

Jeff Pal
Jeff Pal

Reputation: 1674

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!

Upvotes: 2

Jarosław Cichoń
Jarosław Cichoń

Reputation: 552

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": "Jarosław Cichoń",
  "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"
  }
}

Upvotes: 34

PatS
PatS

Reputation: 11524

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 [email protected], 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:

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.

Upvotes: 49

Ivo Amaral
Ivo Amaral

Reputation: 755

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.

Upvotes: 63

karthik padav
karthik padav

Reputation: 258

In webpack.config.js replace loaders: [..] with rules: [..] It worked for me.

Upvotes: 9

o-0
o-0

Reputation: 1799

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;

Upvotes: 17

Nga_developer
Nga_developer

Reputation: 79

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.

Upvotes: 6

Related Questions