在 Create React App 中使用 plugin-transform-react-jsx答案

【问题标题】：Using plugin-transform-react-jsx in Create React App在 Create React App 中使用 plugin-transform-react-jsx
【发布时间】：2021-01-21 14:26:23
【问题描述】：

我正在尝试在 CRA 中动态转换一些 jsx。（这些东西的新手......）

能够在https://devinschulz.com/modify-create-react-apps-babel-configuration-without-ejecting/ 之后向 CRA 添加插件

我无法“转换”JSX 代码。

特别取消注释下面的行会导致以下错误：

未知：意外令牌 (1:0)> 1 |

import React from 'react'
var core = require("@babel/core");
export default function App() {
  core.transform('2 + 2');
  // core.transform('<div></div>');
  const obj = {}
  const prop = obj.foo?.bar?.() ?? 'foo bar'
  return <div className="App">{prop}</div>
}

请注意，其他插件似乎可以正常工作，vanilla JS 也是如此。

config-overrides.js 是：

const { override, addBabelPlugins } = require('customize-cra')

module.exports = override(
  addBabelPlugins(
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-syntax-optional-chaining',
    '@babel/plugin-transform-react-jsx'
  )
)

我们将非常感谢任何帮助！

【问题讨论】：

标签： reactjs babeljs

【解决方案1】：

不要导入和调用addBabelPlugins，而是使用addExternalBabelPlugins

另外，如果您使用复数调用，Plugins 而不是Plugin，请务必分散调用

所以你的config-overrides.js 将包含：

const { override, addExternalBabelPlugins } = require('customize-cra')

module.exports = override(
  ...addExternalBabelPlugins(
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-syntax-optional-chaining',
    '@babel/plugin-transform-react-jsx'
  )
)

【讨论】：