Bug Report: Issue with Webpack, Vue 3, and JSX

[max-preuschen]

Description

I'm using Webpack 5 with Vue 3 and want JSX support, but I'm getting an error during the build process. The project configuration includes the necessary dependencies (@babel/core, @vue/babel-plugin-jsx, etc.) and the Babel loader is configured with the appropriate plugin. However, the build process fails with the following error message:

ERROR in ./src/app.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-1.use!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/app.vue?vue&type=script&lang=js)
Module Error (from ./node_modules/vue-loader/dist/index.js):
[vue/compiler-sfc] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (4:10)

Steps to Reproduce

1. Set up a Webpack project with Vue 3 and JSX support.
2. Include the necessary dependencies (@babel/core, @vue/babel-plugin-jsx, etc.) in the project's package.json file.
3. Configure the Babel loader in the webpack.config.js file to enable JSX transformation.
4. Execute the build script.

Expected Behavior

The build process should successfully compile the Vue 3 project with JSX support and generate the output files without any errors.

Actual Behavior

The build process fails with the aforementioned error message related to the experimental syntax and the required parser plugin(s) for JSX.

Configuration

• Webpack version: 5.78.0
• Vue version: 3.3.2
• Babel version: 7.21.8
• Vue Loader version: 17.1.1

Additional Information

package.json

{
    "name": "vue-babel-jsx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "build": "webpack --config webpack.config.js"
    },
    "devDependencies": {
        "@babel/core": "^7.21.8",
        "@vue/babel-plugin-jsx": "^1.1.1",
        "babel-loader": "^9.1.2",
        "vue": "^3.3.2",
        "vue-loader": "^17.1.1",
        "webpack": "^5.78.0",
        "webpack-cli": "^5.1.1"
    }
}

webpack.config.js

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',  
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                plugins: ['@vue/babel-plugin-jsx']
            }
        }
      }
    ]
  },
  output: {
    filename: 'main.js'
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
    extensions: ['.vue']
  }
}

app.vue

<script>
    export default {
        render() {
            return <h1>Hello world</h1>
        }
    }
</script>

Also created a ticket here: https://github.com/vuejs/babel-plugin-jsx/issues/641

[max-preuschen]

Adding <script lang="jsx"> and changing webpack.config.to

{
      test: /\.js|.jsx$/,
      exclude: /node_modules/,
      use: {
       loader: 'babel-loader',
       options: {
        plugins: ['@vue/babel-plugin-jsx']
       }
      }
}

fixes the issue.