HMR not working with PascalCase class name

bud
1

Hello, Root community,

I’ve encountered a peculiar issue in my development environment where Hot Module Replacement (HMR) seems to falter when dealing with JavaScript classes that start with an uppercase letter.

Here’s a brief overview:

  • Environment: I’m currently building a setup that leverages Sage10 with bud.js for a more streamlined configuration. My project involves using ES6 classes extensively for structuring JavaScript functionality.
  • Issue Description: Recently, I noticed that HMR doesn’t trigger as expected for some of my classes. After some experimentation, it appeared that the issue correlates with classes whose names start with an uppercase letter. To illustrate, a class named PrimaryMenu does not hot reload upon modifications, whereas renaming it to primaryMenu seemingly resolves the HMR issue.

Despite these efforts, the issue persists, which leads me to wonder if there’s a nuanced interaction at play here that I’m missing.

PrimaryMenu.js:

export default class PrimaryMenu {
    // This do not trigger webpackHot.accept
}

export default class primaryMenu {
    // This trigger webpackHot.accept
}

export default class _PrimaryMenu {
    // This trigger webpackHot.accept
}

Package.json (dev dependencies):

  "devDependencies": {
    "@roots/bud": "6.20.0",
    "@roots/bud-sass": "^6.20.0",
    "@roots/bud-tailwindcss": "6.20.0",
    "@roots/sage": "6.20.0",
    "node-sass-glob-importer": "^5.3.3"
  },

app.js:

import PrimaryMenu from './modules/PrimaryMenu';
// ....
if (import.meta.webpackHot){
    console.log('HMR enabled');
    import.meta.webpackHot.accept('./modules/PrimaryMenu', async () => {
        console.log('PrimaryMenu module updated');
    });
}

I’m reaching out to the community for insights or solutions that might have been overlooked. Has anyone encountered a similar issue or can offer advice on ensuring HMR works seamlessly across all class naming conventions? Any guidance or recommendations would be greatly appreciated.

Thank you in advance for your time and help!