Compatibility with Expo/CRNA

[stevefan1999-personal]

Current Behavior

Description

Using a series of tricks, I was hoping for a better dev experience with Haul and Expo together, but at the end of the day, their chemicals didn't work out...

Error details:

ExceptionsManager.js?4e3a:71 fontFamily 'Roboto' is not a system font and has not been loaded through Expo.Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Expo.Font.loadAsync.
reactConsoleErrorHandler @ ExceptionsManager.js?4e3a:71
console.error @ YellowBox.js?c803:69
processFontFamily @ Font.js?7ccc:33
diffProperties @ ReactNativeRenderer-dev.js?8160:3382
addProperties @ ReactNativeRenderer-dev.js?8160:3465
addNestedProperty @ ReactNativeRenderer-dev.js?8160:3242
diffNestedProperty @ ReactNativeRenderer-dev.js?8160:3182
diffProperties @ ReactNativeRenderer-dev.js?8160:3392
addProperties @ ReactNativeRenderer-dev.js?8160:3465
create @ ReactNativeRenderer-dev.js?8160:3483
createInstance @ ReactNativeRenderer-dev.js?8160:14305
completeWork @ ReactNativeRenderer-dev.js?8160:10096
completeUnitOfWork @ ReactNativeRenderer-dev.js?8160:12768
performUnitOfWork @ ReactNativeRenderer-dev.js?8160:12941
workLoop @ ReactNativeRenderer-dev.js?8160:12953
renderRoot @ ReactNativeRenderer-dev.js?8160:12996
performWorkOnRoot @ ReactNativeRenderer-dev.js?8160:13632
performWork @ ReactNativeRenderer-dev.js?8160:13545
performSyncWork @ ReactNativeRenderer-dev.js?8160:13506
batchedUpdates @ ReactNativeRenderer-dev.js?8160:13728
batchedUpdates @ ReactNativeRenderer-dev.js?8160:2565
reactionScheduler @ mobx.module.js?daf9:3596
runReactions @ mobx.module.js?daf9:3572
endBatch @ mobx.module.js?daf9:3011
<...snip...>

Unhandled promise rejection TypeError: Cannot read property '0' of undefined
    at pickScale (webpack-internal:///./node_modules/expo/src/Asset.js:1:2564)
    at Function.fromMetadata (webpack-internal:///./node_modules/expo/src/Asset.js:1:6081)
    at Function.fromModule (webpack-internal:///./node_modules/expo/src/Asset.js:1:5909)
    at _getAssetForSource (webpack-internal:///./node_modules/expo/src/Font.js:1:5752)
    at _callee2$ (webpack-internal:///./node_modules/expo/src/Font.js:1:1770)
    at tryCatch (webpack-internal:///./node_modules/react-native/node_modules/regenerator-runtime/runtime.js:1:1283)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/react-native/node_modules/regenerator-runtime/runtime.js:1:5163)
    at Generator.prototype.(anonymous function) [as next] (webpack-internal:///./node_modules/react-native/node_modules/regenerator-runtime/runtime.js:1:2411)
    at step (webpack-internal:///./node_modules/expo/src/Font.js:1:4010)
    at eval (webpack-internal:///./node_modules/expo/src/Font.js:1:4224)
reactConsoleErrorHandler @ ExceptionsManager.js?4e3a:71
console.error @ YellowBox.js?c803:69
(anonymous) @ es6.promise.js?551c:110
module.exports @ _perform.js?9c80:3
(anonymous) @ es6.promise.js?551c:104
(anonymous) @ JSTimers.js?d823:295
_callTimer @ JSTimers.js?d823:152
_callImmediatesPass @ JSTimers.js?d823:200
callImmediates @ JSTimers.js?d823:464
__callImmediates @ MessageQueue.js?f0f3:327
(anonymous) @ MessageQueue.js?f0f3:145
__guardSafe @ MessageQueue.js?f0f3:314
flushedQueue @ MessageQueue.js?f0f3:144
callFunctionReturnFlushedQueue @ MessageQueue.js?f0f3:119
t @ RNDebuggerWorker.js:1

Those two exceptions are consecutive, and the first exception is caused by the second, and although it sounds crazy, I'd prove you how: By installing a console.log (breakpoints won't work unfortunately) monitor on meta(where the pickScale function was getting an OOB error), that's why the font isn't loaded at the first place. I see that the metadata structure are not provided in Haul unlike what Metro could usually provide for, URL is also incorrect (backward slashes aren't there, wow)

Object {__packager_asset: true, scales: Array(1), name: "Ionicons", type: "ttf", hash: "74c652671225d6ded874a648502e5f0a"…}fileSystemLocation: "E:\crna2ode_modules\@expo\vector-icons\fonts"hash: "74c652671225d6ded874a648502e5f0a"httpServerLocation: "assets/ios/node_modules/@expo/vector-icons/fonts"name: "Ionicons"scales: Array(1)type: "ttf"__packager_asset: true__proto__: Object

Symbolicate support was also broken:

Unable to symbolicate stack trace: Unexpected token N in JSON at position 0

Yes, the HTTP POST request literally returns Not Found.

Expected Behavior

Just make it work. Many others and I have had enough of this ancient react-transform-hmr.

Haul Configuration (webpack.haul.js)

Nothing special:

import { createWebpackConfig } from "haul"
import path from 'path'

export default {
  webpack (env) {
    const config = createWebpackConfig({
      entry: "./index.js"
    })(env);

    config.module.rules = [
      {
        test: /\.tsx?$/,
        use: [
          { loader: 'babel-loader' },
          { loader: 'ts-loader' }
        ]
      },
      ...config.module.rules
    ];

    delete config.module.rules.find(rule => String(rule.test) === String(/\.js$/)).exclude

    config.resolve.extensions = [
      '.ts',
      '.tsx',
      `.${env.platform}.ts`,
      '.native.ts',
      `.${env.platform}.tsx`,
      '.native.tsx',
      ...config.resolve.extensions,
    ]

    return config;
  }
}

Some may find my deletion of JS include/exclude filter a culprit, but unfortunately many RN libraries are literally giving you ES6+ code without transpilation because RN comes with Babel out of the box.

I have to hack the CRNA entry by copying the content of it and load them as index.js. Haul has hardcoded the entry to index.${platform}.bundle. I also had to change the main property on package.json to ./index so that Expo could load my app without going to node_modules.

noEmit in tsconfig.json has to be removed as well.

Your Environment

software	version
Haul	^1.0.0-rc.5
react-native	~0.55.4
node	v10.7.0
npm or yarn	1.5.1
expo	^27.0.1
OS	Windows 10 (10.0.17134.165) but it shouldn't matter

Related issue: #350

[stevefan1999-personal]

Well, after a few hours I found that updating Expo SDK to version 29 (released not too long ago) solved all the problems!

Here's how I managed to get Expo to run along with Haul. Please merge the following files to your CRNA/Expo setup:
package.json:

{
  "dependencies": {
    "@expo/vector-icons": "^6.3.1",
    "expo": "^29.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz"
  },
  "main": "./index",
  "scripts": {
    "watch": "haul start --platform=all --port=19001",
  }
}

app.json:

{
  "expo": {
    "packagerOpts": {
      "port": 19001
    },
    "sdkVersion": "29.0.0"
  }
}

Create a index.js in root directory with the following content:

import 'haul/hot/patch'
import { KeepAwake, registerRootComponent } from 'expo'
import App from '<insert the path to your main App file>'
import { makeHot, clearCacheFor, redraw } from 'haul/hot'

const appFiles = '<insert the path to your main App file>'

if (process.env.NODE_ENV === 'development') {
  KeepAwake.activate()
}

registerRootComponent(makeHot(() => App)())

if (module.hot) {
  module.hot.accept(() => {})
  module.hot.accept([appFile], () => {
    clearCacheFor(require.resolve(appFile))
    redraw(() => require(appFile).default)
  })
  // do the same for react-navigation screens
}

After all this, run Haul first (yarn watch) then exp start, and that's it! You could use concurrently if you want.

Also if you want to get multiple clients to run HMR, merge this PR that is currently on master but not staged to npm.