Nieprawidłowy obiekt konfiguracyjny. Pakiet Webpack został zainicjowany przy użyciu obiektu konfiguracyjnego, który nie pasuje do schematu interfejsu API

Mam tę prostą aplikację HelloWorld React utworzoną z kursu online, ale pojawia się ten błąd:

Nieprawidłowy obiekt konfiguracyjny. Pakiet Webpack został zainicjowany przy użyciu obiektu konfiguracyjnego, który nie pasuje do schematu interfejsu API. - konfiguracja ma nieznaną właściwość „postcss”. Te właściwości są poprawne: obiekt {amd ?, kaucja ?, pamięć podręczna ?, kontekst ?, zależności ?, devServer ?, devtool ?, pozycja, zewnętrzne ?, program ładujący ?, moduł ?, nazwa ?, węzeł ?, wyjście ?, wydajność? , plugins ?, profile ?, recordsInputPath ?, recordsO utputPath ?, recordsPath ?, solution ?, solutionLoader ?, stats ?, target ?, watch ?, watchOptions? } W przypadku literówek: popraw je.
W przypadku opcji modułu ładującego: pakiet webpack 2 nie umożliwia już niestandardowych właściwości w konfiguracji. Programy ładujące powinny zostać zaktualizowane, aby umożliwić przekazywanie opcji przez opcje modułu ładującego w module.rules. Dopóki programy ładujące nie zostaną zaktualizowane, można użyć LoaderOptionsPlugin, aby przekazać te opcje do modułu ładującego: plugins: [new webpack.LoaderOptionsPlugin ({// test: /.xxx$/, // może zastosować to tylko do niektórych opcji modułów: {postcss: ...}})] - configuration.resolve ma nieznaną właściwość „root”. Te właściwości są prawidłowe: object {alias ?, aliasFields ?, cachePredicate ?, descriptionFiles ?, egzekwowanieExtension ?, egzekwowanieModuleExtension ?, rozszerzenia ?, fileSystem ?, mainFields ?, mainFiles ?, moduleExtensions ?, modules ?, plugins?, Resolver ?, symlinks ?, unsafeCache ?, useSyncFileSystemCalls? } - configuration.resolve.extensions [0] nie powinien być pusty.

Mój plik pakietu internetowego to:

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

};

Nie wiem dokładnie, co to powoduje, ale rozwiązuję to w ten sposób.
Zainstaluj ponownie cały projekt, ale pamiętaj, że serwer webpack-dev-server musi być zainstalowany globalnie.
Przechodzę przez niektóre błędy serwera, na przykład nie można znaleźć pakietu webpack, więc połączyłem go za pomocą polecenia link.
Na wyjściu Rozwiązywanie niektórych problemów ze ścieżką bezwzględną.

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

Po prostu zmień „programy ładujące” na „reguły” w „webpack.config.js”

Ponieważ programy ładujące są używane w Webpack 1, a reguły w Webpack2. Widać różnice .

Rozwiązałem ten problem, usuwając pusty ciąg z mojej tablicy rozwiązywania. Zapoznaj się z dokumentacją rozwiązania w witrynie pakietu internetowego .

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

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

Wypróbuj poniższe kroki:

npm uninstall webpack --save-dev

śledzony przez

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

Wtedy powinieneś znowu móc przełknąć. Naprawiono problem dla mnie.

Dla ludzi takich jak ja, którzy rozpoczęli niedawno: The loaderssłowo kluczowe jest zastąpiony z rules; mimo że nadal reprezentuje koncepcję ładowarek. Więc my webpack.config.js, dla aplikacji React, wygląda następująco:

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;

Domyślam się, że Twoja wersja webpacka to 2.2.1. Myślę, że powinieneś skorzystać z tego przewodnika po migracji -> https://webpack.js.org/guides/migrating/

Możesz również użyć tego przykładu TypeSCript + Webpack 2 .

W webpack.config.js zamień programy ładujące: [..] na reguły: [..] U mnie zadziałało.

Działa ruleszamiastloaders

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

Plik konfiguracyjny pakietu Webpack zmieniał się na przestrzeni lat (prawdopodobnie z każdym głównym wydaniem). Odpowiedź na pytanie:

Dlaczego otrzymuję ten błąd

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

jest to spowodowane tym, że plik konfiguracyjny nie jest zgodny z wersją używanego pakietu internetowego.

Zaakceptowana odpowiedź nie określa tego ani innych odpowiedzi, ale nie stwierdza tego jasno npm install [email protected] , Po prostu zmień z " loaders " na "rules" w "webpack.config.js" ” i to . Postanawiam więc udzielić odpowiedzi na to pytanie.

Odinstalowanie i ponowna instalacja webpacka lub użycie globalnej wersji webpacka nie rozwiąże tego problemu. Ważne jest użycie odpowiedniej wersji pakietu webpacka dla używanego pliku konfiguracyjnego.

Jeśli ten problem został rozwiązany podczas korzystania z wersji globalnej, prawdopodobnie oznacza to, że Twoja wersja globalna była „stara”, a format pliku webpack.config.js, którego używasz, jest „stary”, więc są one zgodne i teraz działają . Jestem za rzeczami, które działają, ale chcę, aby czytelnicy wiedzieli, dlaczego zadziałały.

Ilekroć otrzymasz konfigurację pakietu internetowego, która, jak masz nadzieję, rozwiąże Twój problem ... zadaj sobie pytanie, do jakiej wersji pakietu internetowego jest przeznaczona ta konfiguracja.

Istnieje wiele dobrych zasobów do nauki webpacka. Niektóre są:

• Oficjalna strona WebPACK opisujące konfigurację WebPACK, obecnie w wersji 4.x . Chociaż jest to świetne źródło informacji o tym, jak powinien działać pakiet WebPack, nie zawsze jest najlepszym sposobem na poznanie, jak 2 lub 3 opcje w pakiecie internetowym współpracują ze sobą, aby rozwiązać problem. Ale jest to najlepsze miejsce na rozpoczęcie, ponieważ zmusza Cię do zorientowania się, jakiej wersji pakietu webpack używasz. :-)

• Webpack (v3?) By Example - zajmuje mało miejsca w nauce webpacka, wybiera problem, a następnie pokazuje, jak go rozwiązać w webpacku. Podoba mi się to podejście. Niestety nie uczy webpacka 4, ale nadal jest dobry.

• Konfigurowanie Webpack4, Babel i React od podstaw, ponownie odwiedzone - jest to specyficzne dla React, ale dobre, jeśli chcesz nauczyć się wielu rzeczy, które są wymagane do stworzenia aplikacji jednostronicowej React.

• Webpack (v3) - The Confusing Parts - Dobry i obejmuje wiele obszarów. Jest datowany na 10 kwietnia 2016 r. I nie obejmuje pakietu webpack4, ale wiele punktów nauczania jest ważnych lub przydatnych do nauczenia.

Jest o wiele więcej dobrych zasobów do nauki webpacka4 na przykład, dodaj komentarze, jeśli znasz innych. Miejmy nadzieję, że w przyszłych artykułach z pakietu webpack będą podane wersje, które są używane / wyjaśniane.

Miałem ten sam problem i rozwiązałem go instalując najnowszą wersję npm:

npm install -g npm@latest

a następnie zmień webpack.config.jsplik do rozwiązania

- configuration.resolve.extensions [0] nie powinien być pusty.

teraz rozwiń rozszerzenie powinno wyglądać następująco:

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

następnie biegnij npm start.

Ten błąd zwykle występuje, gdy masz sprzeczną wersję (angular js). Dlatego pakiet internetowy nie mógł uruchomić aplikacji. Możesz go po prostu naprawić, usuwając pakiet sieciowy i ponownie go instalując.

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

Uruchom ponownie aplikację i wszystko jest w porządku.

Mam nadzieję, że jestem w stanie komuś pomóc. Twoje zdrowie

Otrzymałem ten sam komunikat o błędzie podczas wprowadzania webpacka do projektu, który utworzyłem za pomocą 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!

Zacząłem od przędzy, która rozwiązała problem:

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

Poniższe łącze okazało się pomocne: Skonfiguruj środowisko reakcji za pomocą pakietu webpack i Babel

Zmieniłem ładowarki do reguł w webpack.config.jspliku i zaktualizowane pakiety html-webpack-plugin, webpack, webpack-cli, webpack-dev-serverdo najnowszej wersji, następnie pracował dla mnie!

Miałem ten sam problem i rozwiązałem go, wprowadzając pewne zmiany w moim pliku web.config.js. FYI Używam najnowszej wersji webpacka i webpack-cli. Ta sztuczka uratowała mi dzień. Załączam przykład mojego pliku web.config.js przed i po wersji.

Przed:

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

Po: Właśnie zamieniłem programy ładujące na reguły w obiekcie modułu, jak widać w moim fragmencie kodu.

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

Miejmy nadzieję, że pomoże to komuś pozbyć się tego problemu.

Ten błąd pojawia się, gdy używam path.resolve (), aby skonfigurować ustawienia „wejścia” i „wyjścia”. entry: path.resolve(__dirname + '/app.jsx'). Spróbujentry: __dirname + '/app.jsx'

W moim przypadku problemem była nazwa folderu, w którym zawarty był projekt, który miał znak "!" Wszystko, co zrobiłem, to zmienić nazwę folderu i wszystko było gotowe.

Miałem ten sam problem, aw moim przypadku wszystko, co musiałem zrobić, to stary dobry

przeczytaj komunikat o błędzie ...

Mój komunikat o błędzie brzmiał:

Nieprawidłowy obiekt konfiguracyjny. Pakiet Webpack został zainicjowany przy użyciu obiektu konfiguracyjnego, który nie pasuje do schematu interfejsu API. - configuration.entry powinien być jednym z następujących: function | obiekt {: niepusty ciąg | [niepusty ciąg]} | niepusty ciąg | [niepusty ciąg] -> Punkt (y) wejścia kompilacji. Szczegóły: * configuration.entry powinien być instancją funkcji -> Funkcja zwracająca obiekt wejściowy, ciąg wejściowy, tablicę wpisów lub obietnicę dotyczącą tych rzeczy. * configuration.entry ['styles'] powinien być ciągiem. -> Ciąg jest tłumaczony na moduł, który jest ładowany podczas uruchamiania. *configuration.entry ['styles'] nie powinien zawierać elementu „C: \ MojiFajlovi \ Faks \ 11Master \ 1Semestar \ UDD-UpravljanjeDigitalnimDokumentima \ Projekat \ nc-front \ node_modules \ bootstrap \ dist \ css \ bootstrap.min.css” dwukrotnie .

Jak powiedział pogrubiony komunikat o błędzie, właśnie otworzyłem angular.jsonplik i okazało się, że styleswygląda następująco:

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

... więc właśnie usunąłem zaznaczoną linię ...

i wszystko poszło dobrze. :)

Mam ten sam błąd co ty.

npm odinstaluj pakiet webpack --save-dev

&

npm install [email protected] --save-dev

rozwiązać!.

Miałem pakiet webpack w wersji 3, więc zainstalowałem webpack-dev-server w wersji 2.11.5 zgodnie z aktualną stroną https://www.npmjs.com/package/webpack-dev-server "Wersje". A potem problem zniknął.