Haul: New Project won't run since 1.0.0-rc.13

[grahamlyus]

Environment

macOS Mojave 10.14.4
node v8.15.0
yarn v1.13.0

Description

New project fails with this in the iOS Simulator:

Unhandled JS Exception: Attempted to assign to readonly property.


eval code
eval@[native code]
eval code
eval@[native code]
./node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3528:5
__webpack_require__@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
fn@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39

eval code
eval@[native code]
eval code
eval@[native code]
./node_modules/react-native/Libraries/BatchedBridge/BatchedBridge.js@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3515:5
__webpack_require__@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
fn@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39

eval code
eval@[native code]
eval code
eval@[native code]
./node_modules/react-native/Libraries/BatchedBridge/NativeModules.js@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3541:5
__webpack_require__@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
fn@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39

eval code
eval@[native code]
eval code
eval@[native code]
./node_modules/react-native/Libraries/Core/ReactNativeVersionCheck.js@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4668:5
__webpack_require__@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
fn@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39
eval code
eval@[native code]
eval code
eval@[native code]
./node_modules/react-native/Libraries/Core/checkNativeVersion.js@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4694:5
__webpack_require__@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
fn@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39

eval code
eval@[native code]
eval code
eval@[native code]
./node_modules/react-native/Libraries/Core/InitializeCore.js@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4643:5
__webpack_require__@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
fn@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:101:39
eval code
eval@[native code]
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:7590:5
__webpack_require__@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:724:34
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:791:37
global code@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:792:12

./node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js
    index.bundle?platform=ios&dev=true&minify=false:3528:5
__webpack_require__
    index.bundle?platform=ios&dev=true&minify=false:724:34
fn
    index.bundle?platform=ios&dev=true&minify=false:101:39
./node_modules/react-native/Libraries/BatchedBridge/BatchedBridge.js
    index.bundle?platform=ios&dev=true&minify=false:3515:5
__webpack_require__
    index.bundle?platform=ios&dev=true&minify=false:724:34
fn
    index.bundle?platform=ios&dev=true&minify=false:101:39
./node_modules/react-native/Libraries/BatchedBridge/NativeModules.js
    index.bundle?platform=ios&dev=true&minify=false:3541:5
__webpack_require__
    index.bundle?platform=ios&dev=true&minify=false:724:34
fn
    index.bundle?platform=ios&dev=true&minify=false:101:39
./node_modules/react-native/Libraries/Core/ReactNativeVersionCheck.js
    index.bundle?platform=ios&dev=true&minify=false:4668:5
__webpack_require__
    index.bundle?platform=ios&dev=true&minify=false:724:34
fn
    index.bundle?platform=ios&dev=true&minify=false:101:39
./node_modules/react-native/Libraries/Core/checkNativeVersion.js
    index.bundle?platform=ios&dev=true&minify=false:4694:5
__webpack_require__
    index.bundle?platform=ios&dev=true&minify=false:724:34
fn
    index.bundle?platform=ios&dev=true&minify=false:101:39
./node_modules/react-native/Libraries/Core/InitializeCore.js
    index.bundle?platform=ios&dev=true&minify=false:4643:5
__webpack_require__
    index.bundle?platform=ios&dev=true&minify=false:724:34
fn
    index.bundle?platform=ios&dev=true&minify=false:101:39
__webpack_require__
    index.bundle?platform=ios&dev=true&minify=false:724:34
global code
    index.bundle?platform=ios&dev=true&minify=false:792:12

If Remote JS Debugging is on this is the error shown in the Simulator:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start

Seeing as 1.0.0-rc.12 works, the issue must be related to this commit as it's the only change from 1.0.0-rc.12 to 1.0.0-rc.13: https://github.com/callstack/haul/commit/87ad54a1ba3d897cd80e4d425d2e962bbbdc6f81

Also when starting a new project the following errors occur but can be fixed by yarn add -D react-hot-loader react-dom (see also #532):

Module not found: Error: Can't resolve 'react-dom' in '.../MyProject/node_modules/haul/node_modules/react-hot-loader/dist' 
Module not found: Error: Can't resolve 'react-hot-loader' in '.../MyProject'

One more thing. I'm seeing these warnings repeated from the yarn haul start --platform ios command. I've no idea where these are coming from.

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

Reproducible Demo

Bootstrap new project:

react-native init MyProject
cd MyProject
yarn add -D haul
yarn haul init
yarn haul start -- --platform ios
react-native run-ios

Add missing packages:

yarn add -D react-hot-loader react-dom

Try again:

yarn haul start -- --platform ios

Unhandled JS Exception: Attempted to assign to readonly property.

package.json:

{
  "name": "MyProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "haul": "haul"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.4"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/runtime": "^7.4.3",
    "babel-jest": "^24.7.1",
    "haul": "^1.0.0-rc.15",
    "jest": "^24.7.1",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-dom": "^16.8.6",
    "react-hot-loader": "^4.8.4",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

[zamotany]

AFAIK the issue is with @babel/runtime and it's transform which is adding ES imports instead of requrie which causes the error due to Webpack not allowing to mix CommonJS and ESM together. One of the solution is to pass enableBabelRuntime: false to metro-react-native-babel-preset. Here's a haul.config.js for that:

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

    config.module.rules.some(rule => {
      if (rule.test && rule.test.source.includes('js')) {
        rule.use = [
          {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [['module:metro-react-native-babel-preset', { enableBabelRuntime: false }]],
              plugins: [require.resolve('haul/src/utils/fixRequireIssues')],
            },
          },
        ];
        return true;
      }
    });
    return config;
  }
};

[respectTheCode]

This didn't work for me. I still get the same error.

[swdenglian]

This did work for me in haul^1.0.0-rc.15.

[kelset]

two quick feedbacks:
1) I also had to yarn add -D react-hot-loader react-dom to make Haul work (bug in way dependencies are set for Haul? not sure 🤔)
2) Had to modify the haul config as wrote by @zamotany (thanks for sharing that btw!) - side question to that, can't we modify the metro.config.js file instead? 🤔 I tried but couldn't actually make it work tbh

[tido64]

@zamotany: What are the implications of disabling the Babel runtime? Can we add it to the default Babel config?

[zamotany]

It turns out that the problem is not Babel runtime, but disableImportExportTransform: true which will not transform ES import/export. This is bad, since some files in RN JS source code have mixed both ES import/export and CommonJS in a single file, which is unsupported by Webpack - with Webpack you cannot mix ES import/export and CommonJS.

So we should revert that change. Also if you're running RN 0.59 please check next branch. We are doing some major refactoring there for RN 0.59 and future versions (no backwards compatibility for older RN at this point).

[tido64]

That means we'll lose tree-shaking again. 😞

What is the implications of disabling the Babel runtime? In my testing, it seems to work just fine. If we disable disableImportExportTransform in Haul, we could just explicitly enable it with the Babel runtime disabled in our systems.

cc @acoates-ms

[zamotany]

@tido64 yeah, but you loose tree shaking inly in your code and maybe other non-RN dependencies. Because of CommonJS in RN, it won't tree shake it. You can also submit PRs to RN to rewrite CJS to ESM.

[zamotany]

Or you could disableImportExportTransform but you would need to apply commonjs transform for all files from RN

[chiubaka]

I also encountered this. Had some trouble patching configs for 1.0.0-rc.15, and it sounds like this hasn't been resolved yet...

So I downgraded to 1.0.0-rc.12, and can confirm this resolved my issue.

[zaguiini]

@zamotany solution works for me!

[Swaagie]

What combinations of versions actually worked for people? I've tried different permutations of [email protected] and [email protected] and haul versions from rc.12 to rc.15 with a newly initialized RN project. Didn't get it to function, kept failing on the orginal post's error.

Also note: some configuration changes are rather specific to the structure of the underlying babel and webpack configs.

[farid-ouachrar]

I also have experienced this issue!

[jkirkpatrick24]

Hey there! I'm also running in to a similar issue.

I'm starting a new project using react-native 0.60.0 and trying to set it up with haul. When installing I ran in to the same problems in this thread.

After installing react-dom and react-hot-loader along with updating the haul config provided by @zamotany I am able to run the app, but only when JS remote debugging is running.

When it is turned off I get this error:

As well as a whole lot of 404 errors in the Haul logs

Is this a compatibility issue with Haul 1.0.0-rc.15 and react-native 0.60.0?

I've done up a quick repo with the setup here if that is useful. Cheers!

[sarink]

Hey @jkirkpatrick24 , I just ran into the same issue. I worked around it by installing and using the console.assert polyfill at the top of my entry point.

[FullstackJack]

I'm stuck on this as well. React Native development has actually become more brittle lately. Flutter is so much easier and just works.

[zamotany]

For anyone running RN 0.59 or 0.60, please check the revamped version of Haul on next branch - it's much more stable. The haul package will become deprecated soon.

Here's what you have to do in order to migrate:

1. Back up your haul.config.js and babel.config.js
2. Remove haul package
3. Install @haul-bundler/cli and @haul-bundler/preset-0.59 for RN 0.59 or @haul-bundler/preset-0.60 for RN 0.60
4. Run haul init command -> this will create new config and babel.config.js will now have @haul-bundler/babel-preset-react-native preset tweaked for RN 0.59+
5. Integrate Webpack config modifications from old config in new config using transform function.

[zamotany]

If anyone is having this issue please use @haul-bundler/cli (if not already using) and feel free to open a new issue or reopen this one.

[JofBigHealth]

@zamotany That link fails now. I'm guessing you mean https://github.com/callstack/haul/blob/master/docs/Configuration.md#customize-webpack-config?

[zamotany]

@JofBigHealth yes https://github.com/callstack/haul/blob/master/docs/Configuration.md#customize-webpack-config