TypeScript config does not support dynamic imports

[TuurDutoit]

Description

@react-native/typescript-config sets "module": "es2015" (source). As the error suggests, this value does not allow using dynamic imports (import("module")). The React Native runtime does support them, however.

Steps to reproduce

1. Install deps: yarn android
2. Check types: yarn tsc
3. Notice how TS complains about the dynamic import in App.tsx

I created this from the basic Expo Snack template (SDK 51), to which I added TypeScript and a dynamic import.

React Native Version

0.74.3

Affected Platforms

Other (please specify)

Output of npx react-native info

System:
  OS: macOS 14.2.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 164.08 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.13.1
    path: ~/.local/state/fnm_multishells/59322_1722258991144/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.5.2
    path: ~/.local/state/fnm_multishells/59322_1722258991144/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.0
    path: /opt/homebrew/bin/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: Not Found
IDEs:
  Android Studio: 2022.2 AI-222.4459.24.2221.9862592
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: ^18.3.1
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

App.tsx:7:43 - error TS1323: Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'es2022', 'esnext', 'commonjs', 'amd', 'system', 'umd', 'node16', or 'nodenext'.

7 const LazyAssetExample = React.lazy(() => import('./components/AssetExample'))
                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in App.tsx:7

Reproducer

https://github.com/TuurDutoit/react-native-typescript-dynamic-import

Screenshots and Videos

No response

[robhogan]

Thanks for the report @TuurDutoit - you're right, this is supported at build time and shouldn't be flagged.

I'm not a TS expert but reading the docs it looks like preserve will ultimately be the best option for us given we do our own bundling, but it's TS 5.4 only and the community template is still on 5.0.

In the mean time, bumping module (not lib) to es2020 looks safe to me (we support import.meta syntax, at least), and we'd take a PR for that. WDYT @NickGerleman?

[NickGerleman]

@robhogan that makes sense to me! Or maybe esnext, which assumes everything should be available (rely on the bundler to catch anything unsupported).

[aayushgoyal]

I am also facing this issue. Any resolution for this?

[Hao-yiwen]

same question.May be shoule update tsconfig.