Nx.dev Gatsby在插件gatsby- plugin -translate-urls中抛出错误-不支持实验语法'jsx‘

Question

嗨，在盖茨比，我收到了错误

错误#98123 WEBPACK

生成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构建成功了。

Answer 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"

仔细检查命名和导入类型