Error after connecting to metro server, import declration must be at top level of mdoule

[crasyboy42]

Description

The metro server shows no error, but after the android phone downloads the bundel and tries to run it it gives this error:
"Compiling JS failed: 2464:3:import declaration must be at top level of module"

The line in question is:
"import invariant from 'invariant';"

This is the function its a part of.

__d(function (global, _$$_REQUIRE, _$$_IMPORT_DEFAULT, _$$_IMPORT_ALL, module, exports, _dependencyMap) {
  "use strict";

  /**
   * Copyright (c) Meta Platforms, Inc. and affiliates.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   *
   * @format
   * 
   */

  import invariant from 'invariant';

  /**
   * Tries to stringify with JSON.stringify and toString, but catches exceptions
   * (e.g. from circular objects) and always returns a string and never throws.
   */
  export function createStringifySafeWithLimits(limits) {
    var _limits$maxDepth = limits.maxDepth,
      maxDepth = _limits$maxDepth === void 0 ? Number.POSITIVE_INFINITY : _limits$maxDepth,
      _limits$maxStringLimi = limits.maxStringLimit,
      maxStringLimit = _limits$maxStringLimi === void 0 ? Number.POSITIVE_INFINITY : _limits$maxStringLimi,
      _limits$maxArrayLimit = limits.maxArrayLimit,
      maxArrayLimit = _limits$maxArrayLimit === void 0 ? Number.POSITIVE_INFINITY : _limits$maxArrayLimit,
      _limits$maxObjectKeys = limits.maxObjectKeysLimit,
      maxObjectKeysLimit = _limits$maxObjectKeys === void 0 ? Number.POSITIVE_INFINITY : _limits$maxObjectKeys;
    var stack = [];
    /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
     * Flow's LTI update could not be added via codemod */
    function replacer(key, value) {
      while (stack.length && this !== stack[0]) {
        stack.shift();
      }
      if (typeof value === 'string') {
        var truncatedString = '...(truncated)...';
        if (value.length > maxStringLimit + truncatedString.length) {
          return value.substring(0, maxStringLimit) + truncatedString;
        }
        return value;
      }
      if (typeof value !== 'object' || value === null) {
        return value;
      }
      var retval = value;
      if (Array.isArray(value)) {
        if (stack.length >= maxDepth) {
          retval = "[ ... array with " + value.length + " values ... ]";
        } else if (value.length > maxArrayLimit) {
          retval = value.slice(0, maxArrayLimit).concat(["... extra " + (value.length - maxArrayLimit) + " values truncated ..."]);
        }
      } else {
        // Add refinement after Array.isArray call.
        invariant(typeof value === 'object', 'This was already found earlier');
        var keys = Object.keys(value);
        if (stack.length >= maxDepth) {
          retval = "{ ... object with " + keys.length + " keys ... }";
        } else if (keys.length > maxObjectKeysLimit) {
          // Return a sample of the keys.
          retval = {};
          for (var _iterator = keys.slice(0, maxObjectKeysLimit), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[typeof Symbol === "function" ? Symbol.iterator : "@@iterator"]();;) {
            var _ref;
            if (_isArray) {
              if (_i >= _iterator.length) break;
              _ref = _iterator[_i++];
            } else {
              _i = _iterator.next();
              if (_i.done) break;
              _ref = _i.value;
            }
            var _k = _ref;
            retval[_k] = value[_k];
          }
          var truncatedKey = '...(truncated keys)...';
          retval[truncatedKey] = keys.length - maxObjectKeysLimit;
        }
      }
      stack.unshift(retval);
      return retval;
    }
    return function stringifySafe(arg: mixed): string {
      if (arg === undefined) {
        return 'undefined';
      } else if (arg === null) {
        return 'null';
      } else if (typeof arg === 'function') {
        try {
          return arg.toString();
        } catch (e) {
          return '[function unknown]';
        }
      } else if (arg instanceof Error) {
        return arg.name + ': ' + arg.message;
      } else {
        // Perform a try catch, just in case the object has a circular
        // reference or stringify throws for some other reason.
        try {
          const ret = JSON.stringify(arg, replacer);
          if (ret === undefined) {
            return '["' + typeof arg + '" failed to stringify]';
          }
          return ret;
        } catch (e) {
          if (typeof arg.toString === 'function') {
            try {
              // $FlowFixMe[incompatible-use] : toString shouldn't take any arguments in general.
              return arg.toString();
            } catch (E) {}
          }
        }
      }
      return '["' + typeof arg + '" failed to stringify]';
    };
  }
  var stringifySafe: (mixed) => string = createStringifySafeWithLimits({
    maxDepth: 10,
    maxStringLimit: 100,
    maxArrayLimit: 50,
    maxObjectKeysLimit: 50
  });
  export default stringifySafe;
},19,[17],"node_modules/react-native/Libraries/Utilities/stringifySafe.js");

Steps to reproduce

Created a new android project and updated the versions on our remote metro server.

React Native Version

0.75.3

Affected Platforms

Runtime - Android

Output of npx react-native info

Info on the remote server

System:
  OS: Linux 5.4 Ubuntu 20.04.6 LTS (Focal Fossa)
  CPU: (2) x64 Intel(R) Xeon(R) CPU E5-2687W v4 @ 3.00GHz
  Memory: 2.15 GB / 3.83 GB
  Shell:
    version: 5.0.17
    path: /bin/bash
Binaries:
  Node:
    version: 18.20.4
    path: ~/.nvm/versions/node/v18.20.4/bin/node
  Yarn: Not Found
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v18.20.4/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java: Not Found
  Ruby:
    version: 2.7.0
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.3
    wanted: 0.75.3
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

Exception in native call
com.facebook.jni.CppException: Compiling JS failed: 2464:3:import declaration must be at top level of module
       at com.facebook.jni.NativeRunnable.run(Native Method)
       at android.os.Handler.handleCallback(Handler.java:942)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
       at android.os.Looper.loopOnce(Looper.java:201)
       at android.os.Looper.loop(Looper.java:288)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:235)
       at java.lang.Thread.run(Thread.java:1012)

Reproducer

Its a delicate app i can't put public on github due to personal information it processes

Screenshots and Videos

No response

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[crasyboy42]

Not sure what you want me to do, I can't share our project due to the nature of the contents in the app it should run.

[cortinico]

Passing over to Metro team