Skip to content

HMR Not working on latest #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
dmitrif opened this issue Aug 20, 2018 · 7 comments · Fixed by #102
Closed

HMR Not working on latest #98

dmitrif opened this issue Aug 20, 2018 · 7 comments · Fixed by #102

Comments

@dmitrif
Copy link

dmitrif commented Aug 20, 2018

Hi!

I yet again have yet to create a trimmed down example of the problem, but for now this is the issue.
We have HMR enabled (using the hot) parameter, however not seeing the hot-loader code being injected into any bundles. Therefore when an update is made, the style include is never reloaded.

What am I possibly missing?

Thanks.

@dmitrif
Copy link
Author

dmitrif commented Aug 20, 2018

Seems like the plugin has the following lines:

if (isHOT && compiler.options.module && compiler.options.module.rules) {
      const updatedRules = compiler.options.module.rules.reduce((rules, rule) => {
            if (rule.use && Array.isArray(rule.use)) {

However, when a console log is added, our compiler.options.module.rules looks like:

rules: [ { parser: [Object] }, { oneOf: [Array] } ]

This is due to how we are defining our loaders:

const jss = (isClient = true) => {
  const use = [];

  if (isClient) {
    const extractStyles = getExtractStyles();
    use.push(extractStyles.loader);
  }

  use.push({
    loader: require.resolve('@kijiji/jss-loader'),
    options: {
      localsOnly: !isClient,
      hot: !isClient && isDevMode,
      hashClassName: !isDevMode,
      plugins: [
        jssExtendPlugin,
        jssNestedPlugin,
        jssCamelCasePlugin,
        jssDefaultUnitPlugin,
        jssVendorPrefixerPlugin,
        jssRulePrefixerPlugin,
      ],
    },
  });

  use.push(getBabelLoader(isClient));

  return {
    test: /\.jss$/,
    exclude: [/node_modules\//],
    use,
  };
};

and then

rules: [
    disallowRequireEnsure,
    {
      oneOf: [jsx(), mjs, jss(), fonts, graphql, assets()],
    },
  ],```

@ScriptedAlchemy
Copy link
Collaborator

Hey, i see the issue here. Any chance you could make a small demo repo with your webpack config. or can you send me a stder output of your webpack JSON object.

Ill fix this but want to make sure i can see whats going on

Alternatively can you open a PR, seeing as you know the exact lines in my code that cause it to stop. IF you PR a working version, ill merge it! Otherwise ill need some more info from you

ScriptedAlchemy added a commit that referenced this issue Sep 1, 2018
When using oneOf, HRM is never activated. This patch improved the lookup system used for determining
if CSS can and should be reloaded. There have been some other tweaks for css modules and HMR

fix #98,#80
ScriptedAlchemy added a commit that referenced this issue Sep 1, 2018
When using oneOf, HRM is never activated. This patch improved the lookup system used for determining
if CSS can and should be reloaded. There have been some other tweaks for css modules and HMR

fix #98,#80
ScriptedAlchemy added a commit that referenced this issue Sep 1, 2018
When using oneOf, HRM is never activated. This patch improved the lookup system used for determining
if CSS can and should be reloaded. There have been some other tweaks for css modules and HMR

fix #98,#80
ScriptedAlchemy added a commit that referenced this issue Sep 1, 2018
When using oneOf, HRM is never activated. This patch improved the lookup system used for determining
if CSS can and should be reloaded. There have been some other tweaks for css modules and HMR

fix #98,#80
ScriptedAlchemy added a commit that referenced this issue Sep 1, 2018
When using oneOf, HRM is never activated. This patch improved the lookup system used for determining
if CSS can and should be reloaded. There have been some other tweaks for css modules and HMR

fix #98,#80
@dmitrif
Copy link
Author

dmitrif commented Sep 6, 2018

Damn, that's what I get for not checking github more often. Had a PR ready but seeing as you fixed it, thank you! <3

@dmitrif
Copy link
Author

dmitrif commented Sep 6, 2018

Although... I may still submit the PR since oneOf / use can be nested indefinitely from my understanding.

@ScriptedAlchemy
Copy link
Collaborator

Dude, if you can clean that up a bit --- ill totally accept the PR, thank you for working on it and i am sorry to have waisted your time.

Will gladly accept improvements to the plugin

@dmitrif
Copy link
Author

dmitrif commented Sep 6, 2018

#103 PR created :)

ScriptedAlchemy added a commit that referenced this issue Oct 23, 2018
* fix: Fixed HMR issue when oneOf is used

When using oneOf, HRM is never activated. This patch improved the lookup system used for determining
if CSS can and should be reloaded. There have been some other tweaks for css modules and HMR

fix #98,#80

* fix: Applying rollback fixes to updateWebpackConfig, search loader and use object keys

* fix: Adding back exported out hot loader

* docs(readme): Adding example of manual hotloader implementation

In the event users cannot get it to work, theres an example in the docs to reference

* fix: handle functions as loaders

Do not break when searching through `use` or `loader` that is a function

* fix(index.js): Support function loaders (#116)

* docs(readme): Tone of Voice clairification on what hot:true does (#113)

* fix(index.js): Support function loaders

updateWebpackConfig previously expected `use` entries to be strings or arrays, and would throw `needle.includes is not a function` errors when given a function that returns a loader object.

* Update README.md

* test: Fixing function-loader tests

* Add reloadAll and cssModules to typings (#115)

* docs(readme): Tone of Voice clairification on what hot:true does (#113)

* Add reloadAll and cssModules to typings
@faceyspacey
Copy link
Owner

🎉 This issue has been resolved in version 3.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants