Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: jsxFactory设置为了h ,但是编译后的文件依然使用了React.createElement #574

Closed
NexxLuo opened this issue Dec 18, 2024 · 2 comments
Labels
🐞 bug Something isn't working

Comments

@NexxLuo
Copy link

NexxLuo commented Dec 18, 2024

Version

windows 10;
Chrome;
@rslib/core 0.1.3;

Details

  1. tsconfig.json配置如下:
{
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "jsxFactory": "h",
     "rootDir": "src",
     "isolatedModules":true,
     "declaration": true
   },
   "include": ["src"]
 }
 
  1. 项目中使用vue2以及jsx编写组件,使用pluginVue2、pluginVue2Jsx对文件进行编译,编译后的文件使用了React.createElement而不是h函数
  2. rslib.config.ts配置:
import { defineConfig } from "@rslib/core";
import { pluginSass } from "@rsbuild/plugin-sass";
import { pluginVue2 } from "@rsbuild/plugin-vue2";
import { pluginVue2Jsx } from "@rsbuild/plugin-vue2-jsx";

export default defineConfig({
  plugins: [pluginSass(),pluginVue2(),pluginVue2Jsx()],
  lib: [
    {
      source: {
        entry: {
          index: "./src/**",
        },
      },
      format: "cjs",
      bundle: false,
      autoExternal:false,
      dts: { bundle: false, distPath: "./lib", build: false, abortOnError: false },
      //dts:false
    }
  ],
  output: {
    target: "web",
    distPath: {
      root: "./lib",
    },
  }
});
  1. 源文件及编译后的文件内容如下:
    源文件:
    Image

编译后的结果:

Image

Reproduce link

https://github.com/NexxLuo/rslib-demo.git

Reproduce Steps

  1. yarn install
  2. npm run build
  3. 查看packages/packages-a/lib/ComponentA.js,文件中错误使用了React.createElement
@NexxLuo NexxLuo added the 🐞 bug Something isn't working label Dec 18, 2024
@NexxLuo
Copy link
Author

NexxLuo commented Dec 18, 2024

需要添加配置 pluginBabel({ include: /\.(?:jsx|tsx)$/, })才行,这是为什么?

@fi3ework
Copy link
Member

It's documented here https://github.com/rspack-contrib/rsbuild-plugin-vue2-jsx

Since the Vue JSX plugin relies on Babel for compilation, you need to additionally add the @rsbuild/plugin-babel.

Babel compilation will introduce extra overhead, in the example above, we use include to match .jsx and .tsx files, thereby reducing the performance cost brought by Babel.

I believe the need to manually add babel requirements is to minimize the impact scope of babel for performance reasons.

@NexxLuo NexxLuo closed this as completed Dec 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants