Nx.dev Gatsby throws error in plugin gatsby-plugin-translate-urls - Support for the experimental syntax 'jsx' isn't

Question

Hi in Gatsby I am getting error

ERROR #98123 WEBPACK

Generating JavaScript bundles failed

/project/node_modules/gatsby-plugin-translate-url s/utils/wrap-page-element.js: Support for the experimental syntax 'jsx' isn't currently enabled (11:5):

We are using Nx.dev so we created template for Gatsby and there added our Gatsby project.

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": []
}

I really don't know where is the problem. When I comment plugin gatsby-plugin-translate-urls build succeeded.

Ferran Buireu · Answer 1 · 2021-09-15T11:07:07.773

According to: Support for the experimental syntax 'jsx' isn't currently enabled

I would recommend you to change your .babelrc config to the following and give it a new try:

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

Also, according to https://github.com/gatsbyjs/gatsby/issues/26605 supports the theory that gatsby-plugin-translate-urls messes all up because the usage of its internal Link

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

Double-check the naming and the import type

Nx.dev Gatsby throws error in plugin gatsby-plugin-translate-urls - Support for the experimental syntax 'jsx' isn't

1 Answers1