Unhandled JS Exception: Can't find variable self

[sunnymopada]

When I run "npm run haul start -- --platform ios", It's loading 100% and says you are ready to run. But after installing app through xcode, It's showing error as in image. I don't know what am I missing, But it's working fine in other systems with same versions I mentioned below

Haul Configuration (webpack.haul.js)

module.exports = ({ platform }, { module, resolve }) => ({
  entry: `./index.${platform}.js`,
  module: {
    ...module,
    rules: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      ...module.rules
    ]
  },
  resolve: {
    ...resolve,
    extensions: ['.json', ...resolve.extensions]
  }
})

Your Environment

MAC

software	version
Haul	1.0.0-beta.7
react-native	0.48.4
node	8.7.0
npm or yarn	npm

[krizzu]

Hey @SanyasiraoM

This IP address (192.168.2.25.xio.io) looks very odd to me.
Can you show me the content of your /etc/hosts files? Might be that your localhost is mapped to something different than 127.0.0.1

Edit.
Looks like xip.io is a service for wildcard DNS. My bet is that you use this service for testing stuff on different devices, so I'd look into configuration to point it back to your localhost, because Haul serves files over the localhost, whatever that is mapped to

[sunnymopada]

@krizzu Thanks for reply,

Below is my /etc/hosts file

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1	localhost
255.255.255.255	broadcasthost
::1             localhost
  

[sunnymopada]

As suggested in facebook/react-native#12786, DISABLE_XIP also did not work for me

[krizzu]

Once you disable XIP, do you still get an address ip 192.168.2.25.xip.io in error message ?

[sunnymopada]

No @krizzu, I'm not getting. But still getting same error message without .xip.io

[zamotany]

Does is happen in iOS simulator or only on real device?

[sunnymopada]

@zamotany Real device

[zamotany]

It's hard to tell what might be causing this problem. I don't believe the issue is connected to installing app with xcode - I've done it multiple times without a red screen.
@SanyasiraoM Can you create a fresh project to see if the error is still being thrown?

[sunnymopada]

@zamotany Will try it

[remyrylan]

@SanyasiraoM did you ever get this resolved? I'm stuck with the same problem, and I'm curious if you discovered a solution.

[sunnymopada]

@zamotany No.

[remyrylan]

@SanyasiraoM I'm still completely stuck. I'll post the solution here if I figure it out.

[zamotany]

@SanyasiraoM @jrylan We have made few changes in latest versions of Haul, please update you projects and check if the issue is still happening.

[remyrylan]

@SanyasiraoM @zamotany I am using the latest release of everything, my solution was to use the following in my webpack.haul.js file:

module.exports = ({ platform }, defaultWebpackConfig) => {
  defaultWebpackConfig.output.globalObject = 'this'

  return {
    entry: `./index.js`
  }
}

This prevents Webpack from trying to use self and instead forces it to always use this for referencing globals, which is safer for web workers (Webpack is smart enough to define additional variables such as _this to handle scoping issues).

[zamotany]

@jrylan Hmm, interesting. Wondering if HMR still works with this change.

[zamotany]

This should not be an issue in @haul-bundler/cli.