Objet de configuration invalide. Webpack a été initialisé à l'aide d'un objet de configuration qui ne correspond pas au schéma de l'API.
J'ai cette application simple helloworld react créée à partir d'un cours en ligne, mais j'obtiens cette erreur:
Objet de configuration invalide. Webpack a été initialisé à l'aide d'un objet de configuration qui ne correspond pas au schéma de l'API. - la configuration a une propriété inconnue 'postcss'. Ces propriétés sont valides: objet {amd?, Bail?, Cache?, Contexte?, Dépendances?, DevServer?, Devtool ?, entrée, externals ?, chargeur?, Module?, Nom?, Nœud?, Sortie?, Performances? , plugins ?, profil ?, recordsInputPath ?, recordsO utputPath ?, recordsPath ?, resolution ?, resolLoader ?, stats ?, cible ?, regarder ?, watchOptions? } Pour les fautes de frappe: corrigez-les.
Pour les options du chargeur: le Webpack 2 n'autorise plus les propriétés personnalisées dans la configuration. Les chargeurs doivent être mis à jour pour permettre les options de passage via les options de chargeur dans module.rules. Tant que les chargeurs ne sont pas mis à jour, vous pouvez utiliser LoaderOptionsPlugin pour transmettre ces options au loader: plugins: [new webpack.LoaderOptionsPlugin ({// test: /.xxx$/, // ne peut l’appliquer que pour certaines options de module: {postcss: ...}})] - configuration.resolve a une propriété inconnue 'root'. Ces propriétés sont valides: objet {alias ?, aliasFields ?, cachePredicate ?, descriptionFiles ?, enforceExtension ?, enforceModuleExtension ?, extensions ?, fichier?, MainFields ?, mainFiles ?, moduleExtensions ?, modules ?, modules? ?, unsafeCache ?, useSyncFileSystemCalls? } - configuration.resolve.extensions [0] ne doit pas être vide.
Mon fichier webpack est:
// 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'
}
}
}
};
Je ne sais pas exactement ce qui cause cela, mais je le résous de cette façon.
Réinstallez le projet dans son intégralité, mais rappelez-vous que webpack-dev-server doit être installé de manière globale.
Certaines erreurs de serveur, telles que Webpack ne peuvent pas être détectées, ont donc été liées. J'ai donc lié Webpack à l'aide de la commande link.
En sortie Résolution de certains problèmes de chemin absolu.
Dans 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"
}
}
J'ai résolu ce problème en supprimant la chaîne vide de mon tableau de résolution. Consultez la documentation de résolution sur site Webpack .
//Doesn't work
module.exports = {
resolve: {
extensions: ['', '.js', '.jsx']
}
...
};
//Works!
module.exports = {
resolve: {
extensions: ['.js', '.jsx']
}
...
};
Il suffit de passer de "chargeurs" à "règles" dans "webpack.config.js"
Parce que les chargeurs sont utilisés dans Webpack 1 et les règles dans Webpack2. Vous pouvez voir qu'il y a différences .
Essayez les étapes ci-dessous:
npm uninstall webpack --save-dev
suivi par
npm install [email protected] --save-dev
Ensuite, vous devriez être capable de manger à nouveau. Correction du problème pour moi.
Je suppose que votre version de webpack est 2.2.1. Je pense que vous devriez utiliser ce Guide de migration -> https://webpack.js.org/guides/migrating/
En outre, vous pouvez utiliser cet exemple de TypeScript + Webpack 2 .
Pour les personnes comme moi, qui ont commencé récemment: Le mot clé loaders est remplacé par rules ; même si cela représente toujours le concept de chargeurs. Ainsi, mon webpack.config.js, pour une application React, est le suivant:
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;
Changer les "chargeurs" en "règles" a fonctionné pour moi (webpack v4)
Dans webpack.config.js, remplacez les chargeurs: [..] par des règles: [..] Cela a fonctionné pour moi.
J'ai eu le même problème et je l'ai résolu en installant la dernière version de npm:
npm install -g npm@latest
puis changez le fichier webpack.config.js à résoudre
- configuration.resolve.extensions [0] ne doit pas être vide.
maintenant résoudre l'extension devrait ressembler à:
resolve: {
extensions: [ '.js', '.jsx']
},
puis exécutez npm start.
Cela fonctionne pour moi en utilisant rules au lieu de loaders
module : {
rules : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
}
]
}
Le fichier de configuration de Webpack a changé au fil des ans (probablement avec chaque version majeure). La réponse a la question:
Pourquoi cette erreur est-elle générée
Invalid configuration object. Webpack has been initialised using a
configuration object that does not match the API schema
est dû au fait que le fichier de configuration ne correspond pas à la version de Webpack utilisée.
La réponse acceptée ne l'indique pas et les autres réponses y font allusion, mais ne l'indiquez pas clairement npm install [email protected] , Il suffit de changer de "chargeurs" "règles" dans "webpack.config.js" , et this . Je décide donc de répondre à cette question.
Désinstaller et réinstaller Webpack, ou utiliser la version globale de Webpack ne résoudra pas ce problème. Il est important d'utiliser la version correcte de Webpack pour le fichier de configuration utilisé.
Si ce problème a été résolu lors de l'utilisation d'une version globale, cela signifie probablement que votre version globale était "ancienne" et que le format de fichier webpack.config.js que vous utilisez est "ancien", de sorte qu'ils correspondent et alto les choses fonctionnent maintenant . Je suis tout pour que les choses fonctionnent, mais je veux que les lecteurs sachent pourquoi ils ont travaillé.
Chaque fois que vous obtenez une configuration Webpack qui, espérons-le, résoudra votre problème, demandez-vous à quelle version de Webpack la configuration est destinée.
Il y a beaucoup de bonnes ressources pour apprendre WebPack. Certains sont:
- Site Web officiel de Webpack décrivant la configuration de ce dernier, actuellement à la version 4.x . Bien que ce soit une excellente ressource pour savoir comment Webpack devrait fonctionner, ce n'est pas toujours la meilleure solution pour comprendre comment 2 ou 3 options de Webpack fonctionnent ensemble pour résoudre un problème. Mais c’est le meilleur endroit pour commencer car il vous oblige à savoir quelle version du Webpack vous utilisez. :-)
Webpack (v3?) Par exemple - adopte une approche très simple pour apprendre WebPack, choisir un problème, puis montrer comment le résoudre dans WebPack. J'aime cette approche. Malheureusement, il n'enseigne pas le Webpack 4 mais reste bon.
Configurer Webpack4, Babel et React à partir de rien, revisité - Ceci est spécifique à React mais utile si vous voulez apprendre beaucoup de choses nécessaires créer une application de réaction à une seule page.
Webpack (v3) - Les parties déroutantes - Bon et couvre beaucoup de terrain. Il est daté du 10 avril 2016 et ne couvre pas webpack4, mais de nombreux points d'enseignement sont valables ou utiles à apprendre.
Il y a beaucoup plus de bonnes ressources pour apprendre webpack4 par exemple, veuillez ajouter des commentaires si vous en connaissez d'autres. Espérons que les prochains articles sur le Webpack indiqueront les versions utilisées/expliquées.
Cette erreur se produit généralement lorsque vous avez une version en conflit (js angulaire). Le pack Web n'a donc pas pu démarrer l'application. Vous pouvez simplement le réparer en retirant le pack Web et en le réinstallant.
npm uninstall webpack --save-dev
npm install webpack --save-dev
Le redémarrer votre application et tout va bien.
J'espère pouvoir aider quelqu'un. À votre santé
J'ai changé chargeurs en règles dans le fichier webpack.config.js et mis à jour les packages html-webpack-plugin, webpack, webpack-cli, webpack-dev-server à la dernière version alors cela a fonctionné pour moi!
J'ai reçu le même message d'erreur lors de l'introduction de Webpack dans un projet que j'ai créé avec 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!
J'ai commencé à utiliser du fil, ce qui a résolu le problème pour moi:
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
J'ai trouvé le lien suivant utile: Configurer un environnement React à l'aide de Webpack et Babel
Cette erreur se produit lorsque j'utilise path.resolve () pour configurer les paramètres 'entry' et 'output'. entry: path.resolve(__dirname + '/app.jsx'). Essayez juste entry: __dirname + '/app.jsx'
J'ai la même erreur que toi.
npm désinstaller webpack --save-dev
Et
npm install [email protected] --save-dev
résoudre!.