使用Create-React-App构建组件库时JSX语法支持未启用问题：是否需修改Yarn Build命令？

嘿，我帮你捋清楚这个问题：你遇到的JSX语法报错，本质是组件库ProjectA的构建流程没有把JSX转译为React能识别的JavaScript代码，而基于Create React App的ProjectB默认不会转译node_modules里的第三方代码，所以才会触发这个错误。

问题根源 #

看你ProjectA的build命令，虽然用了Babel处理TSX文件，但只加了@babel/preset-typescript和@babel/preset-env预设，完全漏掉了处理JSX的@babel/preset-react！这就导致转译后的组件代码里还留着<_TextField.default ...>这类JSX语法，ProjectB编译时自然认不出来。

另外还要注意：命令行里多次写--presets会覆盖之前的配置，正确的写法应该把多个预设合并成一个数组，避免被覆盖。

修复步骤 #

• 先安装@babel/preset-react开发依赖（如果还没装的话）：

  yarn add --dev @babel/preset-react
  

• 修改ProjectA的build命令，添加react预设并调整预设写法为数组形式：

  "build": "rm -rf dist && npx tsc && NODE_ENV=production babel src/components --out-dir dist/components --extensions '.tsx' --presets '@babel/preset-env','@babel/preset-typescript','@babel/preset-react' --ignore __tests__,__snapshots__,__mocks__,stories.js,**/*.test.tsx",
  

  如果你觉得命令行太长容易出错，也可以把Babel配置放到单独的babel.config.json文件里（更易维护）：
  在ProjectA根目录创建babel.config.json：

  {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-typescript",
      "@babel/preset-react"
    ],
    "ignore": [
      "__tests__",
      "__snapshots__",
      "__mocks__",
      "stories.js",
      "**/*.test.tsx"
    ]
  }
  

  然后简化build命令：

  "build": "rm -rf dist && npx tsc && NODE_ENV=production babel src/components --out-dir dist/components --extensions '.tsx'",
  

• 重新构建ProjectA，再回到ProjectB更新依赖并启动：

  # 切换到ProjectA目录执行构建
  yarn build
  # 切换到ProjectB目录更新依赖并启动
  yarn install
  yarn start
  

验证修复效果 #

修复前你的组件代码里还保留着JSX：

return <_TextField.default defaultValue={defaultValue} disabled={disabled} fullWidth={fullWidth} onChange={handleChange} id={id} InputProps={{
  readOnly: readOnly
}} label={label} required={required} type={type} variant={variant} />;

修复后这段代码会被转译为React能识别的createElement调用：

return _react.default.createElement(_TextField.default, {
  defaultValue: defaultValue,
  disabled: disabled,
  fullWidth: fullWidth,
  onChange: handleChange,
  id: id,
  InputProps: {
    readOnly: readOnly
  },
  label: label,
  required: required,
  type: type,
  variant: variant
});

这样ProjectB就能正常编译运行了。

内容的提问来源于stack exchange，提问作者Jamie Hutber