Ungültiges Konfigurationsobjekt. Webpack wurde mit einem Konfigurationsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt

Ich habe diese einfache Helloworld React App aus einem Online-Kurs erstellt, erhalte jedoch folgende Fehlermeldung:

Ungültiges Konfigurationsobjekt. Webpack wurde mit einem Konfigurationsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt. - Die Konfiguration hat eine unbekannte Eigenschaft 'postcss'. Diese Eigenschaften sind gültig: Objekt {amd?, Kaution?, Cache?, Kontext?, Abhängigkeiten?, DevServer?, Devtool?, Eintrag, extern?, Loader?, Modul?, Name?, Knoten?, Ausgabe?, Leistung? , Plugins?, Profil?, RecordsInputPath?, RecordsO UtputPath?, RecordsPath?, Resolution?, ResolutionLoader?, Stats?, Target?, Watch?, WatchOptions? } Tippfehler: Bitte korrigieren Sie sie.
Für Loader-Optionen: Webpack 2 erlaubt keine benutzerdefinierten Eigenschaften mehr in der Konfiguration. Lader sollten aktualisiert werden, damit Optionen über Laderoptionen in module.rules übergeben werden können. Bis die Loader aktualisiert sind, können Sie diese Optionen mit dem LoaderOptionsPlugin an den Loader übergeben: plugins: [new webpack.LoaderOptionsPlugin ({// test: /.xxx$/, // kann dies nur für einige Moduloptionen anwenden: {postcss: ...}})] - configuration.resolve hat eine unbekannte Eigenschaft 'root'. Diese Eigenschaften sind gültig: Objekt {Alias?, AliasFields?, CachePredicate?, DescriptionFiles?, EnforceExtension?, EnforceModuleExtension?, Erweiterungen?, Dateisystem?, MainFields?, MainFiles?, ModuleExtensions?, Module?, Plugins?, Resolver?, Symlinks ?, unsafeCache?, useSyncFileSystemCalls? } - configuration.resolve.extensions [0] sollte nicht leer sein.

Meine Webpack-Datei lautet:

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

};

Ich weiß nicht genau, was das verursacht, aber ich löse es so.
Installieren Sie das gesamte Projekt neu, aber denken Sie daran, dass der Webpack-Dev-Server global installiert sein muss.
Ich gehe durch einige Serverfehler, wie Webpack kann nicht gefunden werden, also habe ich Webpack mit dem Befehl link verknüpft.
In der Ausgabe Behebung einiger absoluter Pfadprobleme.

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"
  }
}

Wechseln Sie einfach in "webpack.config.js" von "loaders" zu "rules".

Weil Loader in Webpack 1 und Regeln in Webpack2 verwendet werden. Sie können sehen, dass es Unterschiede gibt .

Ich habe dieses Problem gelöst, indem ich eine leere Zeichenfolge aus meinem Auflösungsarray entfernt habe. Lesen Sie die Dokumentation zur Lösung auf der Website des Webpacks .

//Doesn't work
module.exports = {
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
  ...
}; 

//Works!
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx']
  }
  ...
};

Versuchen Sie die folgenden Schritte:

npm uninstall webpack --save-dev

gefolgt von

npm install webpack@2.1.0-beta.22 --save-dev

Dann sollten Sie wieder schlucken können. Das Problem wurde für mich behoben.

Für die Leute wie mich, die vor kurzem angefangen haben: Das loadersSchlüsselwort wird ersetzt durch rules; obwohl es immer noch das Konzept der Lader darstellt. webpack.config.jsFür eine React-App lautet meine also wie folgt:

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;

Ich denke, Ihre Webpack-Version ist 2.2.1. Ich denke, Sie sollten dieses Migrationshandbuch verwenden -> https://webpack.js.org/guides/migrating/

Sie können auch dieses Beispiel für TypeSCript + Webpack 2 verwenden .

In webpack.config.js ersetzen Sie Loader: [..] durch Regeln: [..] Es hat bei mir funktioniert.

Es funktioniert mit rulesstattloaders

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

Die Konfigurationsdatei von Webpack hat sich im Laufe der Jahre geändert (wahrscheinlich mit jeder Hauptversion). Die Antwort auf die Frage:

Warum bekomme ich diesen Fehler?

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

Dies liegt daran, dass die Konfigurationsdatei nicht mit der verwendeten Webpack-Version übereinstimmt.

In der akzeptierten Antwort wird dies nicht angegeben, und in anderen Antworten wird darauf hingewiesen , es wird jedoch nicht eindeutig angegeben. Npm install [email protected] . Wechseln Sie einfach in "webpack.config.js" von "loaders" zu "rules" " und das hier . Also beschließe ich, meine Antwort auf diese Frage zu geben.

Durch Deinstallieren und erneutes Installieren von Webpack oder Verwenden der globalen Version von Webpack wird dieses Problem nicht behoben. Es ist wichtig, die richtige Version des Webpacks für die verwendete Konfigurationsdatei zu verwenden.

Wenn dieses Problem bei der Verwendung einer globalen Version behoben wurde, bedeutet dies wahrscheinlich, dass Ihre globale Version "alt" war und das von Ihnen verwendete Dateiformat "webpack.config.js" "alt" ist, sodass sie übereinstimmen und die Bratschen jetzt funktionieren . Ich bin alles für Dinge, die funktionieren, aber ich möchte, dass die Leser wissen, warum sie gearbeitet haben.

Wann immer Sie eine Webpack-Konfiguration erhalten, von der Sie hoffen, dass sie Ihr Problem löst, fragen Sie sich, für welche Webpack-Version die Konfiguration bestimmt ist.

Es gibt viele gute Ressourcen zum Lernen von Webpacks. Einige sind:

• Offizielle Webpack Webseite Beschreibung der webpack Konfiguration, die derzeit in der Version 4.x . Dies ist zwar eine großartige Ressource, um herauszufinden, wie Webpack funktionieren sollte, aber es ist nicht immer die beste Methode, um zu lernen, wie zwei oder drei Optionen in Webpack zusammenarbeiten, um ein Problem zu lösen. Dies ist jedoch der beste Ausgangspunkt, da Sie wissen müssen, welche Version des Webpacks Sie verwenden. :-)

• Webpack (v3?) Am Beispiel - verwendet einen mundgerechten Ansatz, um Webpack zu lernen, ein Problem auszuwählen und dann zu zeigen, wie es im Webpack gelöst werden kann. Ich mag diesen Ansatz. Leider unterrichtet es Webpack 4 nicht, ist aber immer noch gut.

• Einrichten von Webpack4, Babel und React von Grund auf neu, überarbeitet - Dies ist spezifisch für React, aber gut, wenn Sie viele der Dinge lernen möchten, die zum Erstellen einer React Single-Page-App erforderlich sind.

• Webpack (v3) - The Confusing Parts - Gut und deckt viel Boden ab. Es ist vom 10. April 2016 und deckt nicht webpack4 ab, aber viele der Lehrpunkte sind gültig oder nützlich, um sie zu lernen.

Es gibt viel mehr gute Ressourcen, um webpack4 anhand eines Beispiels zu lernen. Fügen Sie bitte Kommentare hinzu, wenn Sie andere kennen. In zukünftigen Webpack-Artikeln werden hoffentlich die verwendeten / erklärten Versionen angegeben.

Ich hatte das gleiche Problem und löste es durch die Installation der neuesten npm-Version:

npm install -g npm@latest

und ändern Sie dann die webpack.config.jszu lösende Datei

- configuration.resolve.extensions [0] sollte nicht leer sein.

Jetzt sollte die Erweiterungserweiterung folgendermaßen aussehen:

resolve: {
    extensions: [ '.js', '.jsx']
},

dann laufen npm start.

Dieser Fehler tritt normalerweise auf, wenn Sie eine widersprüchliche Version haben (eckige js). Das Webpack konnte die Anwendung also nicht starten. Sie können das Problem einfach beheben, indem Sie das Webpack entfernen und neu installieren.

npm uninstall webpack --save-dev
npm install webpack --save-dev

Starten Sie Ihre Anwendung neu und alles ist in Ordnung.

Ich hoffe, ich kann jemandem helfen. Prost

Ich habe die gleiche Fehlermeldung erhalten, als ich Webpack in ein Projekt eingeführt habe, das ich mit npm init erstellt habe.

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!

Ich habe angefangen, Garn zu verwenden, was das Problem für mich behoben hat:

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

Ich fand den folgenden Link hilfreich: Einrichten einer Reaktionsumgebung mit Webpack und Babel

Ich änderte Lader auf Regeln in der webpack.config.jsDatei und die Pakete aktualisiert html-webpack-plugin, webpack, webpack-cli, webpack-dev-serverauf die neueste Version dann für mich gearbeitet!

Ich hatte das gleiche Problem und habe dieses Problem behoben, indem ich einige Änderungen an meiner Datei web.config.js vorgenommen habe. Zu Ihrer Information Ich verwende die neueste Version von Webpack und Webpack-Cli. Dieser Trick hat mir gerade den Tag gerettet. Ich habe das Beispiel meiner Datei web.config.js vor und nach der Version angehängt.

Vor:

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx']
    },
    entry: './index.js',
    output: {
         filename: 'bundle.js'
    },
    module: {
        loaders : [
           { test: /\.js?/, loader: 'bable-loader', exclude: /node_modules/ }
        ]
    }
}

Nachher: ​​Ich habe gerade Lader durch Regeln im Modulobjekt ersetzt, wie Sie in meinem Code-Snippet sehen können.

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx']
    },
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules : [
            { test: /\.js?/, loader: 'bable-loader', exclude: /node_modules/ }
        ]
    }
}

Hoffentlich hilft dies jemandem, dieses Problem zu lösen.

Dieser Fehler tritt auf, wenn ich path.resolve () verwende, um die Einstellungen für 'Eintrag' und 'Ausgabe' einzurichten. entry: path.resolve(__dirname + '/app.jsx'). Probiere es einfachentry: __dirname + '/app.jsx'

In meinem Fall war das Problem der Name des Ordners, in dem das Projekt enthalten war und der das Zeichen "!" Ich habe nur den Ordner umbenannt und alles war fertig.

Ich hatte das gleiche Problem, und in meinem Fall musste ich nur den guten alten tun.

Lesen Sie die Fehlermeldung ...

Meine Fehlermeldung lautete:

Ungültiges Konfigurationsobjekt. Webpack wurde mit einem Konfigurationsobjekt initialisiert, das nicht mit dem API-Schema übereinstimmt. - configuration.entry sollte eine der folgenden sein: function | Objekt {: nicht leere Zeichenfolge | [nicht leere Zeichenfolge]} | nicht leere Zeichenfolge | [nicht leere Zeichenfolge] -> Die Einstiegspunkte der Kompilierung. Details: * configuration.entry sollte eine Instanz der Funktion sein -> Eine Funktion, die ein Eingabeobjekt, eine Eingabezeichenfolge, ein Eintragsarray oder ein Versprechen an diese Dinge zurückgibt. * configuration.entry ['styles'] sollte eine Zeichenfolge sein. -> Die Zeichenfolge wird in ein Modul aufgelöst, das beim Start geladen wird. * *configuration.entry ['styles'] sollte das Element 'C: \ MojiFajlovi \ Faks \ 11Master \ 1Semestar \ UDD-UpravljanjeDigitalnimDokumentima \ Projekat \ nc-front \ knotenmodule \ bootstrap \ dist \ css \ bootstrap.min.css' nicht zweimal enthalten .

Wie in der fettgedruckten Fehlermeldung angegeben, habe ich gerade die angular.jsonDatei geöffnet und festgestellt styles, dass sie folgendermaßen aussieht:

"styles": [
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css" <-- **marked line**
    ],

... also habe ich gerade die markierte Linie entfernt ...

und alles ging gut. :) :)

Ich habe den gleichen Fehler wie Sie.

npm deinstalliere das Webpack --save-dev

&

npm install [email protected] --save-dev

löse es!.

Ich hatte Webpack Version 3, also habe ich Webpack-Dev-Server Version 2.11.5 gemäß der aktuellen https://www.npmjs.com/package/webpack-dev-server Seite "Versionen" installiert . Und dann war das Problem weg.