typescript classes not supported with default example app

[dirkpostma]

Description

Typescript classes in the library are not handled correctly in example app. Regular functions and React components work without problems.

However, when I have this class in library ./src/index.ts:

export class MyClass {
  constructor() {
    console.log("Hello from MyClass constructor!");
  }

  multiply(a: number, b: number): number {
    return a * b;
  }
}

And I run the example app, I get error:

ERROR  TypeError: Cannot read property 'MyClass' of undefined

This error is located at:
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in MyAppExample(RootComponent), js engine: hermes

Workaround

I was able to workaround by changing the babel.config.js in example app to this:

const path = require('path');
const pak = require('../package.json');

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          [pak.name]: path.join(__dirname, '..', pak.source),
        },
      },
    ],
  ],
};

I think typescript classes should work out of the box after default install of create-react-native-library.

I think this can be accomplished by updating react-native-builder-bob/babel-config.js.

Packages

• [X] create-react-native-library
• [X] react-native-builder-bob

Selected options

✔ What is the name of the npm package? … react-native-library-with-class
✔ What is the description for the package? … test library with class
✔ What is the name of package author? … Dirk Postma
✔ What is the email address for the package author? … dirkpostma@gmail.com
✔ What is the URL for the package author? … https://github.com/dirkpostma
✔ What is the URL for the repository? … https://github.com/dirkpostma/react-native-library-with-class
✔ What type of library do you want to develop? › Native module
✔ Which languages do you want to use? › Kotlin & Swift
✔ What type of example app do you want to create? › Vanilla

Link to repro

https://github.com/dirkpostma/react-native-library-with-class

Environment

  OS: macOS 14.5
  CPU: (8) arm64 Apple M1 Pro
  Memory: 368.53 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.2
    path: ~/.nvm/versions/node/v18.18.2/bin/node
  Yarn:
    version: 3.6.1
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v18.18.2/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/dirkpostma/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "28"
      - "30"
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 28.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-30 | Google Play ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.2 AI-222.4459.24.2221.10121639
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/dirkpostma/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

[satya164]

I think we may need to tweak our default targets for browserlist so that classes are transformed: https://github.com/callstack/react-native-builder-bob/blob/cc30f7f041869cf0d66e826e02b377363a9af55c/packages/react-native-builder-bob/babel-preset.js#L19

[satya164]

Can you try the babel preset from here and let me know if it works?

https://github.com/callstack/react-native-builder-bob/pull/606

[dirkpostma]

@satya164 I can confirm #606 fixes the issue.

How I tested

1. I added the following dependencies to the example app:

@babel/plugin-transform-class-properties
@babel/plugin-transform-classes
@babel/plugin-transform-private-methods
@babel/plugin-transform-private-property-in-object

2. I applied changes made here to /example/node_modules/react-native-builder-bob/babel-preset.js

3. re-run the example app, having class MyClass

Result Example app runs without issues.