Objeto de configuração inválido. Webpack foi inicializado usando um objeto de configuração que não corresponde ao esquema API

Eu tenho este aplicativo helloworld react simples criado a partir de um curso online, mas recebo este erro:

Objeto de configuração inválido. Webpack foi inicializado usando um objeto de configuração que não corresponde ao esquema API. - a configuração possui uma propriedade desconhecida 'postcss'. Estas propriedades são válidas: objeto {amd ?, bail ?, cache ?, contexto ?, dependências ?, devServer ?, devtool ?, entrada, externos ?, carregador ?, módulo ?, nome ?, nó ?, saída ?, desempenho? , plug-ins ?, perfil ?, recordsInputPath ?, recordsO utputPath ?, recordsPath ?, resolve ?, resolveLoader ?, stats ?, target ?, watch ?, watchOptions? } Para erros de digitação: corrija-os.
Para opções do carregador: o webpack 2 não permite mais propriedades customizadas na configuração. Os carregadores devem ser atualizados para permitir a passagem de opções por meio das opções do carregador em module.rules. Até que os carregadores sejam atualizados, pode-se usar o LoaderOptionsPlugin para passar essas opções para o carregador: plugins: [new webpack.LoaderOptionsPlugin ({// test: /.xxx$/, // pode aplicar isso apenas para algumas opções de módulos: {postcss: ...}})] - configuration.resolve tem uma propriedade desconhecida 'root'. Estas propriedades são válidas: object {alias ?, aliasFields ?, cachePredicate ?, descriptionFiles ?, enforceExtension ?, enforceModuleExtension ?, extensions ?, fileSystem ?, mainFields ?, mainFiles ?, moduleExtensions ?, modules ?, plugins?, Resolver ?, symlinks ?, unsafeCache ?, useSyncFileSystemCalls? } - configuration.resolve.extensions [0] não deve estar vazio.

Meu arquivo webpack é:

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

};

Não sei exatamente o que causa isso, mas resolvo assim.
Reinstale o projeto inteiro, mas lembre-se de que o webpack-dev-server deve ser instalado globalmente.
Eu percorri alguns erros de servidor como webpack não pode ser encontrado, então vinculei Webpack usando o comando link.
Na saída Resolvendo alguns problemas de caminho absoluto.

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

Basta mudar de "carregadores" para "regras" em "webpack.config.js"

Porque os carregadores são usados ​​no Webpack 1 e as regras no Webpack2. Você pode ver que há diferenças .

Resolvi esse problema removendo a string vazia de minha matriz de resolução. Verifique a documentação de resolução no site do webpack .

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

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

Experimente os passos abaixo:

npm uninstall webpack --save-dev

Seguido por

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

Então você deve ser capaz de engolir novamente. Corrigido o problema para mim.

Para pessoas como eu, que começaram recentemente: A loaderspalavra-chave foi substituída por rules; embora ainda represente o conceito de carregadores. Portanto webpack.config.js, para um aplicativo React, é o seguinte:

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;

Acho que sua versão do webpack é 2.2.1. Acho que você deveria usar este Guia de migração -> https://webpack.js.org/guides/migrating/

Além disso, você pode usar este exemplo de TypeSCript + Webpack 2 .

Em webpack.config.js substitua os carregadores: [..] por regras: [..] Funcionou para mim.

O arquivo de configuração do Webpack mudou ao longo dos anos (provavelmente com cada versão principal). A resposta à pergunta:

Por que recebo este erro

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

é porque o arquivo de configuração não corresponde à versão do webpack que está sendo usado.

A resposta aceita não afirma isso e outras respostas aludem a isso, mas não afirma claramente npm install [email protected] , Basta mudar de "carregadores" para "regras" em "webpack.config.js " , e isso . Portanto, decido dar minha resposta a essa pergunta.

Desinstalar e reinstalar o webpack ou usar a versão global do webpack não resolverá esse problema. Usar a versão correta do webpack para o arquivo de configuração que está sendo usado é o que é importante.

Se este problema foi corrigido ao usar uma versão global, provavelmente significa que sua versão global era "antiga" e o formato de arquivo webpack.config.js que você está usando é "antigo", então eles correspondem e as coisas do viola agora funcionam . Eu defendo que as coisas funcionem, mas quero que os leitores saibam por que funcionaram.

Sempre que você obtiver uma configuração de webpack que espera que resolva seu problema ... pergunte-se para qual versão de webpack a configuração se destina.

Existem muitos recursos bons para aprender webpack. Alguns são:

• Site oficial do Webpack que descreve a configuração do webpack, atualmente na versão 4.x . Embora este seja um ótimo recurso para pesquisar como o webpack deve funcionar, nem sempre é o melhor para aprender como 2 ou 3 opções no webpack funcionam juntas para resolver um problema. Mas é o melhor lugar para começar porque força você a saber qual versão do webpack você está usando. :-)

• Webpack (v3?) Por Exemplo - faz uma abordagem pequena para aprender o webpack, pegando um problema e mostrando como resolvê-lo no webpack. Eu gosto dessa abordagem. Infelizmente não está ensinando webpack 4, mas ainda é bom.

• Configurando Webpack4, Babel e React do zero, revisitado - Isso é específico para React, mas é bom se você quiser aprender muitas das coisas que são necessárias para criar um aplicativo de página única react.

• Webpack (v3) - As partes confusas - Bom e cobre muito terreno. Está datado de 10 de abril de 2016 e não cobre o webpack4, mas muitos dos pontos de ensino são válidos ou úteis para aprender.

Existem muitos outros recursos bons para aprender webpack4 por exemplo, por favor, adicione comentários se você souber de outros. Esperançosamente, artigos futuros do webpack apresentarão as versões que estão sendo usadas / explicadas.

Funciona usando em rulesvez deloaders

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

Eu tive o mesmo problema e resolvi instalando a versão mais recente do npm:

npm install -g npm@latest

e então mude o webpack.config.jsarquivo para resolver

- configuration.resolve.extensions [0] não deve estar vazio.

agora resolver extensão deve ser semelhante a:

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

então corra npm start.

Este erro geralmente ocorre quando você tem uma versão conflitante (angular js). Portanto, o webpack não pôde iniciar o aplicativo. Você pode simplesmente corrigi-lo removendo o pacote da web e reinstalando-o.

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

Reinicie seu aplicativo e tudo ficará bem.

Espero poder ajudar alguém. Felicidades

Recebi a mesma mensagem de erro ao apresentar o webpack a um projeto que criei com o 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!

Comecei de novo usando fio que resolveu o problema para mim:

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

Achei o seguinte link útil: Configurar um ambiente React usando webpack e Babel

Eu mudei Carregadores de regras no webpack.config.jsarquivo e atualizou os pacotes html-webpack-plugin, webpack, webpack-cli, webpack-dev-serverpara a versão mais recente, em seguida, ele trabalhou para mim!

Eu tive o mesmo problema e resolvi isso fazendo algumas alterações no meu arquivo web.config.js. Para sua informação, estou usando a versão mais recente do webpack e do webpack-cli. Este truque salvou meu dia. Anexei o exemplo do meu arquivo web.config.js antes e depois da versão.

Antes:

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

Depois: Acabei de substituir os carregadores por regras no objeto do módulo, como você pode ver no meu trecho 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/ }
        ]
    }
}

Esperançosamente, isso ajudará alguém a se livrar desse problema.

Este erro ocorre quando uso path.resolve () para definir as configurações de 'entrada' e 'saída'. entry: path.resolve(__dirname + '/app.jsx'). Apenas tenteentry: __dirname + '/app.jsx'

No meu caso o problema era o nome da pasta onde estava o projeto, que tinha o sinal "!" Tudo que fiz foi renomear a pasta e tudo estava pronto.

Eu tive o mesmo problema e, no meu caso, tudo o que tive que fazer foi o bom e velho

leia a mensagem de erro ...

Minha mensagem de erro disse:

Objeto de configuração inválido. Webpack foi inicializado usando um objeto de configuração que não corresponde ao esquema API. - configuration.entry deve ser um destes: function | objeto {: string não vazia | [string não vazia]} | string não vazia | [string não vazia] -> O (s) ponto (s) de entrada da compilação. Detalhes: * configuration.entry deve ser uma instância de função -> Uma Função que retorna um objeto de entrada, uma string de entrada, uma matriz de entrada ou uma promessa para essas coisas. * configuration.entry ['styles'] deve ser uma string. -> A string é resolvida para um módulo que é carregado na inicialização. *configuration.entry ['styles'] não deve conter o item 'C: \ MojiFajlovi \ Faks \ 11Master \ 1Semestar \ UDD-UpravljanjeDigitalnimDokumentima \ Projekat \ nc-front \ node_modules \ bootstrap \ dist \ css \ bootstrap.min.css' duas vezes .

Como dizia a linha da mensagem de erro em negrito, acabei de abrir o angular.jsonarquivo e descobri stylesque se parecia com isto:

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

... então acabei de remover a linha marcada ...

e tudo correu bem. :)

Eu tenho o mesmo erro que você.

npm uninstall webpack --save-dev

E

npm install [email protected] --save-dev

resolva isso !.

Eu tinha a versão 3 do webpack, então instalei a versão 2.11.5 do webpack-dev-server de acordo com a página https://www.npmjs.com/package/webpack-dev-server "Versões" atual . E então o problema desapareceu.

Usar sintaxe diferente (sinalizadores ...), pode causar esse problema de versão para outra no webpack (3,4,5 ...), você deve ler a nova configuração do webpack atualizada e com recursos obsoletos.

Para mim eu tive que mudar:

cheap-module-eval-source-map

para:

eval-cheap-module-source-map

Uma nuance de v4 a v5 .