Can't load production assets located in sub directory

[codepuncher]

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": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "admin": [
      "./scripts/admin.js"
    ],
    "tinymce/button": [
      "./scripts/tinymce/button.js",
      "./styles/tinymce/button.scss"
    ]
  },
  "publicPath": "/app/themes/sage",
  "devUrl": "https://project.test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

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.

Cheers

[codepuncher]

Updating this with my investigations as I go.

var_dump(asset_path('styles/main.css'));
var_dump(asset_path('styles/tinymce/button.css'));

returns

/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.

[alwaysblank]

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

[codepuncher]

{
# 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?

[alwaysblank]

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

[codepuncher]

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?

[alwaysblank]

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: https://github.com/roots/sage/blob/master/resources/assets/build/util/assetManifestsFormatter.js 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.

[codepuncher]

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

[codepuncher]

Submitted a PR to resolve it.