vue2 用了render函数报 React is not defined

[xiemeng]

不使用render函数就正常
import { pluginVue2 } from '@rsbuild/plugin-vue2' import { defineConfig, loadEnv } from '@rsbuild/core' import { pluginBabel } from '@rsbuild/plugin-babel' import { pluginVue2Jsx } from '@rsbuild/plugin-vue2-jsx' const { publicVars } = loadEnv({ prefixes: ['VUE_APP_'] }) const path = require('path') const isProd = process.env.NODE_ENV === 'production' const assetsCDN = { externals: { // vue: 'Vue', // 'vue-router': 'VueRouter', // vuex: 'Vuex', // axios: 'axios' }, css: [], // https://unpkg.com/browse/[email protected]/ js: [ '//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js', '//cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js', '//cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js', '//cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js', ], } function resolve(dir) { return path.join(__dirname, dir) } export default defineConfig({ plugins: [ pluginVue2(), pluginBabel({ include: /\.(?:jsx|tsx)$/, exclude: /[\\/]node_modules[\\/]/, }), pluginVue2Jsx(), ], source: { // 指定入口文件 entry: { index: './src/main.ts', }, define: publicVars, }, html: { template: './public/index.html', }, tools: { cssLoader: {}, less: { // additionalData: @import "${resolve(__dirname, 'src')}/style/var.less";`,
implementation: require('less'),
lessOptions: {
modifyVars: {
// less vars，customize ant design theme

      // 'primary-color': '#F5222D',
      // 'link-color': '#F5222D',
      'border-radius-base': '2px',
    },
    // DO NOT REMOVE THIS LINE
    javascriptEnabled: true,
  },
},
rspack: {
  resolve: { extensions: ['.ts', '.tsx', '.js', '.json'] },
  mode: !isProd ? 'development' : 'production',
  plugins: [
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
  // if prod, add externals
  externals: isProd ? assetsCDN.externals : {},
},
bundlerChain: (config) => {
  config.resolve.alias.set('@$', resolve('src'))
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
    .oneOf('inline')
    .resourceQuery(/inline/)
    .use('vue-svg-icon-loader')
    .loader('vue-svg-icon-loader')
    .end()
    .end()
    .oneOf('external')
    .use('file-loader')
    .loader('file-loader')
    .options({
      name: 'assets/[name].[hash:8].[ext]',
    })
},

},
server: {
port: 8000,
proxy: {
'/api': {
target: 'https://',
ws: true,
changeOrigin: true,
logLevel: 'debug',
pathRewrite: {
'^/api': '',
},
},
},
},
})
`

[chenjiahan]

Can you try to add lang="jsx" or lang="tsx" in your Vue SFC file?

- <script>
+ <script lang="jsx">