Haul: React-native 0.48.1 content-type issue

[joearasin]

I just upgraded what is effectively a Hello World react-native app + Haul to react-native 0.48.1, and now upon launching I am getting an error in my simulator:

Expected Content-Type to be 'application/javascript' or 'text/javascript' but got 'application/octet-stream; charset=UTF-8'

My assumption is that https://github.com/facebook/react-native/blob/v0.48.1/React/Base/RCTJavaScriptLoader.mm#L247 is tripping on something in haul, as running curl -v -D - http://localhost:8081/index.ios.bundle -o /dev/null indicates that the content-type of my bundle is indeed Content-Type: application/octet-stream; charset=UTF-8.

Your Environment

| software | version
| ---------------- | -------
| Haul | 1.0.0-beta.5
| react-native | 0.48.1
| node | 8.4.0
| npm or yarn | 0.27.5

[joearasin]

To clarify what is going on internally:
webpack-dev-middleware is using mime.lookup to determine the content-type to return for "index.ios.bundle". ".bundle" being an unknown type, it defaults to applications/octet-stream. The default bundle file needs to be "index.ios.bundle.js" or something to that effect.

[joearasin]

Anyway -- it seems like there are two possible solutions:
1) Convince the webpack-dev-middleware folks to expose the mimetype detector as a parameter, allowing for custom mimetype detection.
2) Set up haul such that, when running in server mode, it bundles to "index.ios.bundle.js" and rewrites the request from "index.ios.bundle" to "index.ios.bundle.js"

[joearasin]

Just attempted solution (2) above. It does not work, b/c webpack-dev-middleware automatically appends "charset=UTF-8" to the mime-type header, which causes react-native to choke. This could be overridden by using the "headers" option to webpack-dev-middleware, but I imagine images and such would then break.

[joearasin]

I just opened a PR on webpack-dev-middleware that is necessary for solution (1) -- I think that's ideal, as this implementation is more than a bit of a hack.

[qrush]

Hit this myself! Big +1 to fixing this. In the meantime I commented out the following lines to skip that check...

https://github.com/facebook/react-native/blob/master/React/Base/RCTJavaScriptLoader.mm#L287-L288

🙈

[Titozzz]

Hello, happens to me too, so I can't upgrade to 0.48 until then ..

[grabbou]

Fixed in master, release pending. Thanks!

[jukben]

Master is also broken in this case, see attached image

[joearasin]

Things are broken in master pending https://github.com/facebook/react-native/issues/15791 being fixed.