Manual reload not working

[nicolas-goudry]

Hello,

I use hjs for several of my projects and it’s awesome!

However, I ran into a weird issue that I didn’t manage to solve on my own… HMR works like a charm, but when I manually reload the page (eg when I edit a component) everything is broken and I got a blank page with the following console message:

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

Here is my webpack.config.js:

var getConfig = require('hjs-webpack')
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var cssnext = require('postcss-cssnext')
var postcssImport = require('postcss-import')

var config = getConfig({
  in: 'src/index.js',
  out: 'dist',
  clearBeforeBuild: true
})

config.resolve.alias = {
  styles: path.join(__dirname, 'src/styles'),
  utils: path.join(__dirname, 'src/utils')
}
config.plugins.push(
  new HtmlWebpackPlugin({
    template: path.join(__dirname, 'src/index.html'),
    hash: false,
    favicon: path.join(__dirname, 'src/assets/favicon.ico'),
    filename: 'index.html',
    inject: 'body',
    minify: {
      collapseWhitespace: true
    }
  })
)
config.postcss = function (webpack) {
  return [
    postcssImport({ addDependencyTo: webpack }),
    cssnext({
      autoprefixer: {
        browsers: ['> 1%']
      },
      features: {
        colorGray: false,
        colorHwb: false,
        colorHexAlpha: false,
        colorRebeccapurple: false,
        initial: false
      }
    })
  ]
}

module.exports = config

I tried to add this:

if (process.env.NODE_ENV === 'development') {
  config.entry[0] = config.entry[0] + '?reload=true'
}

but it still won’t allow manual reload…

I also noticed this only happen when HMR happened at least once, when I launch hjs-dev-server for the first time, I can reload as much time as I want, but when I edit a component and it get hot reloaded, I can’t manually reload anymore…

Here is my index.js in case it can help:

import React from 'react'
import ReactDOM from 'react-dom'

import Console from './components/Console'
import 'styles/main.css'

ReactDOM.render(
  <Console />,
  document.getElementById('app')
)

I tried to wrap the rendering like this:

window.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Console />,
    document.getElementById('app')
  )
})

But it didn't work either…

Any idea about this? Is it related to hjs or react itself?

Thanks for all this great work btw!

[selbekk]

Seems like you found your answer in a different issue :) Closing this one.