无效的配置对象。Webpack已使用与API模式不匹配的配置对象进行初始化。

181

我有一个简单的helloworld react应用,是从在线课程中创建的,但是我得到了以下错误:

无效的配置对象。Webpack已经初始化使用一个与API模式不匹配的配置对象。 - 配置具有未知属性“postcss”。这些属性有效:object {amd?,bail?,cache?,context?,dependencies?, devServer?,devtool?,entry,externals?,loader?,module?,name? node?,output?,performance?,plugins?,profile?,recordsInputPath? recordsOutputPath?,recordsPath?,resolve?,resolveLoader?,stats? target?,watch?,watchOptions?} 对于拼写错误:请纠正它们。
对于加载程序选项:webpack 2不再允许在配置中使用自定义属性。 应该更新装载机以允许通过module.rules中的loader选项传递选项。 直到装载程序更新为止,可以使用LoaderOptionsPlugin将这些选项传递给装载程序: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // may apply this only for some modules options: { postcss:... } }) ] - 配置.resolve具有未知属性'root'。这些属性有效:object {alias?,aliasFields? cachePredicate?,descriptionFiles?,enforceExtension? enforceModuleExtension?,extensions?,fileSystem?,mainFields? mainFiles?,moduleExtensions?,modules?,plugins? resolver?,symlinks?,unsafeCache?,useSyncFileSystemCalls?} - 配置.resolve.extensions [0]不应为空。

我的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'
            }
        }
    }

};

在我的情况下,我在我的AureliaJs应用程序中运行了一个错误的命令来运行我的单元测试,例如:"au run test"而不是"au test",所以要小心。希望能帮助到别人,节省时间。 - undefined
35个回答

1
在我的情况下,这是由于从另一个项目复制webpack.js并未更改“entry”和“output”路径以匹配新项目结构所导致的。一旦我修复了路径,一切都正常工作了。

1
检查你的 webpacker.yml 文件中的 source_path。我在一个项目中遇到了同样的错误,那里的 webpacker.yml 是从另一个项目复制过来的。它应该指向包含 packs 目录的目录。

1
如果您在将Angular版本从11升级到12并使用Single Spa后遇到此错误, 则可以为以下软件包配置“package.json”
"single-spa": "^5.9.3"
"single-spa-angular": "^5.0.2"
"@angular-builders/custom-webpack": "^12.1.3"
"webpack": "^5.70.0"
在运行npm install之后。

1
使用不同的语法(标志...)可能会导致webpack在不同版本(3,4,5...)中出现问题,您需要阅读新的webpack配置更新和弃用的功能。

1
如果你来自 single SPA 的世界,并遇到了这个错误。我意识到问题是由于提供应用程序的脚本引起的。
一个例子是这样的:
"scripts": {
    "start": "ng serve",
    "serve:single-spa:play": "ng s --project play --disable-host-check --port 4202 --deploy-url http://localhost:4202/ --live-reload false"
  },

为了使其正常工作,请将启动脚本更改为以下内容:

"scripts": {
    "start": "npm run serve:single-spa:play",
    "serve:single-spa:play": "ng s --project play --disable-host-check --port 4202 --deploy-url http://localhost:4202/ --live-reload false"
  },

1

我遇到了同样的问题,在我的情况下,我所需要做的就是读一下错误信息:

read the error message...

我的错误信息如下:

配置对象无效。Webpack已被初始化,但使用的配置对象与API模式不匹配。 - 配置项configuration.entry应该是以下中的一个: function | object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] -> 编译的入口点。 详情: * configuration.entry 应该是函数的一个实例 -> 返回一个入口对象、一个入口字符串、一个入口数组或这些东西的promise的函数。 * configuration.entry['styles'] 应该是一个字符串。 -> 这个字符串被解析为在启动时加载的模块。 * configuration.entry['styles'] 不应该包含两次 'C:\MojiFajlovi\Faks\11Master\1Semestar\UDD-UpravljanjeDigitalnimDokumentima\Projekat\ nc-front\node_modules\bootstrap\dist\css\bootstrap.min.css'。

正如粗体错误信息所说,我刚刚打开了angular.json文件,并发现styles看起来像这样:
"styles": [
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css" <-- **marked line**
    ],

……所以我只是删除了标记的那一行……

一切都进行得很顺利。:)


1

对于Expo项目

如果您正在使用Expo SDK版本45,您最多需要使用Expo CLI 6.1.0。更高版本的CLI将会抛出此错误:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.node should be one of these:
   false | object { __dirname?, __filename?, global? }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration.node has an unknown property 'module'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
    * configuration.node has an unknown property 'dgram'. These properties are valid:
      object { __dirname?, __filename?, global? }
(continues)

为了解决问题,请使用 npm install -g expo-cli@6.1.0 安装版本为 6.1.0 的 expo-cli
此外,您还可以查看 https://github.com/expo/expo-cli/issues/4639 中的其他解决方案。
另外:Expo SDK 46 不再需要全局 CLI 包。请参阅 The New Expo CLIExpo SDK 46 announcement

哇!就是这样!我还有一个过时的项目在一个旧版的Node上,我曾经升级了Expo CLI。谢谢,降级帮了大忙! - Donni

0

只需要使用以下命令安装npm:

npm install webpack

如果webpack未全局安装,则使用以下命令进行安装:

npm install webpack -g


0

我的情况可能是一个极端案例,但结果是因为我创建了一个名为Config的React组件而导致出现了这个错误消息。将其重命名为其他名称解决了问题。希望这能帮助做了同样错误的其他人。


0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接