Optimization error with TypeScript const Array

[freerangenerd]

Do you want to request a feature or report a bug?

BUG

What is the current behavior?

When generating a bundle, with or without minification, there is an error in the optimized code generated for the bundle after modifying the elements within the array and logging them.

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

To reproduce:

Use the default TypeScript app created with:
npx @react-native-community/cli@latest init MyApp

Modify MyApp/App.tsx to insert this code just prior to the return statement:

  const i32Array = [1, 2, 3, 4, 5, 6, 7];
  console.log('[TEST_ARRAY_VALUES] js array         1: ' + i32Array);
  for(let i = 0; i < i32Array.length; i++) {i32Array[i] += 6000;}
  console.log('[TEST_ARRAY_VALUES] js array         2: ' + i32Array);
  console.log('[TEST_ARRAY_VALUES] js String(array) 3: ' + String(i32Array)); 

Build a bundle for Android with:

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output index.android.bundle

In the index.android.bundle file search for TEST_ARRAY_VALUES to find the generated code.

I am seeing:

c=[1,2,3,4,5,6,7];
console.log("[TEST_ARRAY_VALUES] js array         1: 1,2,3,4,5,6,7");
for(var h=0;h<c.length;h++)c[h]+=6e3;
return console.log("[TEST_ARRAY_VALUES] js array         2: 1,2,3,4,5,6,7"),
console.log('[TEST_ARRAY_VALUES] js String(array) 3: '+String(c)) 

This is incorrect because the actual contents of the array changed in the for loop.

What is the expected behavior?

After increasing the value of each element in the array by 6000, the current values should be used.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

metro.config.js

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Metro is bundled with "react-native": "0.75.4".
"metro-runtime": "^0.80.3",
"metro-source-map": "^0.80.3",

node --version
v18.20.3

npm --version
10.7.0

Mac OS 14.6.1

[freerangenerd]

Interestingly, the Jest test snapshots the view from App.tsx and when it calls it the log shows correctly when you run npm test.

` [TEST_ARRAY_VALUES] js array 1: 1,2,3,4,5,6,7

  at log (App.tsx:66:11)

console.log
[TEST_ARRAY_VALUES] js array 2: 6001,6002,6003,6004,6005,6006,6007

  at log (App.tsx:68:11)

console.log
[TEST_ARRAY_VALUES] js String(array) 3: 6001,6002,6003,6004,6005,6006,6007

  at log (App.tsx:69:11)

`

[freerangenerd]

Also note, if you just use tsc to transpile to JS it doesn't have this issue.

[cdsanchez]

Note that removing the application of the constant folding plugin on this line results in emitting correct but unoptimized code.

    var i32Array = [1, 2, 3, 4, 5, 6, 7];
    console.log('[TEST_ARRAY_VALUES] js array         1: ' + i32Array);
    for (var i = 0; i < i32Array.length; i++) {
      i32Array[i] += 6000;
    }
    console.log('[TEST_ARRAY_VALUES] js array         2: ' + i32Array);
    console.log('[TEST_ARRAY_VALUES] js String(array) 3: ' + String(i32Array));