Working HMR / React Refresh Example

[parisholley]

#2133 #581

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

:memo: Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[parisholley]

@googlebot I signed it!

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[alexeagle]

@parisholley can you get this green so it's mergeable?

[UebelAndre]

Friendly ping here 😅

[dzintars]

Ping :)

[UebelAndre]

Another ping 😅

[github-actions[bot]]

This Pull Request has been automatically marked as stale because it has not had any activity for 90 days. It will be closed if no further activity occurs in two weeks. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[github-actions[bot]]

This PR was automatically closed because it went two weeks without a reply since it was labeled "Can Close?"

[sbussard]

This is amazing work @parisholley, thanks for trying. I know the maintainer list has shuffled around a bit.

[alexeagle]

@sbussard thanks for pinging this one, do you have time to rebase and get it green?

[sbussard]

Will try to get approval to do this

[supercairos]

Damn this is hot 🔥

[sbussard-google]

Picking this up

[sbussard-google]

HMR no longer works when upgrading to the latest bazel version and npm dependencies. I believe it has to do with the way symlinks are created and handled by bazel prior to starting webpack-dev-server.

It appears to work partially when using ibazel, however the behavior is different:

• When running the bazel command, the webpack server is launched, and it injects a javascript snippet into the react app which maintains a connection to the dev server.
• If the connection is broken, the web page attempts to reconnect.
• If you change a file, ibazel restarts the development server. If a page is open in the browser it will connect once the server starts again, and it will display the new content. This is not true hotloading, it is much slower.

I can contribute such an example here. It may be useful, but it is a bit misleading.

What I recommend is to investigate what it would take to create some sort of adapter between ibazel and webpack-dev-server, perhaps a macro like concatjs_devserver (formerly known as ts_devserver)

Here are some places to start with that: https://github.com/bazelbuild/rules_nodejs/blob/stable/packages/concatjs/devserver/concatjs_devserver.bzl https://github.com/bazelbuild/rules_nodejs/tree/stable/e2e/concatjs_devserver

If this is not correct, or if anyone else has something to contribute here, please do. Otherwise, I'll try to come back to this if I get some time.

[sbussard]

I found some interesting related issues: https://github.com/dataform-co/dataform/pull/1006/files https://github.com/webpack/webpack-dev-server/issues/3121

webpack ^5.69.1 webpack-cli ^4.9.2 webpack-dev-server ^4.7.4

webpack.config.js

const path = require('path');
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  entry: {
    main: './src/index.tsx',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        include: path.join(__dirname, 'src'),
        use: [
          isDevelopment && {
            loader: 'babel-loader',
            options: { plugins: ['react-refresh/babel'] },
          },
          'ts-loader',
        ].filter(Boolean),
      },
    ],
  },
  devServer: {
    onAfterSetupMiddleware: (devServer) => {
      // Listen to STDIN, which is written to by ibazel to tell it to reload.
      // Must check the message so we only bundle after a successful build completes.
      process.stdin.on('data', (data) => {
        const { clients } = devServer.webSocketServer;
        if (String(data).includes('IBAZEL_BUILD_COMPLETED SUCCESS')) {
          devServer.sendMessage(clients, 'content-changed');
        }
      });
    },
  },
  plugins: [
    isDevelopment && new ReactRefreshPlugin(),
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './public/index.html',
    }),
  ].filter(Boolean),
  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
  },
};

BUILD

load("@npm//webpack-dev-server:index.bzl", "webpack_dev_server")

webpack_dev_server(
   name = "server",
   args = [
       "--hot",
       "--live-reload",
       "--config webpack.config.js",
   ],
   data = [
       "public/index.html",
       "src/index.tsx",
       "tsconfig.json",
       "webpack.config.js",
   ],
   tags = [
       "ibazel_notify_changes",
   ],
)

It looks like ibazel tells the browser to update the content but it still shows the old version. Any ideas why?

[github-actions[bot]]

This Pull Request has been automatically marked as stale because it has not had any activity for 6 months. It will be closed if no further activity occurs in 30 days. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[github-actions[bot]]

This PR was automatically closed because it went 30 days without any activity since it was labeled "Can Close?"

[alexeagle]

This feature is now available in rules_webpack using the new js_run_devserver rule