Babel「Support for the experimental syntax 'jsx' isn't currently enabled」の原因と直し方

npm i -D @babel/preset-react

// babel.config.json
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

$ npx babel src/App.js
SyntaxError: /tmp/tmp.dWHFTMhqmh/src/App.js: Support for the experimental syntax 'jsx' isn't currently enabled (2:10):
 
  1 | export default function App() {
> 2 |   return <div className="app">hello</div>;
    |          ^
  3 | }
  4 |
 
Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
 
If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
	npx cross-env BABEL_SHOW_CONFIG_FOR=/tmp/tmp.dWHFTMhqmh/src/App.js <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.
 
    at constructor (/tmp/tmp.dWHFTMhqmh/node_modules/@babel/parser/lib/index.js:369:19)
    at Parser.raise (/tmp/tmp.dWHFTMhqmh/node_modules/@babel/parser/lib/index.js:6622:19)
    at Parser.expectOnePlugin (/tmp/tmp.dWHFTMhqmh/node_modules/@babel/parser/lib/index.js:6656:18)
    at Parser.parseExprAtom (/tmp/tmp.dWHFTMhqmh/node_modules/@babel/parser/lib/index.js:11429:24)
    at Parser.parseExprSubscripts (/tmp/tmp.dWHFTMhqmh/node_modules/@babel/parser/lib/index.js:11107:23)
    at Parser.parseUpdate (/tmp/tmp.dWHFTMhqmh/node_modules/@babel/parser/lib/index.js:11092:21)
    at Parser.parseMaybeUnary (/tmp/tmp.dWHFTMhqmh/node_modules/@babel/parser/lib/index.js:11072:23)
    at Parser.parseMaybeUnaryOrPrivate (/tmp/tmp.dWHFTMhqmh/node_modules/@babel/parser/lib/index.js:10925:61)
    at Parser.parseExprOps (/tmp/tmp.dWHFTMhqmh/node_modules/@babel/parser/lib/index.js:10930:23)
    at Parser.parseMaybeConditional (/tmp/tmp.dWHFTMhqmh/node_modules/@babel/parser/lib/index.js:10907:23) {
  code: 'BABEL_PARSE_ERROR',
  reasonCode: 'MissingOneOfPlugins',
  loc: Position { line: 2, column: 9, index: 41 },
  pos: 41,
  syntaxPlugin: undefined,
  missingPlugin: [ 'jsx', 'flow', 'typescript' ]
}
$ echo $?
1

$ npm i -D @babel/preset-react --no-audit --no-fund
added 6 packages in 696ms

$ npx babel src/App.js
"use strict";
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = App;
function App() {
  return /*#__PURE__*/React.createElement("div", {
    className: "app"
  }, "hello");
}
$ echo $?
0

$ BABEL_SHOW_CONFIG_FOR=src/App.js npx babel src/App.js
Babel configs on "/tmp/tmp.dWHFTMhqmh/src/App.js" (ascending priority):
config /tmp/tmp.dWHFTMhqmh/babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react"
  ]
}
 
programmatic options from @babel/cli
{
  "sourceFileName": "src/App.js",
  "caller": {
    "name": "@babel/cli",
    "supportsStaticESM": false,
    "supportsDynamicImport": false,
    "supportsExportNamespaceFrom": false
  },
  "filename": "src/App.js"
}
-----End Babel configs-----
"use strict";
 
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = App;
function App() {
  return /*#__PURE__*/React.createElement("div", {
    className: "app"
  }, "hello");
}

// babel.config.json
{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    "@babel/preset-react"
  ]
}

// babel.config.json
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    ["@babel/preset-typescript", { "isTSX": true, "allExtensions": true }]
  ]
}

BABEL_SHOW_CONFIG_FOR=src/App.jsx npx babel src/App.jsx

// babel.config.json
{
  "presets": [["@babel/preset-react", { "runtime": "automatic" }]]
}