Validation Error in config after upgrading Next JS to v12

I have a simple Next.js app that was previously using v10. Today I upgraded Next.js to v12 and when I tried to run my app again I got this error:

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

And then it says things like:

 - configuration[0].module.rules[5] should be one of these: ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]

and

configuration[0].module.rules[5].loader should be a non-empty string.

Here are the contents of my next.config.js file:

const withTM = require("next-transpile-modules")(["@front-end/shared"]);
const path = require('path');

module.exports=withTM({
 sassOptions: {
     includePaths:[path.join(__dirname, '../shared/styles')]
 },
 env: {
     ENV: 'dev'
 },
});

How do I fix this? Thanks!