react-nativebabeljsmetro-bundler

React Native run error: XXX could not be cloned


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.


Solution

  • I figured out that it's most likely babel issue. If you faced this issue like I had, upgrading libraries, just rollback to the older version that works, and upgrade libraries one by one. I reproduced this issue after I upgraded @babel/core. I just rolled back again and never touched babel again. Still works fine.