Can't load production assets located in sub directory

I’ve had a look through Discourse but can’t find anything relating to this.

So, I’ve started writing a few TinyMCE plugins that I’m storing within Sage.

However, due to my directory structure asset_path() doesn’t load the files when I run yarn build:production. Building without production works fine. It’s almost like the cache busting feature doesn’t recognise the extra level of a directory being added.

My structure is like so:

# sage/resources/assets
├── scripts
│   └── tinymce
│       └── button.js
├── styles
│   └── tinymce
│       └── button.scss
└── config.json
# sage/resources/assets/config.json
  "entry": {
    "main": [
    "admin": [
    "tinymce/button": [
  "publicPath": "/app/themes/sage",
  "devUrl": "https://project.test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [

I can confirm the files exist:

Anyone got any ideas? I know I can just change my structure back to the root like main.js and main.css but it’s nice to keep things organised.


Updating this with my investigations as I go.



/home/user/Code/project/bedrock/web/app/themes/sage/app/setup.php:157:string 'https://project.test/app/themes/sage/dist/styles/main_3614e711.css' (length=79)
/home/user/Code/project/bedrock/web/app/themes/sage/app/setup.php:158:string 'https://project.test/app/themes/sage/dist/styles/tinymce/button.css' (length=80)

I am guessing this has some relation to resolving the cache busting affix.

What do the contents of dist/assets.json look like?

# normal assets
"tinymce/button.css": "styles/tinymce/button_3614e711.css",
"tinymce/button.js": "scripts/tinymce/button_3614e711.js",
# normal assets

Looking at that, it appears that the prefix of scripts and styles are missing. So looks like WebpackAssetsManifest isn’t building correctly?

The key for each row is what you need to pass to asset_path() I think. Try asset_path('tinymce/button.css')?

Yep, worked as expected. My TinyMCE files are now loaded.

So, since the tinymce directory is a child of scripts and styles that must mean that WebpackAssetsManifest is stripping it out or something?

I think a temp fix would be something like

add_filter('mce_external_plugins', function (array $plugin_array): array {
    $path_prefix = defined('WP_ENV') && 'development' !== WP_ENV ? 'tinymce' : 'scripts/tinymce';
    $plugin_array['app'] = asset_path("{$path_prefix}/app.js");
    $plugin_array['button'] = asset_path("{$path_prefix}/button.js");
    return $plugin_array;

Any ideas on how to further debug why dist/assets.json gets the wrong key?

I’m guessing this issue you’re running into is due to the way the asset manifest gets formatted during the build process. You can see how that happens here: The comments there suggest this was a temporary solution: If you wanted to submit a PR to improve it I’m sure we’d be more than happy to review it.


Thanks for the help mate. I’ll see what I can do for a PR. No promises, though!

Submitted a PR to resolve it.

1 Like

This topic was automatically closed after 42 days. New replies are no longer allowed.