{"id":436,"hash":"17561fafb2b8e6ab1bc9576293123ab5037c35c4425515231e9ea82d1b35c2a7","pattern":"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema","full_message":"I have this simple helloworld react app created from an online course, however I get this error:\n\nInvalid configuration object. Webpack has been initialised using a\nconfiguration object that does not match the API schema.\n - configuration has an unknown property 'postcss'. These properties are valid:    object { amd?, bail?, cache?, context?, dependencies?,\ndevServer?, devtool?, entry, externals?, loader?, module?, name?,\nnode?, output?, performance?, plugins?, profile?, recordsInputPath?,\nrecordsO utputPath?, recordsPath?, resolve?, resolveLoader?, stats?,\ntarget?, watch?, watchOptions? }    For typos: please correct them.   \nFor loader options: webpack 2 no longer allows custom properties in\nconfiguration.\n     Loaders should be updated to allow passing options via loader options in module.rules.\n     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:\n     plugins: [\n       new webpack.LoaderOptionsPlugin({\n         // test: /\\.xxx$/, // may apply this only for some modules\n         options: {\n           postcss: ...\n         }\n       })\n     ]\n - configuration.resolve has an unknown property 'root'. These properties are valid:    object { alias?, aliasFields?,\ncachePredicate?, descriptionFiles?, enforceExtension?,\nenforceModuleExtension?, extensions?, fileSystem?, mainFields?,\nmainFiles?, moduleExtensions?, modules?, plugins ?, resolver?,\nsymlinks?, unsafeCache?, useSyncFileSystemCalls? }\n - configuration.resolve.extensions[0] should not be empty.\n\nMy webpack file is:\n\n// work with all paths in a cross-platform manner\nconst path = require('path');\n\n// plugins covered below\nconst { ProvidePlugin } = require('webpack');\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\n// configure source and distribution folder paths\nconst srcFolder = 'src';\nconst distFolder = 'dist';\n\n// merge the common configuration with the environment specific configuration\nmodule.exports = {\n\n    // entry point for application\n    entry: {\n        'app': path.join(__dirname, srcFolder, 'ts', 'app.tsx')\n    },\n\n    // allows us to require modules using\n    // import { someExport } from './my-module';\n    // instead of\n    // import { someExport } from './my-module.ts';\n    // with the extensions in the list, the extension can be omitted from the \n    // import from path\n    resolve: {\n        // order matters, resolves left to right\n        extensions: ['', '.js', '.ts', '.tsx', '.json'],\n        // root is an absolute path to the folder containing our application \n        // modules\n        root: path.join(__dirname, srcFolder, 'ts')\n    },\n\n    module: {\n        loaders: [\n            // process all TypeScript files (ts and tsx) through the TypeScript \n            // preprocessor\n            { test: /\\.tsx?$/,loader: 'ts-loader' },\n            // processes JSON files, useful for config files and mock data\n            { test: /\\.json$/, loader: 'json' },\n            // transpiles global SCSS stylesheets\n            // loader order is executed right to left\n            {\n                test: /\\.scss$/,\n                exclude: [path.join(__dirname, srcFolder, 'ts')],\n                loaders: ['style', 'css', 'postcss', 'sass']\n            },\n            // process Bootstrap SCSS files\n            {\n                test: /\\.scss$/,\n                exclude: [path.join(__dirname, srcFolder, 'scss')],\n                loaders: ['raw', 'sass']\n            }\n        ]\n    },\n\n    // configuration for the postcss loader which modifies CSS after\n    // processing\n    // autoprefixer plugin for postcss adds vendor specific prefixing for\n    // non-standard or experimental css properties\n    postcss: [ require('autoprefixer') ],\n\n    plugins: [\n        // provides Promise and fetch API for browsers which do not support\n        // them\n        new ProvidePlugin({\n            'Promise': 'es6-promise',\n            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'\n        }),\n        // copies image files directly when they are changed\n        new CopyWebpackPlugin([{\n            from: path.join(srcFolder, 'images'),\n            to: path.join('..', 'images')\n        }]),\n        // copies the index.html file, and injects a reference to the output JS \n        // file, app.js\n        new HtmlWebpackPlugin({\n            template: path.join(__dirname, srcFolder, 'index.html'),\n            filename:  path.join('..', 'index.html'),\n            inject: 'body',\n        })\n    ],\n\n    // output file settings\n    // path points to web server content folder where the web server will serve \n    // the files from file name is the name of the files, where [name] is the \n    // name of each entry point \n    output: {\n        path: path.join(__dirname, distFolder, 'js'),\n        filename: '[name].js',\n        publicPath: '/js'\n    },\n\n    // use full source maps\n    // this specific setting value is required to set breakpoints in they\n    // TypeScript source in the web browser for development other source map\n    devtool: 'source-map',\n\n    // use the webpack dev server to serve up the web application\n    devServer: {\n        // files are served from this folder\n        contentBase: 'dist',\n        // support HTML5 History API for react router\n        historyApiFallback: true,\n        // listen to port 5000, change this to another port if another server \n        // is already listening on this port\n        port: 5000,\n        // proxy requests to the JSON server REST service\n        proxy: {\n            '/widgets': {\n                // server to proxy\n                target: 'http://0.0.0.0:3010'\n            }\n        }\n    }\n\n};","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"I don't exactly know what causes that, but I solve it this way.\n\nReinstall whole project but remember that webpack-dev-server must be globally installed. \nI walk through some server errors like webpack cant be found, so I linked Webpack using link command. \nIn output Resolving some absolute path issues. \n\nIn devServer object: inline: false\n\nwebpack.config.js\n\nmodule.exports = {\n    entry: \"./src/js/main.js\",\n    output: {\n        path:__dirname+ '/dist/',\n        filename: \"bundle.js\",\n        publicPath: '/'\n    },\n    devServer: {\n        inline: false,\n        contentBase: \"./dist\",\n    },\n    module: {\n        loaders: [\n            {\n                test: /\\.jsx?$/,\n                exclude:/(node_modules|bower_components)/,\n                loader: 'babel-loader',\n                query: {\n                    presets: ['es2015', 'react']\n                }\n            }\n        ]\n    }\n\n};\n\npackage.json\n\n{\n  \"name\": \"react-flux-architecture-es6\",\n  \"version\": \"1.0.0\",\n  \"description\": \"egghead\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"start\": \"webpack-dev-server\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/cichy/react-flux-architecture-es6.git\"\n  },\n  \"keywords\": [\n    \"React\",\n    \"flux\"\n  ],\n  \"author\": \"Jarosław Cichoń\",\n  \"license\": \"ISC\",\n  \"bugs\": {\n    \"url\": \"https://github.com/cichy/react-flux-architecture-es6/issues\"\n  },\n  \"homepage\": \"https://github.com/cichy/react-flux-architecture-es6#readme\",\n  \"dependencies\": {\n    \"flux\": \"^3.1.2\",\n    \"react\": \"^15.4.2\",\n    \"react-dom\": \"^15.4.2\",\n    \"react-router\": \"^3.0.2\"\n  },\n  \"devDependencies\": {\n    \"babel-core\": \"^6.22.1\",\n    \"babel-loader\": \"^6.2.10\",\n    \"babel-preset-es2015\": \"^6.22.0\",\n    \"babel-preset-react\": \"^6.22.0\"\n  }\n}","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/42060243/invalid-configuration-object-webpack-has-been-initialised-using-a-configuration","votes":193,"created_at":"2026-04-19T04:51:08.341599+00:00","updated_at":"2026-04-19T04:51:08.341599+00:00"}