Webpack on Multisite with subdomains continues reloading for JS changes

sage
,
1

Using the whole roots setup with Trellis, Bedrock and Sage I face the following issue while using WordPress Multisite with subdomains:

I set up a subsite with the subdomain sub.example.test and activated a specific sage theme for it. The config.json is as this:

{
  "entry": {
    "add-to-cart-variation": [
      "./scripts/util/add-to-cart-variation.js"
    ],
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/corporate",
  "devUrl": "http://sub.example.test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

Please note the "devUrl": "http://sub.example.test", used with the subdomain.
Webpack is working just fine in this set-up as it is updating the styles directly. But as soon as I start to edit a JS file Webpack continues updating the localhost:3000 browser every sec.
The following is returned in the console after very page load:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (main.css, line 0)
[Log] JQMIGRATE: Migrate is installed with logging active, version 1.4.1 (jquery-migrate.js, line 23)
[Warning] Ignored an update to unaccepted module 23 -> 20 -> 19 (main.js, line 2205)
[Warning] [HMR] The following modules couldn't be hot updated: (Full reload needed) (main.js, line 2278)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.
[Warning] [HMR]  - ./resources/assets/scripts/routes/common.js (main.js, line 2286)
[Warning] [HMR] Reloading page (main.js, line 2325)

I double checked the config above as mentioned in some topics in the forum here but I’m quite sure that everything is correct. ALSO if I activate the same theme on the main site at examples.test and do the JS edits there, the browser refreshes just once (as expected).

Another reason could be that I sometimes get the error Did not load script at 'http://example.test/app/themes/corporate/dist/scripts/main.js' because non script MIME types are not allowed when 'X-Content-Type: nosniff' is given. on the subdomain.

So after all those observations I’m quite lost as I’m not sure where the issue is.

Maybe someone has a useful idea or solution. :slight_smile:

Thanks and best regards,

Philipp

2

A couple of days later I’m still not able to solve this. I double checked that the site subdomain is listed in trellis/group_vars/development/wordpress_sites.yml. Any hint what could cause the issue with Webpack and subdomains is really appreciated.

3

Full disclosure, server config is not, let’s say, my specialty, but here are a couple things to consider:

  • IME issues w/ infinite reloads during dev are usually a result of mis-matched paths, specifically publicPath. I don’t really use multi-site, but you might look at where theme resources are being served from. If they’re being server from domain.com instead of sub.domain.com then the paths wouldn’t match (domain.com/app/themes/corporate vs sub.domain.com/app/themes/corporate).
  • The second error you mention that complains about MIME types seems like maybe (??) it could be an issue w/ CORS, so you might try something like this: https://stackoverflow.com/questions/20078246/set-up-nginx-to-allow-cross-domain-request-for-subdomain
4

Thanks for your feedback @alwaysblank.
It seems that you’re right. The issue seems to be that the assets are loaded from main page URL “example.com” but which running Webpack it should be even “localhost”.
Just started to test it with setting WP_HOME & WP_SITEURL different in application.php to use the current URL of the page opened:
define( 'WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] );
define( 'WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] );

The first test stops the reloading and even writing JS is not a nightmare anymore. I’ll test it a bit further and if I find new issues, I’ll get back here.

Thank you very much and best regards,

Philipp

1 Like
5

I’ve been fighting with this issue for a while and finally at one point figured out that problem is with path to .js files.
Basically your problem is that you are trying to load file from:

http://localhost/wp-content/themes/my-theme-folder-name/dist/scripts/main.js

but instead it should be:

http://localhost/my-wpms-sub-site/wp-content/themes/my-theme-folder-name/dist/scripts/main.js

Then HMR can’t find the file and it reloads because it thinks file is not generated yet…

  1. If your website is available on: ‘http://localhost/my-wpms-sub-site/’
    Then your it should be:

publicPath: “/my-wpmst-sub-site/wp-content/themes/my-theme-folder-name”,
devUrl": “http://localhost”,

  1. If you upload this theme then to a site which is not multisite the best thing would be to have 2 variables:

“publicPath”: “/my-wpmst-sub-site/wp-content/themes/my-theme-folder-name”,
“publicPathProduction”: “/wp-content/themes/my-theme-folder-name”,

Then in add to webpack config:

const distPath = config.env.production ? config.publicPathProduction : config.publicPath;

and in output part:

output: {
path: config.paths.dist,
publicPath: distPath,
filename: scripts/${assetsFilenames}.js,
},

6

I just started having this issue. I’m on a subdomain multisite and its been working great for weeks, then last week all the sudden it just started doing this redirect loop. When I run yarn start and first time the site loads fine and all of that, but when I make another js change the reload loop starts to happen. How/where can I even diagnose this?

In the past with other non-multisites, when this happens, I usually find that its been a cache issue of some sort and restarting the webpack does the trick. But in this case that’s not working. I currently have @philipp’s change in place but its also not working. It doesn’t seem to cause any hard either though. My config.json is below:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/site/",
  "devUrl": "http://siteloc",
  "proxyUrl": "http://localhost:3000",
  "open": false,
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
7

And… I figured it out. I started doing some debugging by doing a console.log of the module.exports object towards the end of assets/build/config.js and that’s when I saw that I had an extra / at the end of "publicPath"

Hope that helps anyone else!

1 Like