Bit: Hot reloading with node server and bit watch doesn't work properly

Created on 3 May 2019  路  4Comments  路  Source: teambit/bit

Expected Behavior

For hot reloading to work with bit watch and a node server

Actual Behavior

Hot reloading doesn't work

Steps to Reproduce the Problem

  1. I am using React boilerplate v4.0.0 https://github.com/react-boilerplate/react-boilerplate
  2. I didn't change any of the react boilerplate config, I just used bit to import a couple of components locally and then import them into my App.jsx file
  3. I then ran npm start and bit watch
  4. The hot reloading worked just for the first time I changed a file in the local copy of the components. From then on the browser didn't show any changes even though webpack and bit seemed to be detecting some of the changes

Specifications

  • Bit version: 14.1.0
  • Node version: 10.15.3
  • npm / yarn version: npm 6.4.1
  • Platform: windows
  • Bit compiler (include version): react 1.0.1
  • Bit tester (include version):
arewatch priorithigh typfeature

All 4 comments

First, I want to thank the bit team for the great support. Very responsive and helpful!

I've encountered this issue as well when trying to figure out how to modify sourced components in a separate app (to create custom behaviour).

I found this tutorial which explains that I have to build my sourced component every time I make a change. This is fairly time consuming.

It would be great if we could just modify the source (without the build step) and the app would rebundle automatically.

Thanks :) we try to be as responsive as we can!

You can use the bit watch command. It triggers a build step whenever a change is saved to a tracked file.

Just to add some more technical explanation:
When you run bit watch it will re-build your components once changed.
However, most of the time you will require your components via an absolute path (aka @bit/my-component). which means you require them from the node_modules even though they are in your src folder. this means that webpack won't watch for those changes (since it's usually doesn't watch the node_modules dir).
We plan to solve this (I'm not sure exactly how. maybe we will write a webpack plugin for example).
meantime you can use relative require to the component so webpack will change it. (but it's better to later make it absolute in the end since it has few advantages).
Another option is to change the webpack config to watch also node_modules/@bit path

bit-watch has been rewritten for upcoming release and alongside we resolved this issue. closing.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nsams picture nsams  路  12Comments

viiralt picture viiralt  路  11Comments

jimmi-joensson picture jimmi-joensson  路  14Comments

rap0so picture rap0so  路  13Comments

ranm8 picture ranm8  路  16Comments