[bug] HMR not reloading on change of app.css, works with other entry files

[responsemktg]

Agreement

• This is not a duplicate of an existing issue
• I have read the guidelines for Contributing to Roots Projects
• This is not a personal support request that should be posted on the Roots Discourse community

Describe the issue

When using bud-ass + custom entry points + transpiler sources. the HMR does not work for the app.css within the sage theme, but does work when using the scss file in my custom entry point.

Details regarding the transpiler and entry point found in post #1728

Expected Behavior

reload changes regardless of which file is changed

Actual Behavior

Sometimes nothing, sometimes a console error:

test.js:1567 Uncaught TypeError: Cannot set properties of undefined (setting './node_modules/css-loader/dist/cjs.js??css!./node_modules/postcss-loader/dist/cjs.js??postcss!./resources/styles/app.css')
    at self.webpackHotUpdatesage (test.js:1567:39)
    at app.1764c00a1e8f430d84d2.hot-update.js:10:29

Steps To Reproduce

1. Create a test folder in the root of the teme
2. Add a blank script.js and style.scss to the folder
3. Add the entry points for the test folder into the bud config
4. Add transpiler sources for the js/sass rules
5. run bun dev and edit the css/scss files

version

6.4.4

What package manager are you using?

npm

version

8.15.0

Logs

No response

Configuration

No response

Relevant .budfiles

No response

[responsemktg]

Some updated notes:
changing the order of the enqueue in setup.php seems to affect which file is hot reloaded.

eg: The following would listen to changes on the test bundle and reload

add_action('wp_enqueue_scripts', function () {
    bundle('app')->enqueue();
    bundle('test')->enqueue();
}, 100);

Whereas this only listens to changes on the app bundle

add_action('wp_enqueue_scripts', function () {
    bundle('test')->enqueue();
    bundle('app')->enqueue();
}, 100);

This may be a misunderstanding on my behalf - but it appears the HMR is only looking for the last registered bundle to reload - is this expected behavior?

[andriilive]

Hm is ur app.css valid? Or just a tailwind's default with some test classes added?

[responsemktg]

Hm is ur app.css valid? Or just a tailwind's default with some test classes added?

Yes, valid css. They both compile fine.

app.css:

body {
    background-color: black;
}

test.scss

$color: red;

body{
    color: $color;
}

[andriilive]

At ok, because now starter is shipped with app.css with tailwind imports, which is import only file. Was confused why my test css was ignored

[responsemktg]

To be clear, its loading both files , and compiling both files - the hot module reload is just only inserting the changes from the last file enqeued.

[kellymears]

this is a known thing with webpack (see webpack/webpack-dev-server#2792).

my recommendation is to limit yourself to an entrypoint per page load. that's really how it's designed to be used.

See example usage here: https://webpack.js.org/concepts/entry-points#multi-page-application. Note that the intent of that documentation is to show how to use multiple bundles so that they can be served on different pages. Not how to generate multiple bundles to be served on a single page.

Historically, the most common reason people do this is to conditionally load assets, but today you can do that really easily without messing around with build tooling:

const application = async () => {
  if (document.body.classList.has(`landing-page-special`)) {
    await import(`./conditional-script.js`)
  }
}

That said, you can still create a custom runtime for shared assets, if preferred.

For example:

export default async app => {
  app
    .entry({
      shared: ['@styles/page-a', '@styles/page-b'],
      
      [`page-a`]: {
        import: [`@scripts/page-a`],
        dependOn: [`shared`],
      },
          
      [`page-b`]: {
        import: [`@scripts/page-b`],
        dependOn: [`shared`],
      },
    })
} 

which would be enqueued like this:

add_action('wp_enqueue_scripts', function () {
    // always used
    bundle('shared')->enqueue();

    if (is_page('a')) {
        bundle('page-a')->enqueue();
    } else {
        bundle('page-b')->enqueue();
    }
});

In this example, both @styles/page-a and @styles/page-b will update when changed regardless of the current page.

[github-actions]

Message to comment on stale issues. If none provided, will not mark issues stale