Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
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"
}
}
Invalid configuration object: Webpack has been initialized using a configuration object that does not match the API schema
The error says that the value for "loader" should be a non-empty string. So if you look at the value for "loader", you see this:
loader: ExtractTextPlugin.extract(
I'm willing to bet that the above does not return a string. When looking at the docs for the ExtractTextPlugin
, it says to use it like so:
use: ExtractTextPlugin.extract(
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema
I think it is case sensitive, ie. change the D
to a d
, change moduleIDs
to moduleIds
.
Webpack 5.47.1 : Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema
mode
should be in the root object and not in the module object:
module.exports = (options) => ({
mode: 'development',
entry: options.entry,
output: Object.assign({ // Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
}, options.output), // Merge with env dependent settings
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.json$/,
use: 'json-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
plugins: options.plugins.concat([
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports-loader?self.fetch!whatwg-fetch',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
}),
// new webpack.NamedModulesPlugin(),
]),
resolve: {
modules: ['app', 'node_modules'],
extensions: [
'.js',
'.jsx',
'.react.js',
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. Next.js
After JDB
's answer i had a clear hint. I configured my next.js
app to use webpack4
after reading this. Here is my new next.cofig.js
:
module.exports = {
webpack5: false,
webpack: (config) => {
config.node = {
dns: "mock",
fs: "empty",
path: true,
url: false,
};
return config;
},
};
webpack gives me error "Invalid configuration object. 'plugins'."
The configuration file has an error: the 'plugins' object should not be a child of 'module' but needd to be one hierachy level higher. (see webpack docs: https://webpack.js.org/configuration/)
Try:
const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const WorkboxPlugin = require('workbox-webpack-plugin')
module.exports = {
entry: "./src/js/index.js",
mode: 'production',
output: {
libraryTarget: 'var',
library: 'Client'
},
module: {
rules: [
{
test: '/\.js$/',
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000',
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
],
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html",
}),
new MiniCssExtractPlugin({filename: '[name].css'}),
new WorkboxPlugin.GenerateSW()
]
}
Related Topics
Generate a Weighted Random Number
How to Separate an Integer into Separate Digits in an Array in JavaScript
Warning: Failed Proptype: Invalid Prop 'Component' Supplied to 'Route'
Postman Test - Validating String Values in an Object in an Array
Passing Multiple Parameters to Function Using Onclick
React.Js - Input Losing Focus When Rerendering
Matching a Forward Slash With a Regex
Clicking a Button Within a Form Causes Page Refresh
How to Access Variables from Another File
Callback Function Cannot Access Variable Within Parent Function'S Scope
How to Push Value Pair into Object Using Method
How to Detect If a Browser Is Blocking a Popup
No Overload Matches This Call. Type 'String' Is Not Assignable to Type 'Signals'
Hosting Your Own JavaScript Scripts Files (Other Than Jquery) on Fast Free Cdns Like Google
How to Resolve Position:Fixed for a Bottom Toolbar on iOS (Iphone/Ipad)
Getting Selected Values from Dropdown Inside Table