React/Webpack - Migrate from webpack 1 to 4, Invalid configuration object

Question

There is already a post with a problem similar to mine, but its solution did not help me: Webpack error: configuration has an unknown property 'postcss'

I have the following error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'postcss'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           postcss: …
         }
       })
     ]
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
   -> Options for the resolver

My production.config.js -- https://codepen.io/anon/pen/jRpPVM

(sorry for codepen, editor cursed syntax)

My package.json -- https://jsonblob.com/75e454a8-64bf-11e9-acbe-8b4a2e832cd1

I have already tried to transfer postsss from modules to plugins, but the error has remained the same.

I honestly went through a few webpack workshops, but I still didn’t get an understanding of what I’m doing wrong in this code. I would be very grateful for any of your advice or help!

that is what the error is complaining about, try running after deleting that — Tom Berghuis, Apr 22 '19 at 05:47
Yes, you were right, it decided 1 point out of 3, thank you very much! — A.Burdonskaya, Apr 22 '19 at 05:49
It's also complaining about loaders, you will need to rewrite your config — Tom Berghuis, Apr 22 '19 at 05:49
the third problem was solved by renaming "modulesDirectories" to "modules", ty Tom, сan you write an answer so I can vote for it? :) — A.Burdonskaya, Apr 22 '19 at 05:52

score 1 · Accepted Answer · answered Apr 22 '19 at 06:09

The first problem was solved by remove postcss declaration in default.config

The second problem was solved by this post: configuration.module has an unknown property 'loaders'

The third problem was solved by renaming "modulesDirectories" to "modules" in default.config

React/Webpack - Migrate from webpack 1 to 4, Invalid configuration object

1 Answers1