Invalid webpack configuration object error on build

I’m following the create-react-app example. My code can be found here (incase you’d like to reference it directly). When I run the start script, everything works as expected. When I run my build script, however, I get the following:

$ react-app-rewired build
Creating an optimized production build...
Failed to compile.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[1].oneOf[0].use should be one of these:
   non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }]
   Details:
    * configuration.module.rules[1].oneOf[0].use should be a string.
    * configuration.module.rules[1].oneOf[0].use should be an instance of function.
    * configuration.module.rules[1].oneOf[0].use should be an object.
    * configuration.module.rules[1].oneOf[0].use should be one of these:
      non-empty string | function | object { loader?, options?, query? }
    * configuration.module.rules[1].oneOf[0].use should be an instance of function.
    * configuration.module.rules[1].oneOf[0].use[0] should be a string.
    * configuration.module.rules[1].oneOf[0].use[0] should be an instance of function.
    * configuration.module.rules[1].oneOf[0].use[0] has an unknown property 'include'. These properties are valid:
      object { loader?, options?, query? }
    * configuration.module.rules[1].oneOf[0].use[0] should be one of these:
      non-empty string | function | object { loader?, options?, query? }


error Command failed with exit code 1.

Any suggestions on how to fix the build process? Thank you!!! Please let me know if you have any questions.

Kind regards,

Harry

[harrysolovay]

You’re completely right! I was improperly configuring the use of a .babelrc. Thank you!

[silvenon]

Our example doesn’t have invalid webpack configuration. It fails on build though (whoops) because of @rebass/markdown, but that’s a different story.

So I don’t think MDX is really a problem in your case, it’s just one of the variables in your configuration. You need to retrace your steps, carefully study how to properly override CRA and learn to read webpack’s configuration errors because they are very helpful. Remove piece by piece until you pinpoint the location of the error, and if you’re still stuck find out if there’s a CRA support channel where you can ask for help.

I’ve never really used CRA, so it would probably take me a long time to find out what the solution to your problem is.