Objet de configuration non valide. Webpack a été initialisé à l'aide d'un objet de configuration qui ne correspond pas au schéma d'API

J'ai cette application simple de réaction helloworld créée à partir d'un cours en ligne, mais j'obtiens cette erreur:

Objet de configuration non valide. Webpack a été initialisé à l'aide d'un objet de configuration qui ne correspond pas au schéma d'API. - la configuration a une propriété inconnue 'postcss'. Ces propriétés sont valides: object {amd ?, bail ?, cache ?, context ?, dependencies ?, devServer ?, devtool ?, entry, externals ?, loader ?, module ?, name ?, node ?, output ?, performance? , plugins ?, profile ?, recordsInputPath ?, recordsO utputPath ?, recordsPath ?, resolution ?, resolutionLoader ?, stats ?, cible ?, watch ?, watchOptions? } Pour les fautes de frappe: veuillez les corriger.
Pour les options de chargeur: webpack 2 n'autorise plus les propriétés personnalisées dans la configuration. Les chargeurs doivent être mis à jour pour permettre le passage d'options via les options du chargeur dans module.rules. Jusqu'à ce que les chargeurs soient mis à jour, on peut utiliser le LoaderOptionsPlugin pour transmettre ces options au loader: plugins: [new webpack.LoaderOptionsPlugin ({// test: /.xxx$/, // ne peut appliquer cela que pour certaines options de modules: {postcss: ...}})] - configuration.resolve a une propriété inconnue 'root'. Ces propriétés sont valides: object {alias ?, aliasFields ?, cachePredicate ?, descriptionFiles ?, enforceExtension ?, enforceModuleExtension ?, extensions ?, fileSystem ?, mainFields ?, mainFiles ?, moduleExtensions ?, modules ?, plugins?, Résolveur ?, liens symboliques ?, 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 tout le projet mais rappelez-vous que webpack-dev-server doit être installé globalement.
Je marche à travers certaines erreurs de serveur comme webpack ne peuvent pas être trouvées, donc j'ai lié Webpack en utilisant la commande link.
En sortie Résolution de certains problèmes de chemin absolus.

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

Changez simplement de "chargeurs" en "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 des différences .

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 le site Webpack .

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

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

Essayez les étapes ci-dessous:

npm uninstall webpack --save-dev

suivi par

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

Ensuite, vous devriez pouvoir avaler à nouveau. Correction du problème pour moi.

Pour les gens comme moi, qui ont commencé récemment: Le loadersmot-clé est remplacé par rules; même s'il représente toujours le concept de chargeurs. Donc webpack.config.js, pour une application React, c'est comme suit:

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;

Je suppose que votre version Webpack est la 2.2.1. Je pense que vous devriez utiliser ce guide de migration -> https://webpack.js.org/guides/migrating/

Vous pouvez également utiliser cet exemple de TypeSCript + Webpack 2 .

Dans webpack.config.js, remplacez les chargeurs: [..] par des règles: [..] Cela a fonctionné pour moi.

Il fonctionne en utilisant rulesau lieu deloaders

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 ai-je cette erreur

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 du webpack utilisée.

La réponse acceptée ne l'indique pas et d'autres réponses y font allusion mais ne l'indiquent pas clairement npm install [email protected] , il suffit de passer de "loaders" à "rules" dans "webpack.config.js " , et ceci . Je décide donc de répondre à cette question.

La désinstallation et la réinstallation de webpack, ou l'utilisation de 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" donc ils correspondent et les choses d' alto fonctionnent maintenant . Je suis tout à fait pour que les choses fonctionnent, mais je veux que les lecteurs sachent pourquoi ils ont fonctionné.

Chaque fois que vous obtenez une configuration Webpack qui, vous l'espérez, résoudra votre problème ... demandez-vous à quelle version de Webpack la configuration est destinée.

Il existe de nombreuses bonnes ressources pour apprendre le webpack. Certains sont:

• Site officiel de Webpack décrivant la configuration webpack, actuellement à la version 4.x . Bien que ce soit une excellente ressource pour rechercher comment Webpack devrait fonctionner, ce n'est pas toujours la meilleure pour apprendre comment 2 ou 3 options dans Webpack fonctionnent ensemble pour résoudre un problème. Mais c'est le meilleur point de départ car cela vous oblige à savoir quelle version de Webpack vous utilisez. :-)

• Webpack (v3?) Par exemple - adopte une approche globale pour apprendre le 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 il est toujours bon.

• Configurer Webpack4, Babel et React à partir de zéro, revisité - Ceci est spécifique à React mais bon si vous voulez apprendre beaucoup de choses qui sont nécessaires pour créer une application React sur une seule page.

• Webpack (v3) - The Confusing Parts - Bon et couvre beaucoup de terrain. Il est daté du 10 avril 2016 et ne couvre pas le webpack4 mais de nombreux points d'enseignement sont valides ou utiles à apprendre.

Il y a beaucoup plus de bonnes ressources pour apprendre le webpack4 par exemple, veuillez ajouter des commentaires si vous en connaissez d'autres. Espérons que les futurs articles du webpack indiqueront les versions utilisées / expliquées.

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 modifiez le webpack.config.jsfichier à résoudre

- configuration.resolve.extensions [0] ne doit pas être vide.

maintenant, l'extension de résolution devrait ressembler à:

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

puis courez npm start.

Cette erreur se produit généralement lorsque vous avez une version en conflit (angular js). Le Webpack n'a donc pas pu démarrer l'application. Vous pouvez simplement le réparer en supprimant le pack Web et en le réinstallant.

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

Le redémarrage de votre application et tout va bien.

J'espère pouvoir aider quelqu'un. À votre santé

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 recommencé à utiliser du fil 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

J'ai changé les chargeurs à des règles dans le webpack.config.jsfichier et mis à jour les paquets html-webpack-plugin, webpack, webpack-cli, webpack-dev-serverà la dernière version , puis il a travaillé pour moi!

J'ai eu le même problème et j'ai résolu ce problème en apportant des modifications à mon fichier web.config.js. Pour info, j'utilise la dernière version de webpack et webpack-cli. Cette astuce m'a sauvé la journée. J'ai joint l'exemple de mon fichier web.config.js avant et après la version.

Avant:

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

Après: Je viens de remplacer les chargeurs par des règles dans l'objet module comme vous pouvez le voir dans mon extrait de code.

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

Espérons que cela aidera quelqu'un à se débarrasser de ce problème.

Cette erreur me survient lorsque j'utilise path.resolve (), pour configurer les paramètres «entrée» et «sortie». entry: path.resolve(__dirname + '/app.jsx'). Essayez justeentry: __dirname + '/app.jsx'

Dans mon cas, le problème était le nom du dossier contenant le projet, qui portait le signe "!" Tout ce que j'ai fait, c'est renommer le dossier et tout était prêt.

J'ai eu le même problème, et dans mon cas, tout ce que j'avais à faire était le bon vieux

lire le message d'erreur ...

Mon message d'erreur disait:

Objet de configuration non valide. Webpack a été initialisé à l'aide d'un objet de configuration qui ne correspond pas au schéma d'API. - configuration.entry doit être l'un de ceux-ci: function | object {: chaîne non vide | [chaîne non vide]} | chaîne non vide | [chaîne non vide] -> Le (s) point (s) d'entrée de la compilation. Détails: * configuration.entry doit être une instance de fonction -> Une fonction renvoyant un objet d'entrée, une chaîne d'entrée, un tableau d'entrée ou une promesse à ces choses. * configuration.entry ['styles'] doit être une chaîne. -> La chaîne est résolue en un module qui est chargé au démarrage. *configuration.entry ['styles'] ne doit pas contenir l'élément 'C: \ MojiFajlovi \ Faks \ 11Master \ 1Semestar \ UDD-UpravljanjeDigitalnimDokumentima \ Projekat \ nc-front \ node_modules \ bootstrap \ dist \ css \ bootstrap.min.css' deux fois .

Comme l'indique la ligne de message d'erreur en gras, je viens d'ouvrir le angular.jsonfichier et j'ai trouvé que le fichier stylesressemblait à ceci:

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

... donc je viens de supprimer la ligne marquée ...

et tout s'est bien passé. :)

J'ai la même erreur que toi.

npm désinstaller webpack --save-dev

&

npm installer [email protected] --save-dev

résoudre!.

J'avais la version 3 de webpack, j'ai donc installé la version 2.11.5 de webpack-dev-server selon la page https://www.npmjs.com/package/webpack-dev-server "Versions" actuelle. Et puis le problème avait disparu.