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'
}
}
}
};
This question is related to
reactjs
typescript
webpack
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.
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']
}
...
};
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:
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.
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.
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;
Try the below steps:
npm uninstall webpack --save-dev
followed by
npm install [email protected] --save-dev
Then you should be able to gulp again. Fixed the issue for me.
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.
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!
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.
It work's using rules
instead of loaders
module : {
rules : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
}
]
}
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
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'
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
.
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. :)
I have the same error than you.
npm uninstall webpack --save-dev
&
npm install [email protected] --save-dev
solve it!.
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.
In webpack.config.js replace loaders: [..] with rules: [..] It worked for me.
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.
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
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.
Source: Stackoverflow.com