Error when try to use .mjs babel.config.mjs file

**I'm submitting a bug report**

**Webpack Version:**
5.74.0

**Babel Core Version**:
7.19.1

**Babel Loader Version**:
8.2.5

**Please tell us about your environment:**
OSX 10.x

**Current behavior:**
I am converting my project's config from .js to .mjs and I'm getting the following error:
Cannot change caching after evaluation has completed.

**Expected/desired behavior:**
Expect to be able to just replace .js extension with .mjs and everything to work as before (with changing imports/exports to mjs)

So my babel configuration file is now named babel.config.mjs
```
export default function(api) {

// any attempt to use anything here from api fails with the following message:
// Cannot change caching after evaluation has completed.

// return usual things
}
```
Webpack configuration is pretty standard (.js extension) but the concerning block is like this:
```
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
},
},
],
},

```

Reproduce the failure with babel.config.mjs and the shown webpack configuration using babel-loader. Start by tracing what happens when the exported config function accesses api, then compare it with the .js configuration behavior. Done means the .mjs configuration can use the same api interactions without triggering “Cannot change caching after evaluation has completed.”

Written by the indexing model from the issue text.