Plugin could not be registered at 'described-resolve'. Hook was not found.

[thiphariel]

Hi !

I tried this plugin as I said on the react-jss repo. I first tried your fix/hmr branch on the main repo and it works flawlessly.

I revert to the master branch and added this plugin to my webpack config, but it seems not working with webpack-dev-server Here is the stack :

Error: Plugin could not be registered at 'described-resolve'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity l
ayer for this hook, hook into 'this._pluginCompat'.
    at Compiler.plugin (/Users/thomas/Dev/react-ssr/node_modules/tapable/lib/Tapable.js:63:9)
    at Compiler.deprecated [as plugin] (internal/util.js:70:15)
    at ReactJssHmrPlugin.apply (/Users/thomas/Dev/react-ssr/node_modules/react-jss-hmr/lib/ReactJssHmrPlugin.js:39:16)
    at webpack (/Users/thomas/Dev/react-ssr/node_modules/webpack/lib/webpack.js:37:12)
    at startDevServer (/Users/thomas/Dev/react-ssr/node_modules/webpack-dev-server/bin/webpack-dev-server.js:379:16)
    at portfinder.getPort (/Users/thomas/Dev/react-ssr/node_modules/webpack-dev-server/bin/webpack-dev-server.js:369:5)
    at /Users/thomas/Dev/react-ssr/node_modules/portfinder/lib/portfinder.js:160:14
    at /Users/thomas/Dev/react-ssr/node_modules/async/lib/async.js:52:16
    at /Users/thomas/Dev/react-ssr/node_modules/async/lib/async.js:269:32
    at /Users/thomas/Dev/react-ssr/node_modules/async/lib/async.js:44:16
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-ssr@1.0.0 dev:client: `webpack-dev-server --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-ssr@1.0.0 dev:client script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/thomas/.npm/_logs/2018-07-10T07_07_21_439Z-debug.log
ERROR: "dev:client" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-ssr@1.0.0 dev: `npm-run-all --parallel dev:*`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-ssr@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Here is my webpack.config.js:

const path = require("path")
const HtmlWebPackPlugin = require("html-webpack-plugin")
const ReactJssHmrPlugin = require("react-jss-hmr/webpack")

module.exports = {
  entry: "./src/client/client.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname),
    filename: "bundle.js"
  },
  devServer: {
    overlay: true,
    proxy: {
      "/api": {
        target: "http://localhost:3000"
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/client/index.html"
    }),
    new ReactJssHmrPlugin()
  ]
}

and my npm scripts

"scripts": {
    "dev:server": "nodemon src/server/server.js",
    "dev:client": "webpack-dev-server --hot",
    "dev": "npm-run-all --parallel dev:*"
  }

Any tips ?

[HenriBeck]

Which webpack version are you using? Might be the webpack version as v4 did some breaking changes to plugins as far as I know.

[thiphariel]

I'm using webpack v4 yup :

"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"

Should I use webpack@3.x ?

[felthy]

As a user, I’ve been testing with webpack 3.12.0 because that’s what create-react-app gave me. However this project itself is using webpack 4 and I did initially write a webpack 4 version of this plugin but that didn’t work with webpack 3. I had hoped it would be compatible. 🙁

Maybe I need to bundle two separate webpack plugins here. I’ll look into it.

[thiphariel]

I'll try to downgrade to webpack 3, I'll have some change to do to my config and maybe downgrade some others plugins to. I'll come back to you soon :)

[thiphariel]

Ok, so I downgrade to webpack 3, webpack-dev-server 2, and it's ok, my dev server running up again. Buuuuuuut ...

Styles don't reload when editing my React component :(

Here is my component

import React, { Component } from "react"
import { hot } from "react-hot-loader"
import withStyles from "react-jss"

const styles = {
  container: {
    background: "red"
  }
}

class App extends Component {

  ... bla bla bla ...

  render() {
    const { classes } = this.props
    const { loading, text } = this.state

    return (
      <div className={classes.container}>
        Hello world !
        {loading ? (
          <div> Fetching data ...</div>
        ) : (
          <div>Text from API : {text}</div>
        )}
      </div>
    )
  }
}

export default hot(module)(withStyles(styles)(App))

Edit : As I said, it's working great with the branch fix/hmr on react-jss repo

[felthy]

I just finished a quick upgrade of my CRA-based app to webpack 4.15.1 (and webpack-dev-server 3.1.4) and actually it worked ok, I didn’t get the BREAKING CHANGE error and hot reloading does work.

I noticed you don’t have plugins: ['react-hot-loader/babel'] in your webpack config - I tried deleting it from mine and I get errors in the browser console during hmr.

Is there any way you could provide a cut-down sample that I can test?

[thiphariel]

I have it in my .babelrc

{
  "presets": ["env", "react"],
  "plugins": ["transform-class-properties", "react-hot-loader/babel"]
}

EDIT : I'll push the sample code to github, give me a minute, I have to rollback to the webpack 4. I'll give you that in about 30min sorry !

[thiphariel]

Here you go @felthy : https://github.com/thiphariel/react-jss-hmr-bug

Sorry for the delay.

Just npm i and npm run dev to get the error

[felthy]

Thanks @thiphariel! I think the problem is that you added the plugin to the main webpack plugins section, not as a resolver plugin. I’ll add an extra note about that in the README. I sorry I didn’t notice the problem when you posted your config earlier!

To fix, add a new section to the config:

    resolve: {
        plugins: [
            new ReactJssHmrPlugin(),
        ],
    },

and remove the plugin from the other place.

[thiphariel]

Nice catch ! It works great, thanks :)

Closed

[HenriBeck]

Okay so this works and we could move that to the cssinjs org?

[thiphariel]

I confirm that is working great with webpack 4, webpack-dev-server 3, react-jss 8.6.1