Decorators unrecognised using latest react-native

[edenhikri]

React native version

react-native --v

react-native-cli: 2.0.1
react-native: 0.76.3

DB structure

db/
├── index.js
├── schemas/
│   └── index.js
└── models/
    └── Form.js

// db/index.js
import { Database } from '@nozbe/watermelondb';
import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite';

import { schemas } from './schemas';
import Form from './models/Form';

const adapter = new SQLiteAdapter({
  schema: schemas,
});

const database = new Database({
  adapter,
  modelClasses: [Form],
  actionsEnabled: true
});

export default database

// db/schemas/index.js
import { appSchema, tableSchema } from '@nozbe/watermelondb';

export const schemas = appSchema({
  version: 2,
  tables: [
    tableSchema({
      name: 'forms',
      columns: [
        { name: 'job_id', type: 'string' },
        { name: 'type', type: 'string' },
        { name: 'data', type: 'string' },
        { name: 'created_at', type: 'number' },
        { name: 'updated_at', type: 'number' }
      ],
    }),
  ],
});

// db/models/Form.js
import { Model } from '@nozbe/watermelondb';
import { field, date, json, lazy } from '@nozbe/watermelondb/decorators';

export default class Form extends Model {
  static table = 'forms';

  @field('job_id') job_id;
  @field('type') type;
  @json('data', (sanitizedData) => sanitizedData) data;
  @date('created_at') created_at;
  @date('updated_at') updated_at;
}

Steps to reproduce:

npx @react-native-community/cli@latest init MelonTest
cd MelonTest
npm i && cd ios && pod install && cd ..
npm install @nozbe/watermelondb
npm install -D @babel/plugin-proposal-decorators

I then edited my babel.config.js file to look like this:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }]
  ]
};

Then I added this to my ios/Podfile: pod 'simdjson', path: '../node_modules/@nozbe/simdjson', modular_headers: true:

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'MelonTest' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'MelonTestTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )
  end
  pod 'simdjson', path: '../node_modules/@nozbe/simdjson', modular_headers: true
end

cd ios && pod install && cd ..
npm start --reset-cache --verbose
npm run ios -- --simulator="iPhone 15 Pro"

Error:

SyntaxError in src/db/models/Form.js: unrecognized character '@'

[edenhikri]

This was fixed by simply adding this to my metro.config.js as per this.

const config = {
    transformer: {
        hermesParser: false,
    },
};