Decorators are not a function (it is undefined)

[ian-shakespeare]

Hey there! I'm upgrading the dependencies on an old project and ran into this error:

TypeError: decorator is not a function (it is undefined), js engine: hermes

Which occurs on all uses of the Watermelon decorators e.g.

import { Model } from "@nozbe/watermelondb";
import {
  field,
  children,
  date,
  readonly,
  action,
  lazy,
} from "@nozbe/watermelondb/decorators";

export default class MyModel extends Model {
  static table = "mymodel";
  @field("name") name;
  @readonly @date("created_at") createdAt;
  // . . .
}

I suspect it's something to do with my dependencies or babel configuration, as those are the only things that have changed since my last successful build.

// package.json
{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/native": "^11.11.0",
    "@nozbe/watermelondb": "^0.27.1",
    "@nozbe/with-observables": "^1.6.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/cli": "^11.3.9",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.16",
    "@react-spring/native": "^9.7.3",
    "axios": "^1.5.1",
    "buffer": "^6.0.3",
    "deprecated-react-native-prop-types": "^5.0.0",
    "expo": "^49.0.16",
    "expo-document-picker": "~11.5.4",
    "expo-keep-awake": "~12.3.0",
    "expo-location": "~16.1.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "libphonenumber-js": "^1.10.48",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-ble-plx": "^3.1.0",
    "react-native-config": "^1.5.1",
    "react-native-dialog-input": "^1.0.8",
    "react-native-dotenv": "^3.4.9",
    "react-native-elements": "^3.4.3",
    "react-native-file-viewer": "^2.1.5",
    "react-native-flash-message": "^0.4.2",
    "react-native-maps": "1.7.1",
    "react-native-permissions": "^3.10.1",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-share": "^9.4.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "13.9.0",
    "react-native-swipe-list-view": "^3.2.9",
    "react-native-swipeout": "^2.3.6",
    "react-native-vector-icons": "^10.0.1",
    "react-native-view-more-text": "^2.2.0",
    "rn-fetch-blob": "^0.12.0",
    "uuid": "^9.0.1",
    "validator": "^13.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@babel/plugin-proposal-decorators": "^7.23.2",
    "@babel/runtime": "^7.23.2",
    "@bam.tech/react-native-make": "^3.0.3",
    "@react-native-community/eslint-config": "^3.2.0",
    "babel-jest": "^29.7.0",
    "eslint": "^8.52.0",
    "jest": "^29.7.0",
    "metro-react-native-babel-preset": "^0.77.0",
    "patch-package": "^8.0.0",
    "react-test-renderer": "18.2.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

// babel.config.json
{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [["@babel/plugin-proposal-decorators", {"legacy": true}]]
}

Any help is appreciated, thank you!

[Sziekfried]

I have the same error, I am also working on updating an old project.

[ian-shakespeare]

I think I identified the problem. The @action decorator was used frequently throughout our code but does not appear to exist in new versions of watermelondb, so I replaced all instances of it with @writer. I also moved the <DatabaseProvider> to be within the root <View>. Hope that helps!