Repository: babel/babel (TypeScript)

Issue:
[Bug]: Class Private field throws error "Module parse failed: Private field '#key' must be declared in an enclosing class"
### 💻

- [ ] Would you like to work on a fix?

### How are you using Babel?

babel-loader (webpack)

### Input code
```javascript
class Test {
    #key = '';

    constructor() {}

    get key() {
        return this.#key;
    }
}
```

### Configuration file name

_No response_

### Configuration

"dependencies": {
        "webpack": "^5.45.1",
        "babel-loader": "^9.1.3",
        "@babel/preset-env": "^7.15.6",
        "@babel/plugin-transform-class-properties": "^7.22.5",
        "@babel/plugin-transform-private-methods": "^7.22.5",
        "@babel/plugin-transform-private-property-in-object": "^7.22.11",
}

### Current and expected behavior

1. current behavior

When build, it throws below error.
"Module parse failed: Private field '#key' must be declared in an enclosing class (13:9)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders."

2. expected behavior
As fas as I know, my code - class Test - does not have any syntax error,
cuz I already declared private field in an enclosing class.
so I suspect this might be something related to babel.

Am I missing something, or confusing here ?


### Environment

Node: v18.14.2
weback: 5.45.1
babel-loader: 9.1.3

### Possible solution

_No response_

### Additional context

I imported all those babel/preset-env and babel-plugins, included it in the babel.config.js and I updated babel-loader but it still throws error.


Hints:
Hey @gaebalgombal! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant [Slack community](https://babeljs.slack.com) that typically always has someone willing to help. You can sign-up [here](https://slack.babeljs.io/) for an invite.
What is your Babel config, webpack config, and full error stack trace?
## babel.config.js

```js
module.exports = function (api) {
    api.cache(true);

    const presets = [
        [
            '@babel/preset-env',
            {
                targets: {
                    browsers: ['Chrome > 90', 'Firefox > 90', 'Edge > 90', 'Safari > 12', 'IE 11'],
                },
                useBuiltIns: 'usage',
                corejs: 3.19,
                debug: false,
            },
        ],
    ];

    const plugins = [
'@babel/plugin-transform-class-properties',
'@babel/plugin-transform-private-methods',
'@babel/plugin-transform-private-property-in-object'
// and other unrelated plugins
];

    return {
        presets,
        plugins,
    };
};

```

## webpack.config.js
```js
module.exports = () => {
    const preset = {
        entry: ['./src/main.js'],
        output: {
            path: path.resolve(__dirname, './dist'),
            publicPath: '/dist/',
            filename: 'build.js',
        },
        stats: {
            errorDetails: true,
            children: true,
        },
        target: ['web', 'es5'],
        plugins: [
            new VueLoaderPlugin(),
            new HtmlWebpackPlugin({
                template: 'index_template.html',
                filename: 'index.html',
            }),
        ],
        module: {
            rules: [
                {
                    test: /\.?js$/,
                    exclude: {
                        and: [/node_modules/],
                        not: [
                            /swiper/,
                            /dom7/,
                            /vue-spinner/,
                            /docx/,
                            /file-saver/,
                        ],
                    },
                    loader: 'babel-loader',
                },
            ],
        },
        optimization: {
            minimize: false,
            minimizer: [
                new TerserPlugin({
                    exclude: /smarteditor2/,
                }),
            ],
            nodeEnv: processEnv,
        },
    };

    return preset;
};
```
## full error stack trace
```bash
ERROR in ./src/utils/test.js 13:9
Module parse failed: Private field '#key' must be declared in an enclosing class (13:9)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   function Test(key) {
|     (0, _classCallCheck2["default"])(this, Test);
>     this.#key = key;
|   }
|   (0, _createClass2["default"])(Test, [{
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/pages/TempTest.vue?vue&type=script&lang=js& 7:12-38
 @ ./src/pages/TempTest.vue?vue&type=script&lang=js& 1:0-168 1:184-187 1:189-354 1:189-354
 @ ./src/pages/TempTest.vue 2:0-60 3:0-55 3:0-55 9:2-8
 @ ./src/routes/index.js 197:15-41
 @ ./src/main.js 11:37-56
```

At first, I thought this has something to do with babel plugin or babel-loader version, but I updated babel versrion to 9.x, and imported babel plugin-transform-private-property-in-object, but it still isn't working.


Patch:
diff --git a/packages/babel-plugin-transform-classes/src/transformClass.ts b/packages/babel-plugin-transform-classes/src/transformClass.ts
--- a/packages/babel-plugin-transform-classes/src/transformClass.ts
+++ b/packages/babel-plugin-transform-classes/src/transformClass.ts
@@ -214,7 +214,7 @@ export default function transformClass(
     for (const path of classBodyPaths) {
       const node = path.node;
 
-      if (path.isClassProperty()) {
+      if (path.isClassProperty() || path.isClassPrivateProperty()) {
         throw path.buildCodeFrameError("Missing class properties transform.");
       }
 


Test patch:
diff --git a/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-private/input.js b/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-private/input.js
new file mode 100644
--- /dev/null
+++ b/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-private/input.js
@@ -0,0 +1,7 @@
+class Test {
+  #key = '';
+
+  method() {
+      return this.#key;
+  }
+}
diff --git a/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-private/options.json b/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-private/options.json
new file mode 100644
--- /dev/null
+++ b/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-private/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["transform-classes"],
+  "throws": "Missing class properties transform."
+}
diff --git a/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-public/input.js b/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-public/input.js
new file mode 100644
--- /dev/null
+++ b/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-public/input.js
@@ -0,0 +1,7 @@
+class Test {
+  key = '';
+
+  method() {
+      return this.key;
+  }
+}
diff --git a/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-public/options.json b/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-public/options.json
new file mode 100644
--- /dev/null
+++ b/packages/babel-plugin-transform-classes/test/fixtures/misc/missing-class-properties-transform-public/options.json
@@ -0,0 +1,4 @@
+{
+  "plugins": ["transform-classes"],
+  "throws": "Missing class properties transform."
+}