Update webpack and other JS and make hot reloading work

[justin808]

We should update the JS packages to the latest and get hot reloading working again.

[Naaman-Saif]

Hi. I am looking into this.

[justin808]

@Naaman-Saif any news?

[waclock]

Couldn't this be fixed by just adding
'Access-Control-Allow-Origin': '*' wherever the client does the polling and requests for the reloaded asset? I'm not sure where this is in react_on_rails, but it's what they suggest here https://github.com/webpack/webpack-dev-server/blob/master/examples/api/simple/server.js

[waclock]

@justin808 please let me know if this is the case. I've got a project with everything working I believe, the only thing missing is that the client is not sending the CORS params in order to refresh the assets. It'd be great if I could help with this, however I don't know what I should edit in the react_on_rails library

[justin808]

@waclock The first step is just to update all the libraries to current. Then use the webpack-dev-server to serve assets. Then we can turn on hot reloading.

[waclock]

@justin808 I'm working on a custom project based on this project. I've updated all the libraries and the only thing I'm currently missing is the CORS which is not working I believe. Maybe if you could pinpoint to where I should update this on the react_on_rails gem, I can make a PR when I get everything working

[KenyStev]

I'll take a look on it to figure out

[justin808]

@KenyStev @waclock Any update?

[KenyStev]

I still can't figure out what's the problem when I update actioncable, It's the error window is undefined.
I know it is because server side render, but it was working before the update.
I will let actioncable outdated for the moment and continue with the others

[waclock]

@justin808 I have looked into this further, but sadly with no luck. I was trying to get WDSto connect but I keep getting [WDS] Disconnected! as the error. I've tried playing around with the setup of server-rails-hot.js, like so:

/* eslint no-var: 0, no-console: 0, import/no-extraneous-dependencies: 0 */

const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')


const { resolve } = require('path')

const webpackConfigLoader = require('react-on-rails/webpackConfigLoader')
const webpackConfig = require('./webpack.client.rails.hot.config')

const configPath = resolve('..', 'config')
const { output, settings } = webpackConfigLoader(configPath)

const hotReloadingUrl = output.publicPathWithHost
const hotReloadingPort = settings.dev_server.port
const hotReloadingHostname = settings.dev_server.host

const compiler = webpack(webpackConfig)
const devServer = new WebpackDevServer(compiler, {
  proxy: { '*': `http://${hotReloadingHostname}:${hotReloadingPort}` },
  publicPath: output.publicPathWithHost,
  historyApiFallback: true,
  open: true,
  // watchOptions: { aggregateTimeout: 300, poll: 1000 },
  headers: {
    Connection: 'keep-alive',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': '*',
  },
  clientLogLevel: 'info',
  watchOptions: { aggregateTimeout: 3000, poll: 1000 },
  disableHostCheck: true,
  hot: true,
  inline: true,
  quiet: false,
  noInfo: true,
  lazy: false,
  stats: {
    colors: true,
    hash: false,
    version: false,
    chunks: false,
    children: false,
  },
})

devServer.listen(hotReloadingPort, hotReloadingHostname, (err) => {
  if (err) console.error(err)
  console.log(
    `=> 🔥  Webpack development server is running on ${hotReloadingHostname}:${hotReloadingPort}`,
  )
})

compiler.plugin('done', () => {
  process.stdout.write('Webpack: Done!')
})

But still no luck. Also tried updating the webpacker.yml configuration, changing the "host" from localhost to 0.0.0.0, as now webpack is not resolving to 0.0.0.0 anymore. But even with all of this, I can't seem to get this to work.

For some reason, if I try going to the URL of WDS' app-bundle, it does resolve (i.e. http://localhost:3500/webpack/app-bundle-f7b19250bcf3e6647743.js resolves correctly and returns the JS with a 200 status code), but the info URL (i.e. http://localhost:3500/webpack/info?t=1550167873571) returns Error occured while trying to proxy to: localhost:3500/

I'm very interested in solving this, as my team works way slower without HMR.

[justin808]

If anybody would like to pair on this a bit, I'm available. Please email me and I'll send you a Slack invite.

[waclock]

Sure thing, I'll email you.

[NinjaAwesome]

I will email you, right now. # 111

[Judahmeek]

With the addition of react-hot-loader v4, HMR does work.

It seems that after a successful INFO request, all the other INFO requests get caught by Rack.

I'm not sure what the best solution to resolve that is, but it's just noise, not a fatal error.