React Native run error: XXX could not be cloned

Question

I don't know how to better describe it. I was working on react-native project, something happened and I can't run it anymore for some reason. I'm getting weird messages like some function could not be cloned.

error: src/requests/TimeoutRequest.ts: function (path) {
          return fn.call(state, path, state);
        } could not be cloned.

or:

error: src/sensors/GPS.ts: Program(path) {
      importAll = path.scope.generateUid("$$_IMPORT_ALL");
      importDefault = path.scope.gen...<omitted>... } could not be cloned.

All the versions:

npm version: 7.10.0

"react": "^16.11.0",
"react-native": "^0.62.2",

dev:
"@babel/core": "^7.13.15",
"@babel/runtime": "^7.13.10",
"babel-jest": "^24.9.0",
"babel-plugin-root-import": "^6.6.0",
"metro-react-native-babel-preset": "^0.57.0",
"react-test-renderer": "16.9.0"

If I comment out this function. I get error in another one, and so on. What happened in between: I updated npm version. Then I had some issues with downloading some libraries, and I had to rm -rf node_modules && npm install.

What I tried:

Googling, in general. Could not find any solution that would work. Found out it's possibly babel issue, but it's maybe completely wrong, I have no idea

npm start --reset-cache

deleting cache folders, watchman stuff, and so on

npm install --legacy-peer-deps

clone project and do everything in another folder

restoring or deleting package-lock.json and yarn.lock. Installing with or without them

tried updating babel versions

running both android and ios with the same result

running debug or release versions, building the release also fails with the same error.

Nothing helps.

Surprisngly, it was all working fine before, these functions it's made about were included in the previous release with no issue. Probably some libraries versions are messed up. I had them, but after rm -rf node_modules I don't anymore. Possibly it's babel issue. But I don't really know, I've read about it.

Just in case, example the function that 'could not be cloned'. I don't even clone objects in there.

export async function TimeoutRequest(
    req: any,
    timeout: number = 5000,
): Promise<Response> {
    const timeoutId = setTimeout(() => controller.abort(), timeout)
    const controller = new AbortController()

    req.signal = controller.signal
    return new Promise((resolve, reject) => {
        fetch(req)
            .then(res => {
                clearTimeout(timeoutId)
                resolve(res)
            })
            .catch(err => {
                clearTimeout(timeoutId)
                reject(err)
            })
    })
}

Also, added stack trace when error happens:

at Object.serialize (v8.js:267:7)
    at _default (node_modules/@babel/core/lib/transformation/util/clone-deep.js:16:30)
    at normalizeFile (node_modules/@babel/core/lib/transformation/normalize-file.js:52:36)
    at normalizeFile.next (<anonymous>)
    at run (node_modules/@babel/core/lib/transformation/index.js:31:50)
    at run.next (<anonymous>)
    at node_modules/@babel/core/lib/transform-ast.js:20:41
    at Generator.next (<anonymous>)
    at evaluateSync (node_modules/gensync/index.js:251:28)

I would really appreciate an feedback, I'm stuck at this point.

Answer 1

If you stumbled upon this like I did because some random library isn't working with react native, here's what I did. Following the stack trace of the error led me to node_modules/@babel/core/lib/transformation/util/deep-clone.js, which I'm sure is an essential component of some important process, but seems to just be making copies of code. I changed the _default function there to:

function _default(value) {
  if (_v().deserialize && _v().serialize) {
    try {
      return _v().deserialize(_v().serialize(value));
    } catch(err) {
      console.warn(err);
      return value;
    }
  }

  return (0, _cloneDeepBrowser.default)(value);
}

And I'm back in business. I'm sure a React Native guru will be able to jump in here to tell us why this is a horrible idea, but it got me unblocked so I thought I'd share.

Please note, I have not used this in production yet. When I get around to making a production build, I'll report back with whether this works or not.