Skip to content

Conversation

@krvns
Copy link

@krvns krvns commented Apr 27, 2025

This "fix" contains scripts related to the build process.

fix-exports.js

Purpose

Fixes the "exports before definition" issue in CommonJS compiled output.

The Problem

When using TypeScript with named exports of functions, the CommonJS compilation often places exports at the top of the file, before the actual function definitions:

// Original TypeScript
export function myFunction() { /* ... */ }

// Compiled to CommonJS (problematic)
exports.myFunction = myFunction;  // ❌ Reference to myFunction before it's defined!
function myFunction() { /* ... */ }

This causes runtime errors in JavaScript environments with the error message:

TypeError: Cannot access 'myFunction' before initialization

Attempted Solutions

We tried several approaches with Babel configuration before settling on this post-build script:

  1. Using lazy: true in the CommonJS transform plugin

    • Added @babel/plugin-transform-modules-commonjs with lazy: true option
    • Failed because TypeScript's compiler has its own export hoisting behavior
  2. Custom Babel presets and plugins

    • Tried configuring TypeScript to handle generics, enums, etc.
    • Required numerous packages and complex configuration
    • Ended up with many dependency conflicts with React Native's Babel preset
  3. Modifying react-native-builder-bob configuration

    • Attempted to customize how Bob builds the files
    • Couldn't properly override the TypeScript/Babel pipeline

Proposed Solution

The fix-exports.js script runs after the build process and:

  1. Identifies export statements at the top of the file
  2. Removes them from their original position
  3. Adds them back at the end of the file, after all function definitions

This approach:

  • Is far more reliable than Babel configuration
  • Requires no additional dependencies
  • Works with any future changes to the TypeScript compiler or Babel

Usage

The script is automatically called in the build command in package.json:

"scripts": {
  "build": "bob build && node ./scripts/fix-exports.js"
}

If you can fix this in a better way, please help. Otherwise feel free to use this script as a post package install band-aid

@Faymir
Copy link

Faymir commented Jul 4, 2025

@computerjazz hello, any news about this fix ?
I have the same error, and my react native web isn't displaying because of that.

@nickmcmillan
Copy link

I've created this patch-package as a quick fix. It simply moves the exports to the bottom of the commonjs file (ie after their initialisation).

react-native-infinite-pager+0.3.18.patch

diff --git a/node_modules/react-native-infinite-pager/.DS_Store b/node_modules/react-native-infinite-pager/.DS_Store
new file mode 100644
index 0000000..e1cf500
Binary files /dev/null and b/node_modules/react-native-infinite-pager/.DS_Store differ
diff --git a/node_modules/react-native-infinite-pager/lib/commonjs/pageInterpolators.js b/node_modules/react-native-infinite-pager/lib/commonjs/pageInterpolators.js
index 9dbdb20..ea6a366 100644
--- a/node_modules/react-native-infinite-pager/lib/commonjs/pageInterpolators.js
+++ b/node_modules/react-native-infinite-pager/lib/commonjs/pageInterpolators.js
@@ -3,11 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultPageInterpolator = void 0;
-exports.pageInterpolatorCube = pageInterpolatorCube;
-exports.pageInterpolatorSlide = pageInterpolatorSlide;
-exports.pageInterpolatorStack = pageInterpolatorStack;
-exports.pageInterpolatorTurnIn = pageInterpolatorTurnIn;
 
 var _reactNative = require("react-native");
 
@@ -135,4 +130,12 @@ function pageInterpolatorTurnIn({
 
 const defaultPageInterpolator = pageInterpolatorSlide;
 exports.defaultPageInterpolator = defaultPageInterpolator;
+
+exports.defaultPageInterpolator = void 0;
+exports.pageInterpolatorCube = pageInterpolatorCube;
+exports.pageInterpolatorSlide = pageInterpolatorSlide;
+exports.pageInterpolatorStack = pageInterpolatorStack;
+exports.pageInterpolatorTurnIn = pageInterpolatorTurnIn;
+
+
 //# sourceMappingURL=pageInterpolators.js.map
\ No newline at end of file

@peterjskaltsis
Copy link

Thank you, confirming the above patch fixes it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants