After app refresh it got not updated bundle (cache?)

[Natteke]

Environment

MAC OS 10.14.6

"dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@haul-bundler/babel-preset-react-native": "^0.16.0",
    "@haul-bundler/preset-0.60": "^0.17.0",
    "@haul-bundler/cli": "^0.17.0",
    "@react-native-community/eslint-config": "^0.0.7",
    "babel-jest": "^25.1.0",
    "eslint": "^6.8.0",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.9.0"
  },

module.exports = {
  presets: ['module:@haul-bundler/babel-preset-react-native'],
};

import {withPolyfills, makeConfig} from '@haul-bundler/preset-0.60';

export default makeConfig({
  bundles: {
    index: {
      entry: withPolyfills('./index'),
    },
  },
});

Description

After launching app, changing code and refreshing it in simulator (cmd + r), nothing happens.
Looks like bundler always sends an initial bundle, and do not updating it.
If i kill bundle process and re-launch it, i will see an updated code.

Reproducible Demo

I have faced this issue with completely new project.

1. do react-native init App
2. install "haul" according to "Getting started" documentation
3. change App.js
4. press refresh

==================================

1. open simulator
   

2. change code

3. press refresh
   

Nothing...

5. kill process
   

6. Repeat
   

[zamotany]

Yup, something is wrong. It looks like it's not watching for changes.

[jgornick]

@zamotany Any chance you might be able to point me in the right direction so that I could try to figure out the issue?

[Natteke]

@zamotany, hi again!
Is there some workaround to use haul right now with react 61.5?
Looks like haul v16 does not work with it, so....

Can you suggest something how to work, till it is not fixed? :D

[zamotany]

@jgornick I suggest first to try downgrading to 0.15.0. There was huge dependency update, which might have broken it.

When I was testing it myself, it looked like the webpack wasn't picking up the changes to the file. Compiler status should changes from idle -> running -> idle but it never did. You can try adding some console logs here to see if the event was emitted from the compiler: https://github.com/callstack/haul/blob/master/packages/haul-core/src/server/Server.ts#L71 - it will be emitted initially for initial compilation and should for the rebuild as well. You can add console log here as well: https://github.com/callstack/haul/blob/master/packages/haul-core-legacy/src/compiler/worker/runWebpackCompiler.js#L198

[Natteke]

The problem was solved after creating custom babel config according to the recipe.
Now after saving file haul recompiles bundle, and after app refresh you see the changes without killing/reloading haul process.

@zamotany, @jgornick, i assume that the problem lies in default config.module.rules,
hope this will help in investigation.

At least we found workaround to develop with haul without a pain

export default makeConfig({
  bundles: {
    index: {
      entry: withPolyfills('./index.ts'),
      transform({ config }) {
        config.module.rules = [
          {
            test: /\.tsx?$/,
            exclude: '/node_modules/',
            use: [
              {
                loader: 'babel-loader',
              },
              {
                loader: 'ts-loader',
              }
            ]
          },
          ...config.module.rules,
        ];
      },
    },
  },
});

[zamotany]

Closing this issue. We've confirmed that this is no longer happening (at least with the default config).