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

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"
  }
}

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 20 (9 by maintainers)

Most upvoted comments

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

zamotany on Oct 9, 2019

two quick feedbacks:

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 🤔)
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

kelset on May 9, 2019

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;
  }
};

zamotany on Apr 17, 2019