javascript - Babel Automatic Runtime für React funktioniert nicht richtig. Immer noch bekomme ich Uncaught ReferenceError: React is not defined

Laut neuen Versionen von React sollten wir nicht immer import React from 'react' verwenden. Aber ich habe trotzdem einen Fehler Uncaught ReferenceError: React is not defined.

.babelrc (Das Ändern der Reihenfolge der Presets hilft nicht, das Entfernen einiger Presets auch nicht)

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/env",
    "@babel/preset-typescript"
  ]
}

pakage.json

    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "typescript": "^4.6.3",
    "@babel/core": "^7.17.8",
    "@babel/node": "^7.16.8",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "babel-loader": "^8.2.4",

Antwort #1

Für jeden, der so dumm ist wie ich: Babel hat meine Babel-Konfigurationsdatei stillschweigend ignoriert, weil bereits eine Konfiguration in der package.json-Datei vorhanden war. Stellen Sie sicher, dass Sie nur eine Konfigurationsquelle haben, schätze ich.

Antwort #2

Benenne deine ".babelrc"-Datei in ".config.babel.js" um

Dann innerhalb dieser Datei:

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    ['@babel/preset-react', {runtime: 'automatic'}],
  ],
};

Die Verwendung dieses Dateiformats ermöglicht es Ihnen, Dateien, die Sie nicht transpillieren lassen möchten, mithilfe der Eigenschaft „transformIgnorePatterns“ in Ihrer „package.json“-Datei einfach zu ignorieren.

Ich persönlich benutze es mit Jest beim Testen von React-Apps, um zu verhindern, dass einige Pakete wie folgt transpiliert werden:

  "jest": {
    // [...]
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!react-bootstrap|bootstrap)"
    ]
    // [...]
  }

Hoffentlich wird es einigen Leuten helfen.