構成オブジェクトが無効です。 Webpackは、APIスキーマと一致しない構成オブジェクトを使用して初期化されました
オンラインコースから作成したこの単純なhelloworld反応アプリを使用していますが、このエラーが発生します。
構成オブジェクトが無効です。 Webpackは、APIスキーマと一致しない構成オブジェクトを使用して初期化されました。 - 設定に不明なプロパティ 'postcss'があります。これらのプロパティは有効です：オブジェクト{amd？、bail？、キャッシュ？、コンテキスト？、依存関係？、devServer？、devtool？、エントリ、外部？、ローダー？、モジュール？、名前？、ノード？、出力？、パフォーマンス？ 、plugins？、profile？、recordsInputPath？、recordsOutputPath？、recordsPath？、resolve？、resolveLoader？、stats？、target？、watch？、watchOptions？のいずれかを入力します。タイプミスの場合：修正してください。
ローダーオプションの場合：webpack 2はもはや設定でカスタムプロパティを許可しません。 module.rulesのローダーオプションを介してオプションを渡すことができるようにローダーを更新する必要があります。ローダーが更新されるまで、LoaderOptionsPluginを使ってこれらのオプションをローダーに渡すことができます。 ...}}）] - configuration.resolveには不明なプロパティ 'root'があります。これらのプロパティは有効です。 ？、unsafeCache？、useSyncFileSystemCalls？を使用してください。 configuration.resolve.extensions [0]は空にしないでください。
私のWebパックファイルは次のとおりです。
// 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'
}
}
}
};
何が原因なのか正確にはわかりませんが、この方法で解決します。
プロジェクト全体を再インストールしますが、webpack-dev-serverはグローバルにインストールする必要があります。
webpackが見つからないなど、いくつかのサーバーエラーについて説明しているので、linkコマンドを使用してWebpackをリンクしました。
出力結果絶対パスの問題をいくつか解決します。
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"
}
}
解決配列から空の文字列を削除することで、この問題を解決しました。 webpackのサイト にある解決ドキュメントをチェックしてください。
//Doesn't work
module.exports = {
resolve: {
extensions: ['', '.js', '.jsx']
}
...
};
//Works!
module.exports = {
resolve: {
extensions: ['.js', '.jsx']
}
...
};
「webpack.config.js」の「ローダー」から「ルール」に変更するだけです。
ローダーはWebpack 1で使用され、Webpack 2ではルールが使用されるためです。 違い があるのがわかります。
以下の手順を試してください。
npm uninstall webpack --save-dev
に続く
npm install [email protected] --save-dev
それからあなたは再び懇願することができるはずです。私のために問題を修正しました。
あなたのウェブパックのバージョンは2.2.1だと思います。私はあなたがこの移行ガイドを使うべきだと思う - > https://webpack.js.org/guides/migrating/
また、 TypeScript + Webpack 2 の例を使用することもできます。
よろしく！
私のような人たち、最近始めた人たちのために：loadersキーワードは に置き換えられます はrulesに置き換えられます。それでもローダーの概念を表していますが。だからReactアプリの私のwebpack.config.jsは次のようになります。
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;
「ローダー」を「ルール」に変更するとうまくいきました（webpack v4）
Webpack.config.jsでローダー：[..]を規則：[..]に置き換えてください。
私は同じ問題を抱えていて、私は最新のnpmバージョンをインストールすることによってそれを解決しました：
npm install -g npm@latest
解決するためにwebpack.config.jsファイルを変更します
configuration.resolve.extensions [0]は空にしないでください。
解決の拡張子は今ようになります：
resolve: {
extensions: [ '.js', '.jsx']
},
それからnpm startを実行してください。
私にとってはrulesの代わりにloadersを使うことでうまくいきます
module : {
rules : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel-loader'
}
]
}
Webpackの構成ファイルは長年にわたって変更されています（メジャーリリースごとに）。質問への答え：
なぜこのエラーが発生するのですか
Invalid configuration object. Webpack has been initialised using a
configuration object that does not match the API schema
は、構成ファイルが使用されているwebpackのバージョンと一致しないためです。
受け入れられた答えはこれを述べておらず、他の答えはこれを暗示していますが、明確に述べていません npm install [email protected] 、 変更するだけ「webpack.config.js」の「ローダー」から「ルール」 、および this 。そこで、私はこの質問に対する答えを提供することにしました。
Webpackをアンインストールして再インストールするか、webpackのグローバルバージョンを使用しても、この問題は解決しません。 重要なのは、使用中の構成ファイルに正しいバージョンのwebpackを使用することです。
グローバルバージョンを使用するときにこの問題が修正された場合、グローバルバージョンが「古い」ことを意味し、使用しているwebpack.config.jsファイル形式が「古い」ので、they matchとヴィオラが動作するようになりました。私はすべてがうまくいくことを望んでいますが、なぜ彼らが働いたのかを読者に知ってもらいたいです。
あなたがあなたの問題を解決することを望んでいるwebpackの設定を取得するときはいつでも...設定のwebpackのバージョンを自問してください。
Webpackを学習するための優れたリソースがたくさんあります。いくつかは次のとおりです。
- Webpackの構成を説明する公式のWebpack Webサイト、現在バージョン4.x 。これはwebpackがどのように機能するかを調べるための優れたリソースですが、問題を解決するためにwebpackの2つまたは3つのオプションがどのように連携するかを学習するのが常に最善とは限りません。ただし、使用しているwebpackのバージョンを知る必要があるため、開始するのに最適な場所です。 :-)
Webpack（v3？）by Example -Webpackを学習し、問題を特定し、webpackでそれを解決する方法を示すために、一口サイズのアプローチを取ります。私はこのアプローチが好きです。残念ながら、webpack 4を教えているわけではありませんが、それでも有効です。
Webpack4、Babel、およびReactをゼロから設定、再検討 -これはReactに固有ですが、多くのことを学びたい場合に適しています反応する単一ページのアプリを作成するために必要です。
Webpack（v3）— The Confusing Parts -良いことで、多くの分野をカバーしています。 2016年4月10日付で、webpack4については説明していませんが、多くのティーチングポイントは学習するのに有効または有用です。
例としてwebpack4を学習するための多くの優れたリソースがあります。他の人を知っている場合はコメントを追加してください。願わくば、将来のwebpackの記事で、使用中/説明中のバージョンが記載されることを願っています。
Npm initで作成したプロジェクトにwebpackを導入したときに同じエラーメッセージが表示されました。
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!
私は糸を使い始めて問題を解決しました。
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
私は以下のリンクが参考になった： webpackとBabelを使ってReact環境を構築する
このエラーは通常衝突しているバージョン（角度js）があるときに起こります。そのため、WebPackはアプリケーションを起動できませんでした。 Webpackを削除して再インストールするだけで修正できます。
npm uninstall webpack --save-dev
npm install webpack --save-dev
アプリケーションを再起動すれば、すべてうまくいきます。
私は誰かを助けることができると思います。乾杯
webpack.config.jsファイルの loaders から rules に変更して、パッケージhtml-webpack-plugin、webpack、webpack-cli、webpack-dev-serverを最新バージョンに更新しました。
Path.resolve（）を使用して 'entry'および 'output'設定をセットアップすると、このエラーが発生します。 entry: path.resolve(__dirname + '/app.jsx')。 entry: __dirname + '/app.jsx'を試すだけ
私はあなたよりも同じ誤りがあります。
npm uninstall webpack --save-dev
＆
npm install [email protected] --save-dev
それを解決する！.