reactjs - starter - Objeto de configuración inválido. Webpack se ha inicializado utilizando un objeto de configuración que no coincide con el esquema API

react with typescript or not

Question

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

Objeto de configuración inválido. Webpack se ha inicializado utilizando un objeto de configuración que no coincide con el esquema API. - la configuración tiene una propiedad desconocida ''postcss''. Estas propiedades son válidas: objeto {amd ?, fianza ?, caché ?, contexto ?, dependencias ?, devServer ?, devtool ?, entrada, externos, cargador, módulo ?, nombre ?, nodo ?, salida ?, rendimiento? , complementos ?, perfil ?, recordsInputPath ?, recordsO utputPath ?, recordsPath ?, resolver? resolveLoader ?, estadísticas ?, objetivo ?, mirar ?, mirarOpciones? } 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 pasar 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: complementos: [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 ?, descripciónFiles ?, enforceExtension ?, enforceModuleExtension ?, extensiones ?, fileSystem ?, mainFields ?, mainFiles ?, moduleExtensions ?, módulos ?, plugins?, Resolver ?, enlaces simbólicos ?, unsafeCache ?, useSyncFileSystemCalls? } - configuration.resolve.extensions [0] no debe estar vacío.

Mi archivo webpack 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''
            }
        }
    }

};

Answer 1

Cambié los cargadores a reglas en el archivo webpack.config.js y actualicé los paquetes html-webpack-plugin , webpack , webpack-cli , webpack-dev-server a la última versión, ¡entonces funcionó para mí!

Answer 2

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

¿Por qué recibo este error?

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

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

La respuesta aceptada no indica esto y otras respuestas aluden a esto pero no lo dicen claramente npm install [email protected] , simplemente cambie de "cargadores" a "reglas" en "webpack.config.js " y this . Entonces decido dar mi respuesta a esta pregunta.

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

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

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 recursos buenos para aprender webpack. Algunos son:

• Sitio web oficial de Webpack que describe la configuración de 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 funcionan juntas 2 o 3 opciones en paquete web 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 del tamaño de un bocado para aprender webpack, elegir un problema y luego mostrar cómo resolverlo en webpack. Me gusta este enfoque. Lamentablemente, no está enseñando webpack 4, pero sigue siendo bueno.

• Configuración de Webpack4, Babel y React desde cero, revisitado : 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 página única de reacción.

• Webpack (v3) - Las partes confusas - Bueno y cubre mucho terreno. Está fechado el 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 buenos recursos para aprender webpack4, por ejemplo, agregue comentarios si conoce a otros. Con suerte, los futuros artículos del paquete web indicarán las versiones que se están usando / explicando.

Answer 3

El cambio de "cargadores" a "reglas" funcionó para mí (webpack v4)

Answer 4

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

Answer 5

Este error generalmente ocurre cuando tienes una versión en conflicto (angular js). Por lo tanto, el paquete web no pudo iniciar la aplicación. Simplemente puede solucionarlo quitando el paquete web y reinstalarlo.

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

El reinicio de su aplicación y todo está bien.

Espero poder ayudar a alguien. Salud

Answer 6

Este error se produce cuando uso path.resolve (), para configurar las configuraciones de ''entrada'' y ''salida''. entry: path.resolve(__dirname + ''/app.jsx'') . Simplemente intente la entry: __dirname + ''/app.jsx''

Answer 7

Funciona para mí usando rules lugar de loaders

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

}

Answer 8

No sé exactamente qué causa eso, pero lo resuelvo de esta manera.
Vuelva a instalar todo el proyecto, pero recuerde que webpack-dev-server debe estar instalado globalmente.
Recorro algunos errores del servidor como webpack no se puede encontrar, así que vinculé Webpack usando el comando de enlace.
En salida Resolver 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"
  }
}

Answer 9

Para las personas como yo, que comenzaron recientemente: la palabra clave de loaders se webpack.js.org/concepts/loaders con rules ; a pesar de que 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;

Answer 10

Pruebe los siguientes pasos:

npm uninstall webpack --save-dev

seguido por

npm install [email protected] --save-dev

Entonces deberías poder tragar de nuevo. Solucionó el problema para mí.

Answer 11

Recibí el mismo mensaje de error cuando introduje webpack en 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!

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

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

El siguiente enlace me pareció útil: configurar un entorno de reacción utilizando webpack y Babel

Answer 12

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'']
  }
  ...
};

Answer 13

Simplemente cambie de "cargadores" a "reglas" en "webpack.config.js"

Porque los cargadores se usan en Webpack 1 y las reglas en Webpack2. Puedes ver que hay differences .

Answer 14

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

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

Answer 15

Tengo el mismo error que tu.

npm uninstall webpack --save-dev

Y

npm install [email protected] --save-dev

¡resuélvelo!.

Answer 16

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

npm install -g npm@latest

y luego cambie el archivo webpack.config.js para resolver

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

ahora resolver la extensión debería verse así:

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

luego ejecute npm start .