TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript

Question

When trying to build my react app, I get a TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript. error. But I don't understand why, because I'm using the @babel/preset-typescript . How might I fix this error?

//craco.config.js
const path = require("path");
const CracoAlias = require("craco-alias");

module.exports = {
  webpack: {
    configure: {
      module: {
        rules: [
          {
            type: "javascript/auto",
            test: /\.mjs$/,
            include: /node_modules/,
          },
        ],
      },
    },
  },
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./src",
        tsConfigPath: "./tsconfig.path.json",
      },
    },
  ],
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
  babel: {
    presets: [
      "@babel/preset-typescript",
      "@babel/preset-react",
      "@babel/preset-env",
    ],
    plugins: [["glsl", {"loose": true}]],
  },
};

Full error statement:

TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript.
If you have already enabled that plugin (or '@babel/preset-typescript'), make sure that it runs before any plugin related to additional class features:
 - @babel/plugin-proposal-class-properties
 - @babel/plugin-proposal-private-methods
 - @babel/plugin-proposal-decorators

Here's the class in question:

declare class OrbitControlsImpl extends EventDispatcher {
  minX: number;
  maxX: number;
  object: Camera;
  domElement: HTMLElement | undefined;
  enabled: boolean;
  target: Vector3;
  minDistance: number;
  maxDistance: number;
  minZoom: number;
  maxZoom: number;
  minPolarAngle: number;
  maxPolarAngle: number;
  minAzimuthAngle: number;
  maxAzimuthAngle: number;
  enableDamping: boolean;
  dampingFactor: number;
  enableZoom: boolean;
  zoomSpeed: number;
  enableRotate: boolean;
  rotateSpeed: number;
  enablePan: boolean;
  panSpeed: number;
  screenSpacePanning: boolean;
  keyPanSpeed: number;
  autoRotate: boolean;
  autoRotateSpeed: number;
  keys: {
    LEFT: string;
    UP: string;
    RIGHT: string;
    BOTTOM: string;
  };
  mouseButtons: {
    LEFT: MOUSE;
    MIDDLE: MOUSE;
    RIGHT: MOUSE;
  };
  touches: {
    ONE: TOUCH;
    TWO: TOUCH;
  };
  target0: Vector3;
  position0: Vector3;
  zoom0: number;
  _domElementKeyEvents: any;
  getPolarAngle: () => number;
  getAzimuthalAngle: () => number;
  setPolarAngle: (x: number) => void;
  setAzimuthalAngle: (x: number) => void;
  getDistance: () => number;
  listenToKeyEvents: (domElement: HTMLElement) => void;
  saveState: () => void;
  reset: () => void;
  update: () => void;
  connect: (domElement: HTMLElement) => void;
  dispose: () => void;
  constructor(object: Camera, domElement?: HTMLElement);
}

Answer 1

I got this same error when I upgraded my React Native project to 0.64.2. To fix it, I had to change the babel.config.js file as follows:

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    ['@babel/preset-typescript', {allowDeclareFields: true}],
  ],
};

I'd guess in your craco.config.js this would map to the following (though I don't know what craco is, so just a guess based on the similarity to babel.config.js):

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

Answer 2

I got this same error and what I had to do is to add @babel/plugin-transform-typescript in the plugins array in the babel config

plugins: [
    [
      '@babel/plugin-transform-typescript',
      {
        allowDeclareFields: true,
      },
    ],
    '@babel/plugin-syntax-dynamic-import',
],

Answer 3

Unfortunately， when I use babel-loader instead of ts-loader to tranform typescript, I encountered the same thing！

I had to add @babel/plugin-transform-typescript in the plugins array in the babel config. However, my project reported a program error that doesn't exist when using ts-loader.

I'm guessing that maybe there is some error in transforming ts using babel-loader.