Please clarify wether HMR should work in the new version #72

swernerx · 2018-06-05T13:43:33Z

I just want to figure out wether HMR should work with the newest version. I am using the newest version of both this plugin and webpack. It seems that CSS changes are correctly triggering HMR, but in the end nothing happens. This is the client-side log output:

｢hot｣ App updated. Recompiling src/components/card/Card.module.css
log.js:48 ｢hot｣ webpack: Compiling (<unnamed compiler>)
log.js:48 ｢hot｣ App Updated, Reloading Modules
log.js:48 ｢hot｣ Checking for updates to the bundle.
log.js:48 ｢hot｣ No Modules Updated.
log.js:48 ｢hot｣ App is up to date.

Re-loading the app manually works fine though.

This is my loader config for CSS files:

{
  test: /\.module\.(css|sss|pcss)$/,
  use: [
    extractCssLoader,
    "cache-loader",
    "thread-loader",
    {
      loader: "css-loader",
      options: {
        import: false,
        minimize: false,
        sourceMap: true
      }
    },
    {
      loader: "postcss-loader",
      options:{
        sourceMap: true
      }
    }
  ]
}

Any hints? Previously with mini-css-extract-plugin I used the style-loader during development. Is this also the way to go with this plugin?

The text was updated successfully, but these errors were encountered:

ScriptedAlchemy · 2018-06-05T14:15:44Z

Yes the app does does reload,can you send me your full webpack config? Also are you using webpack 4?

swernerx · 2018-06-05T14:33:06Z

I mean the idea with HMR is that it should not reload, right?

My Webpack config is somewhat generated.

My issue is that with the old approach of using "style-loader" in development HMR works as expected while when using this plugin it just doesn't seem to correctly trigger the required changes.

swernerx · 2018-06-05T14:38:17Z

Seems like Webpack itself is doing fine:

98% after emittingCompleted client bundle in 2.914s!
ℹ ｢hot｣: webpack: Compiling Done
ℹ ｢wdm｣: Version: webpack 4.11.0
Time: 13914ms
Built at: 05.06.2018 16:37:12
Entrypoint main = main-c29587bba029864b102d.css index.js main.ef57d98abc586b5abd48.hot-update.js
ℹ ｢wdm｣: Compiled successfully.

There seems to be a CSS file being generated. Looks like an issue with the client side.

ScriptedAlchemy · 2018-06-05T14:38:44Z

Ahh yeah I get it. Using something like webpack merge. So the main thing to enable hot, is that there’s some kind of ref in the entry point. Let me get on my computer and I’ll send you examples. If I had a consoles logged version of your webpack it would help. But I’ll send you what I have locally. Alternatively I can just add hot:true to the plugin

…

Sent from my iPhone

On Jun 5, 2018, at 10:33 AM, Sebastian Werner ***@***.***> wrote: I mean the idea with HMR is that it should not reload, right? My Webpack config is somewhat generated. My issue is that with the old approach of using "style-loader" in development HMR works as expected while when using this plugin it just doesn't seem to correctly trigger the required changes. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

ScriptedAlchemy · 2018-06-05T14:39:37Z

Are you trying to hash the css files? can’t hash them in development mode

…

Sent from my iPhone

On Jun 5, 2018, at 10:38 AM, Sebastian Werner ***@***.***> wrote: Seems like Webpack itself is doing fine: 98% after emittingCompleted client bundle in 2.914s! ℹ ｢hot｣: webpack: Compiling Done ℹ ｢wdm｣: Version: webpack 4.11.0 Time: 13914ms Built at: 05.06.2018 16:37:12 Entrypoint main = main-c29587bba029864b102d.css index.js main.ef57d98abc586b5abd48.hot-update.js ℹ ｢wdm｣: Compiled successfully. There seems to be a CSS file being generated. Looks like an issue with the client side. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

swernerx · 2018-06-05T14:39:39Z

Yep, it's Webpack v4.11.0 right now. Everything using latest versions.

ScriptedAlchemy · 2018-06-05T14:41:30Z

It would be helpful to see the entry config and what you pass to entries

…

Sent from my iPhone

On Jun 5, 2018, at 10:39 AM, Sebastian Werner ***@***.***> wrote: Yep, it's Webpack v4.11.0 right now. Everything using latest versions. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

swernerx · 2018-06-05T14:42:25Z

I do hash them I figure.

ScriptedAlchemy · 2018-06-05T14:42:43Z

I’m on my phone at the moment. But class check the build and see if there’s any console warnings that were thrown

swernerx · 2018-06-05T14:45:36Z

Hashing was clearly an issue, conceptually, but does not fix the issue when disabled.

New output:

ℹ ｢hot｣: webpack: Bundle Invalidated
ℹ ｢wdm｣: Compiling...
Building client bundle...
ℹ ｢hot｣: webpack: Compiling...
 98% after emittingCompleted client bundle in 2.881s!
ℹ ｢hot｣: webpack: Compiling Done
ℹ ｢wdm｣: Version: webpack 4.11.0
Time: 13881ms
Built at: 05.06.2018 16:44:22
Entrypoint main = main.css index.js main.0a655b4a95cd904b6410.hot-update.js
ℹ ｢wdm｣: Compiled successfully.

swernerx · 2018-06-05T14:47:29Z

Content of the transferred files:

{"h":"59574152234a740a3f28","c":{"main":true}}

webpackHotUpdate("main",[])

This seems to be a little too light.

swernerx · 2018-06-05T14:49:09Z

BTW I am using the new dev-server "webpack-serve". So no SSR in place right now.

swernerx · 2018-06-05T14:50:51Z

There are no warnings. It's really just not working. Webpack output itself looks fine.

ScriptedAlchemy · 2018-06-05T14:54:00Z

Okay, I think know the issue. Do you have a repo that I can fix it on? I think for your immediate relief, im going to add hot:true to the plugin part

swernerx · 2018-06-05T14:55:43Z

Sorry, it's in a private repo of a customer of mine. Can't really share that.

swernerx · 2018-06-05T14:56:13Z

I can hack into the code of your plugin though to try it out... if you give me an idea of where to look.

ScriptedAlchemy · 2018-06-05T14:56:33Z

No I fully understand! Give me a second and ill release a @next on npm which should resolve your issue

manjula-dube · 2018-06-05T14:58:14Z

hmr : true should solve this issue

ScriptedAlchemy · 2018-06-05T14:59:21Z

@manjula91 on the plugin or setting it in the webpack options?

ScriptedAlchemy · 2018-06-05T15:32:12Z

Okay guys Im testing a fix for this @manjula91 @swernerx

Try npm I extract-css-chunks-webpack-plugin@3.0.4-beta.1

How I currently expect things.

If you can send a snippet of were you define HOT, it will be very helpful!
Alternatively please tag me in anything you plan to release open source so I can automate it as well

  devServer: {
    contentBase: __dirname,
    hot: true,
  },

OR

    entry: {
        dev: './dev/javascript',
        index: [
            'webpack/hot/only-dev-server',
            `webpack-hot-middleware/client?path=${config.host}:${config.port}/__webpack_hmr`,
            './src/client/index.js'
        ]
    },

ScriptedAlchemy · 2018-06-05T15:36:43Z

Or npm I extract-css-chunks-webpack-plugin@next

Automatic detection seems to miss a few scenarios, as a last resort. You can now add hot:true fix #72

ScriptedAlchemy · 2018-06-05T15:42:51Z

@swernerx

Let me know fi this helps, im at work otherwise id dedicate full time to fix it. if you still have issues.

What I had was a conditional checking the the process.env.NODE_ENV === development

secondly I have a function that determines is you use HMR

However id either are false. it won't add. For the time being you can just add hot:true to the plugin
Ill leave that there but will also look at your specific plugin at check if I can automate the test as well

Might appreciate the patience

swernerx · 2018-06-06T07:28:03Z

Thanks. The new flag is fixing my issue.

greyivy · 2018-06-14T20:51:26Z

Still not working for me with hot: true, sadly. A hot update is triggered but it's empty:

webpackHotUpdate("main",[])

Using ^3.0.4-beta.1.

ScriptedAlchemy · 2018-06-15T15:49:43Z

Uninstall reinstall @latest it’s out of beta.

…

On Thu, Jun 14, 2018 at 4:51 PM Will Hauck ***@***.***> wrote: Still not working for me with hot: true, sadly. A hot update is triggered but it's empty: webpackHotUpdate("main",[]) Using ^3.0.4-beta.1. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#72 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYGpTGaSfwJBUJR4UEdExVH5TmBmZuGTks5t8szPgaJpZM4Ua2jd> .

greyivy · 2018-06-18T23:36:44Z

No luck on @latest unfortunately.

ScriptedAlchemy · 2018-06-18T23:39:22Z

@hauckwill if you can, throw me a repo and ill check it

greyivy · 2018-06-18T23:54:26Z

Unfortunately the full repo is not mine to share, but here's my webpack config:
https://gist.github.com/hauckwill/e3fe0fe3c508bbb0e8a32c17707262c1

Using "extract-css-chunks-webpack-plugin": "^3.0.5"

Really appreciate the help and the work you've put into this.

ScriptedAlchemy · 2018-06-19T02:36:31Z

@hauckwill Ping me on https://gitter.im/Reactlandia

It will be easier & faster for me to assist over a private IM

ScriptedAlchemy added a commit that referenced this issue Jun 5, 2018

fix: Adding manual param for enabeling hot

910b0e3

Automatic detection seems to miss a few scenarios, as a last resort. You can now add hot:true fix #72

ScriptedAlchemy self-assigned this Jun 5, 2018

ScriptedAlchemy mentioned this issue Jun 6, 2018

Manual HMR Option and updated Readme #73

Merged

ScriptedAlchemy closed this as completed in #73 Jun 6, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Please clarify wether HMR should work in the new version #72

Please clarify wether HMR should work in the new version #72

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

swernerx commented Jun 5, 2018

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018 via email

ScriptedAlchemy commented Jun 5, 2018 via email

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018 via email

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

swernerx commented Jun 5, 2018

swernerx commented Jun 5, 2018

swernerx commented Jun 5, 2018

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

swernerx commented Jun 5, 2018

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

manjula-dube commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

swernerx commented Jun 6, 2018

greyivy commented Jun 14, 2018

ScriptedAlchemy commented Jun 15, 2018 via email

greyivy commented Jun 18, 2018

ScriptedAlchemy commented Jun 18, 2018

greyivy commented Jun 18, 2018

ScriptedAlchemy commented Jun 19, 2018

Please clarify wether HMR should work in the new version #72

Please clarify wether HMR should work in the new version #72

Comments

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

swernerx commented Jun 5, 2018

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018 via email

ScriptedAlchemy commented Jun 5, 2018 via email

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018 via email

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

swernerx commented Jun 5, 2018

swernerx commented Jun 5, 2018

swernerx commented Jun 5, 2018

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

swernerx commented Jun 5, 2018

swernerx commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

manjula-dube commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

ScriptedAlchemy commented Jun 5, 2018

swernerx commented Jun 6, 2018

greyivy commented Jun 14, 2018

ScriptedAlchemy commented Jun 15, 2018 via email

greyivy commented Jun 18, 2018

ScriptedAlchemy commented Jun 18, 2018

greyivy commented Jun 18, 2018

ScriptedAlchemy commented Jun 19, 2018