Nx.dev环境下Gatsby使用gatsby-plugin-translate-urls报JSX语法不支持错误

云原生阿岚

2026-10-3

错误根源

该报错的核心原因是gatsby-plugin-translate-urls插件包自带的wrap-page-element.js文件使用了JSX语法，但Gatsby默认的Webpack配置不会对node_modules目录下的文件做JSX转译，因此打包时无法识别该实验性语法。

解决方案

你可以任选以下方案处理：

方案1：调整Gatsby Webpack配置，将该插件加入转译范围
打开对应Gatsby应用目录下的gatsby-node.js，添加如下代码即可：

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  const config = getConfig()
  // 修改JSX转译规则，排除node_modules时放过gatsby-plugin-translate-urls
  config.module.rules.forEach(rule => {
    if (rule.test.toString().match(/js|jsx/)) {
      rule.exclude = /node_modules\/(?!(gatsby-plugin-translate-urls)\/).*/
    }
  })
  actions.replaceWebpackConfig(config)
}

注：Nx管理的项目需确保该配置写在对应Gatsby应用的专属配置文件中，而非workspace根配置。

方案2：补充Babel React转译预设
先安装依赖：
npm install @babel/preset-react --save-dev
再修改你的.babelrc配置，新增React预设：

{
    "presets": [
        "@babel/preset-react",
        [
            "babel-preset-gatsby",
            {
                "targets": {
                    "browsers": [">0.25%", "not dead"]
                }
            }
        ]
    ],
    "plugins": []
}