Nx.dev Gatsby 在插件 gatsby-plugin-translate-urls 中抛出错误 - 不支持实验性语法“jsx”答案

【问题标题】：Nx.dev Gatsby throws error in plugin gatsby-plugin-translate-urls - Support for the experimental syntax 'jsx' isn'tNx.dev Gatsby 在插件 gatsby-plugin-translate-urls 中抛出错误 - 不支持实验性语法“jsx”
【发布时间】：2021-11-10 08:03:34
【问题描述】：

嗨，盖茨比，我遇到了错误

错误 #98123 网页包

生成 JavaScript 包失败

/project/node_modules/gatsby-plugin-translate-url s/utils/wrap-page-element.js：不支持实验性语法“jsx” 当前启用 (11:5)：

我们正在使用 Nx.dev，因此我们为 Gatsby 创建了模板，并在那里添加了我们的 Gatsby 项目。

tsconfig.json

{
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
        "jsx": "preserve",
        "allowJs": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "resolveJsonModule": true,
        "isolatedModules": true
    },
    "files": [],
    "include": [],
    "references": [
        {
            "path": "./tsconfig.app.json"
        }
    ],
    "exclude": ["node_modules"]
}

.babelrc

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

我真的不知道问题出在哪里。当我评论插件gatsby-plugin-translate-urls构建成功。

【问题讨论】：

标签： reactjs gatsby gatsby-plugin nx.dev

【解决方案1】：

根据：Support for the experimental syntax 'jsx' isn't currently enabled

我建议您将 .babelrc 配置更改为以下内容并重新尝试：

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

另外，根据https://github.com/gatsbyjs/gatsby/issues/26605 支持的理论，gatsby-plugin-translate-urls 搞砸了，因为使用了它的内部Link

import {TranslatedLink} from "gatsby-plugin-translate-urls"

仔细检查命名和导入类型

【讨论】：