search

gengjiawen / ReactNativeNewJsc

13 stars 0 forks source link

Run-time error when running on Android (TransformError) #1

Open AkshayBudhiraja opened 5 years ago

AkshayBudhiraja commented 5 years ago

In order to test the new JSC for our project, I wanted to try your react-native bundled with the new jsc.

The steps I followed were as follows:

  1. git clone https://github.com/gengjiawen/ReactNativeNewJsc.git
  2. cd ReactNativeNewJsc
  3. yarn
  4. react-native start && react-native run-android

package.json, babel.config.js have not been touched and are identical to their current state in the repo. In fact I haven't touched any of the files.

I was testing this on a Android API 28 Device Emulator, I have also tested it on my Pixel 2 XL running Android 9 with the same results.

The error is emitted by the JS bundler and appears to be related to the babel.config.js file. Here it is in full:

{"type":"TransformError","lineNumber":0,"errors":[{"description":"index.js: Cannot read property 'platform' of undefined","lineNumber":0}],"name":"SyntaxError","message":"index.js: Cannot read property 'platform' of undefined","stack":"TypeError: Cannot read property 'platform' of undefined\n at api.caller.caller (C:\path\to\repo\git\ReactNativeNewJsc\babel.config.js:2:48)\n at cache.using.data (C:\path\to\repo\ReactNativeNewJsc\node_modules\@babel\core\lib\config\helpers\config-api.js:42:75)\n at CacheConfigurator.using (C:\path\to\repo\ReactNativeNewJsc\node_modules\@babel\core\lib\config\caching.js:132:17)\n at Object.caller (C:\path\to\repo\ReactNativeNewJsc\node_modules\@babel\core\lib\config\helpers\config-api.js:42:30)\n at module.exports (C:\path\to\repo\ReactNativeNewJsc\babel.config.js:2:24)\n at readConfigJS (C:\path\to\repo\ReactNativeNewJsc\node_modules\@babel\core\lib\config\files\configuration.js:212:15)\n at cachedFunction (C:\path\to\repo\ReactNativeNewJsc\node_modules\@babel\core\lib\config\caching.js:33:19)\n at readConfig (C:\path\to\repo\ReactNativeNewJsc\node_modules\@babel\core\lib\config\files\configuration.js:173:56)\n at loadConfig (C:\path\to\repo\ReactNativeNewJsc\node_modules\@babel\core\lib\config\files\configuration.js:162:16)"}

I tried installing babel-core v7.1.6 by running yarn add @babel/core --dev which currently install v7.1.6 of babel but this did not help either.

Please advise as we are keen to test the new JSC in our project. As always, thanks for your contributions so far.

Please let me know if I have missed any missed anything.

gengjiawen commented 5 years ago

Use this as a temp workaround, looks like some cache issue. I will look into later.

module.exports = function (api) {
  api.cache(true)
  const platform = 'android'

  if (platform === 'android') {
    return {
      presets: [],
      plugins: ["@babel/plugin-transform-react-jsx",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-nullish-coalescing-operator",
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-transform-flow-strip-types",
        "@babel/plugin-transform-modules-commonjs"]
    }
  }
  return {
    presets: ["module:metro-react-native-babel-preset"]
  }
}
gengjiawen commented 5 years ago

First works due to metro cache issue, with --reset-cache failed too.

AkshayBudhiraja commented 5 years ago

Thanks for the workaround @gengjiawen, I can confirm that this fixes this specific issue with your sample project.

However, when integrating this into my personal project, I am now hit with a different run-time error that I am unable to diagnose and would appreciate your help nailing this down. I can confirm that the same project works with the latest React Native 0.57.7. This issue only appears after I switch to using your React Native version.

The error is as follows: screenshot_1543446884

The issue appears to be a result of the _callListeners.bind() call in the AnimatedEvent class although I am unsure why this issue only appears with the new JSC.

My package.json:

{
  "name": "FL360",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@types/jest": "^23.3.10",
    "@types/react": "^16.7.8",
    "@types/react-native": "^0.57.15",
    "@types/react-native-vector-icons": "^4.6.4",
    "@types/react-navigation": "^2.13.5",
    "@types/react-test-renderer": "^16.0.3",
    "babel-jest": "^23.6.0",
    "concurrently": "^4.1.0",
    "husky": "0.14.3",
    "jest-expo": "^24.0.0",
    "metro-react-native-babel-preset": "^0.49.2",
    "react-test-renderer": "16.6.3",
    "rimraf": "^2.6.2",
    "ts-jest": "22.0.0",
    "tslint": "^5.11.0",
    "typescript": "^3.1.6"
  },
  "scripts": {
    "start": "react-native start",
    "jest": "node node_modules/jest/bin/jest.js",
    "watch": "npm run build -- -w",
    "ios": "react-native run-ios",
    "android": "react-native run-android",
    "tsc": "tsc",
    "clean": "rimraf artifacts",
    "build": "npm run clean && npm run tsc --",
    "lint": "tslint src/**/*.ts",
    "test": "yarn jest && tslint src/**/*.tsx && eslint .",
    "precommit": "yarn test"
  },
  "jest": {
    "preset": "jest-expo",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|lottie-react-native|expo|react-native-maps|react-native-svg|react-native-branch|native-base-shoutem-theme|react-native-easy-grid|react-native-drawer|react-native-vector-icons|react-native-keyboard-aware-scroll-view|react-navigation|native-base|@expo|react-native-scrollable-tab-view)/)"
    ]
  },
  "dependencies": {
    "lodash": "^4.17.11",
    "mobx": "^4.6.0",
    "mobx-react": "^5.4.2",
    "native-base": "^2.8.1",
    "react": "16.6.3",
    "react-timer-mixin": "^0.13.4",
    "react-native": "gengjiawen/react-native#feature/new_jsc",
    "react-native-gesture-handler": "^1.0.9",
    "react-navigation": "^3.0.1"
  },
  "resolutions": {
    "**/@types/react": "^16.6.3"
  }
}

babel.config.js remains unchanged.

Would appreciate any suggestions or help.

Thanks.

gengjiawen commented 5 years ago

Can you provide an minimal repro, I need more detail to look into this.

gengjiawen commented 5 years ago

I reproduce with another repo, looks like need to deal with navigation.