react / react/react-native

@react-native/babel-preset imports from react-native not deferred (lazy requires)

Open
#44,660 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Issue: Author Provided Repro Newer Patch Available
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

Failing test repro

The expected behaviour of @react-native/babel-preset is to defer the evaluation of a subset of react-native modules until the scope in which they are first referenced: https://github.com/facebook/react-native/blob/main/packages/react-native-babel-preset/src/configs/main.js#L76

This is no longer happening (as @babel/plugin-transform-modules-commonjs passes the source string to the lazy callback, not the expected import specifier). See test 2.

Steps to reproduce
git clone git@github.com:stevoland/RNTest.git
git checkout lazy-imports-repro
yarn
yarn test babel.test
React Native Version

0.73.4

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info
System:
  OS: macOS 14.1
  CPU: (12) arm64 Apple M2 Pro
  Memory: 898.08 MB / 32.00 GB
  Shell:
    version: 3.2.57
    path: /bin/bash
Binaries:
  Node:
    version: 18.18.0
    path: ~/.nvm/versions/node/v18.18.0/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.18.0/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v18.18.0/bin/npm
  Watchman:
    version: 2024.04.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.11.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.1 AI-211.7628.21.2111.8309675
  Xcode:
    version: 15.0/15A240d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.3
    path: /Users/stephen.collings/.sdkman/candidates/java/current/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: 0.73.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false
Stacktrace or Logs
FAIL  __tests__/lazy-imports.test.ts
  ✕ should defer select react-native imports (403 ms)
  ✓ should defer all imports (26 ms)

  ● should defer select react-native imports

    expect(received).toMatchInlineSnapshot(snapshot)

    Snapshot name: `should defer select react-native imports 1`

    - Snapshot  - 1
    + Received  + 1

    - "function _reactNative(){var data=require("react-native");_reactNative=function _reactNative(){return data;};return data;}var a=function a(){return _reactNative().AccessibilityInfo;};"
    + "var _reactNative=require("react-native");var a=function a(){return _reactNative.AccessibilityInfo;};"

      17 | const a = () => AccessibilityInfo`;
      18 |
    > 19 |   expect(transform(input)).toMatchInlineSnapshot(
         |                            ^
      20 |     `"function _reactNative(){var data=require("react-native");_reactNative=function _reactNative(){return data;};return data;}var a=function a(){return _reactNative().AccessibilityInfo;};"`,
      21 |   );
      22 | });

      at Object.toMatchInlineSnapshot (__tests__/lazy-imports.test.ts:19:28)
Reproducer

https://github.com/stevoland/RNTest/commit/02effcb07917e94cd2d5a87670a69d6c0e627fc1

Screenshots and Videos

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The behavior is covered by tests/lazy-imports.test.ts and the preset's lazy-import configuration in packages/react-native-babel-preset/src/configs/main.js. Start by running the reproduction commands and inspect how the Babel CommonJS transform supplies the lazy callback; done means the select-import snapshot again shows deferred evaluation and the test passes.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
build-system, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.