Objeto de configuración no válido. El paquete web se ha inicializado mediante un objeto de configuración que no coincide con el esquema de la API

Tengo esta sencilla aplicación helloworld react creada a partir de un curso en línea, sin embargo, aparece este error:

Objeto de configuración no válido. Webpack se ha inicializado mediante un objeto de configuración que no coincide con el esquema de API. - la configuración tiene una propiedad desconocida 'postcss'. Estas propiedades son válidas: objeto {amd ?, ¿bail ?, ¿caché ?, ¿contexto ?, ¿dependencias ?, devServer ?, devtool ?, entrada, externos ?, ¿cargador ?, ¿módulo ?, ¿nombre ?, ¿nodo ?, ¿salida ?, ¿rendimiento? , complementos ?, perfil ?, recordsInputPath ?, recordsO utputPath ?, recordsPath ?, resolver ?, resolveLoader ?, stats ?, target ?, watch ?, watchOptions? } Para errores tipográficos: corríjalos.
Para las opciones del cargador: webpack 2 ya no permite propiedades personalizadas en la configuración. Los cargadores deben actualizarse para permitir el paso de opciones a través de las opciones del cargador en module.rules. Hasta que los cargadores se actualicen, se puede usar LoaderOptionsPlugin para pasar estas opciones al cargador: plugins: [new webpack.LoaderOptionsPlugin ({// test: /.xxx$/, // puede aplicar esto solo para algunas opciones de módulos: {postcss: ...}})] - configuration.resolve tiene una propiedad desconocida 'root'. Estas propiedades son válidas: objeto {alias ?, aliasFields ?, cachePredicate ?, descriptionFiles ?, enforceExtension ?, enforceModuleExtension ?, extensiones ?, fileSystem ?, mainFields ?, mainFiles ?, moduleExtensions ?, módulos ?, plugins?, Resolver ?, symlinks ?, unsafeCache ?, useSyncFileSystemCalls? } - configuration.resolve.extensions [0] no debe estar vacío.

Mi archivo de paquete web es:

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

};

No sé exactamente qué causa eso, pero lo resuelvo de esta manera.
Reinstale todo el proyecto, pero recuerde que webpack-dev-server debe estar instalado globalmente.
Repaso algunos errores del servidor como no se puede encontrar el paquete web, así que vinculé el paquete web usando el comando de enlace.
En salida Resolución de algunos problemas de ruta absoluta.

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

Simplemente cambie de "loaders" a "rules" en "webpack.config.js"

Debido a que los cargadores se utilizan en Webpack 1 y las reglas en Webpack2. Puedes ver que hay diferencias .

Resolví este problema eliminando una cadena vacía de mi matriz de resolución. Consulte la documentación de resolución en el sitio webpack .

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

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

Pruebe los siguientes pasos:

npm uninstall webpack --save-dev

seguido por

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

Entonces deberías poder tragar saliva de nuevo. Me solucionó el problema.

Para las personas como yo, que comenzaron recientemente: la loaderspalabra clave se reemplaza por rules; aunque todavía representa el concepto de cargadores. Entonces mi webpack.config.js, para una aplicación React, es el siguiente:

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;

Supongo que la versión de su paquete web es 2.2.1. Creo que debería usar esta Guía de migración -> https://webpack.js.org/guides/migrating/

Además, puede utilizar este ejemplo de TypeSCript + Webpack 2 .

En webpack.config.js reemplace loaders: [..] con reglas: [..] Funcionó para mí.

Funciona usando en ruleslugar deloaders

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

El archivo de configuración de Webpack ha cambiado a lo largo de los años (probablemente con cada versión importante). La respuesta a la pregunta:

¿Por qué recibo este error?

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

se debe a que el archivo de configuración no coincide con la versión del paquete web que se está utilizando.

La respuesta aceptada no dice esto y otras respuestas aluden a esto, pero no lo dicen claramente npm install [email protected] , simplemente cambie de "loaders" a "rules" en "webpack.config.js " , y esto . Así que decido dar mi respuesta a esta pregunta.

Desinstalar y reinstalar webpack o usar la versión global de webpack no solucionará este problema. Usar la versión correcta del paquete web para el archivo de configuración que se está utilizando es lo importante.

Si este problema se solucionó al usar una versión global, probablemente significa que su versión global era "antigua" y el formato de archivo webpack.config.js que usa es "antiguo", por lo que las cosas coinciden y viola ahora funcionan . Estoy a favor de que las cosas funcionen, pero quiero que los lectores sepan por qué funcionaron.

Siempre que obtenga una configuración de paquete web que espera que resuelva su problema ... pregúntese para qué versión de paquete web es la configuración.

Hay muchos buenos recursos para aprender el paquete web. Algunos son:

• Web oficial webpack que describe la configuración webpack, actualmente en la versión 4.x . Si bien este es un gran recurso para buscar cómo debería funcionar el paquete web, no siempre es el mejor para aprender cómo 2 o 3 opciones en el paquete web funcionan juntas para resolver un problema. Pero es el mejor lugar para comenzar porque te obliga a saber qué versión de webpack estás usando. :-)

• Webpack (¿v3?) Por ejemplo : adopta un enfoque pequeño para aprender el paquete web, elegir un problema y luego mostrar cómo resolverlo en el paquete web. Me gusta este enfoque. Desafortunadamente, no está enseñando el paquete web 4, pero sigue siendo bueno.

• Configuración de Webpack4, Babel y React desde cero, revisado : esto es específico de React, pero es bueno si desea aprender muchas de las cosas que se requieren para crear una aplicación de una sola página de React.

• Webpack (v3) - Las partes confusas - Bueno y cubre mucho terreno. Tiene fecha del 10 de abril de 2016 y no cubre webpack4, pero muchos de los puntos de enseñanza son válidos o útiles para aprender.

Hay muchos más recursos buenos para aprender webpack4 por ejemplo, agregue comentarios si conoce a otros. Con suerte, los artículos futuros del paquete web indicarán las versiones que se utilizan / explican.

Tuve el mismo problema y lo resolví instalando la última versión de npm:

npm install -g npm@latest

y luego cambia el webpack.config.jsarchivo para resolver

- configuration.resolve.extensions [0] no debe estar vacío.

ahora la extensión de resolución debería verse así:

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

luego corre npm start.

Este error generalmente ocurre cuando tiene una versión en conflicto (angular js). Entonces, el paquete web no pudo iniciar la aplicación. Simplemente puede arreglarlo quitando el paquete web y reinstalándolo.

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

Reinicia tu aplicación y todo está bien.

Espero poder ayudar a alguien. Salud

Recibí el mismo mensaje de error al presentar el paquete web a un proyecto que creé con 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!

Empecé a usar hilo que me solucionó el problema:

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

Encontré útil el siguiente enlace: Configurar un entorno React usando webpack y Babel

He cambiado cargadores de reglas en el webpack.config.jsarchivo y actualizado los paquetes html-webpack-plugin, webpack, webpack-cli, webpack-dev-servera la última versión a continuación, que trabajó para mí!

Tuve el mismo problema y lo resolví realizando algunos cambios en mi archivo web.config.js. Para su información, estoy usando la última versión de webpack y webpack-cli. Este truco me acaba de salvar el día. He adjuntado el ejemplo de mi archivo web.config.js antes y después de la versión.

Antes de:

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

Después: Reemplacé los cargadores a las reglas en el objeto del módulo, como puede ver en mi fragmento de código.

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

Con suerte, esto ayudará a alguien a deshacerse de este problema.

Este error me ocurre cuando uso path.resolve (), para configurar las configuraciones de 'entrada' y 'salida'. entry: path.resolve(__dirname + '/app.jsx'). Sólo inténtaloentry: __dirname + '/app.jsx'

En mi caso el problema era el nombre de la carpeta donde estaba contenido el proyecto, que tenía el signo "!" Todo lo que hice fue cambiar el nombre de la carpeta y todo estaba listo.

Tuve el mismo problema, y ​​en mi caso, todo lo que tuve que hacer fue el bueno

leer el mensaje de error ...

Mi mensaje de error decía:

Objeto de configuración no válido. Webpack se ha inicializado mediante un objeto de configuración que no coincide con el esquema de API. - configuration.entry debe ser uno de estos: función | objeto {: cadena no vacía | [cadena no vacía]} | cadena no vacía | [cadena no vacía] -> Los puntos de entrada de la compilación. Detalles: * configuration.entry debe ser una instancia de función -> Una función que devuelve un objeto de entrada, una cadena de entrada, una matriz de entrada o una promesa de estas cosas. * configuration.entry ['styles'] debe ser una cadena. -> La cadena se resuelve en un módulo que se carga al inicio. *configuration.entry ['styles'] no debe contener el elemento 'C: \ MojiFajlovi \ Faks \ 11Master \ 1Semestar \ UDD-UpravljanjeDigitalnimDokumentima \ Projekat \ nc-front \ node_modules \ bootstrap \ dist \ css \ bootstrap.min.css' dos veces .

Como decía la línea del mensaje de error en negrita, acabo de abrir el angular.jsonarchivo y encontré stylesque se ve así:

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

... así que acabo de eliminar la línea marcada ...

y todo salió bien. :)

Tengo el mismo error que tú.

npm desinstalar paquete web --save-dev

Y

npm install [email protected] --save-dev

¡resuélvelo!.

Tenía webpack versión 3, así que instalé webpack-dev-server versión 2.11.5 de acuerdo con la página actual https://www.npmjs.com/package/webpack-dev-server "Versiones". Y luego el problema desapareció.