Acorn changed my assets to incorrect path after install. Everything works except CSS/JS now have reference error

Derek_Scott · March 27, 2023, 10:46pm

First off, lemme say thank for building all these amazing tools! I have been slowly slogging through what has been essentially relearning wordpress development, and I’ve almost got everything setup.

Here is what I currently have installed

@roots/bud: "6.7.3"
@roots/sage: "6.7.3",
bootstrap: "^5.2.3"
roots/acorn: "^3.1"
php: "^8.0"
roots/wordpress: "6.1.1"
roots/bedrock-autoloader: "^1.0",
log1x/sage-svg: "^1.1",

So basically, Bedrock, Sage 10, Bud 3, Acorn 3, PHP 8, and Wordpress 6.1.

At first, I was using Bedrock and Sage 10, then I got Bud 3 working, which is AMAZING! I have used webpack a few other times and I’ve always hated it, so getting Bud 3 not only to work, but also allow me to have a app.css and static.css that is only loaded on the home page, was so slick.

Anyways, after I got a simple static home page almost working, I found that I really wanted to use the @svg directive in my blade templates. So I installed Acorn. If I had one complaint, its that the Acorn install documentation is kinda lacking, the one part just says use trellis (which I tried but had trouble getting that working on my mac, so Im still using the bedrock / acorn / sage served from apache locally)

Once Acorn was installed, I ran the WP CLI commands, and BOOM! My SVG’s started being inlined and everything was awesome. Except for this one problem…

Now my asset files, that used to be working, are no longer working. They are all pointing to an incorrect address.

// Previously Working 
http://blog.test/app/themes/sage/public/js/static.1a2870.js 

// After Acorn they are all pointing to incorrect address
http://blog.test/wp/app/themes/sage/public/js/static.1a2870.js

What do I need to do to make my site not reference the incorrect “/wp/” that acorn is now inserting into all my asset URLs? Im sure its a tiny config change? The blog is loading fine and everything, but none of my styles or js scripts are being loaded in.

If you all could let me know how to fix this I would really appreciate it. That seems to be the missing piece to having my dream wordpress setup. Everything else, asset generation, custom directives, everything, is working great, just that tiny change from acorn that I need to fix.

If there is more info that I need to post lemme know, I dont really have like, an error stack or anything, nothing is broken to speak of, its just adding in that incorrect path to the URLs.

Thanks!

ben · March 28, 2023, 2:44am

Thanks for the kind words! If you’re using Soil, you might be running into this bug:

github.com/roots/acorn

Bug: Optimized config causes CSS URL to be prefixed with `/wp`, breaking link

opened 10:15AM - 10 May 22 UTC

paulbrzeski

bug

### Terms - [X] I have read the [guidelines for Contributing to Roots Project…s](https://github.com/roots/.github/blob/master/CONTRIBUTING.md) - [X] This request is not a duplicate of an existing issue - [X] I have read the [docs](https://roots.io/docs/) and followed them (if applicable) - [X] I have seached the [Roots Discourse](https://discourse.roots.io/) for answers and followed them (if applicable) - [X] This is not a personal support request that should be posted on the [Roots Discourse](https://discourse.roots.io/) community ### Description #### What's wrong? When deploying a Sage 10 website, we have enabled `wp acorn optimize` as a build-after step in our fork of Trellis. After running this command, the site tries to load the css from https://lcl.website.com/wp/app/themes/sage-dir, instead of https://lcl.website.com/app/themes/sage-dir. #### What have you tried? - Reproduced the issue locally by running `wp acorn optimize` and getting the same result. - Extensive Googling, checked open/closed issues for Roots projects in the mix - Bud, Sage, Trellis and Acorn. Updated to latest Acorn to fix an initial issue with https which was resolved in 2.0.5 - Overriding the .env file to have a siteurl without /wp. When this is done, the `wp acorn optimize` command creates a config that works, but this wouldn't work with Bedrock afaik - Tried hand correcting the file generated by acorn in sage-dir/storage/framework/cache/config.php, but this doesn't change the result - Running composer install fixes it but I suspect just because it's clearing the cache folder - Prepending `/..` to the config/assets.php URL works but it creates ugly URLs which contain ` https://lcl.website.com/../wp/app/themes/sage-dir,` - Generated a working config.php by overriding .env file as before, ran a diff and all that was different was the "/wp" suffix for the Filesystems\Wordpress url & root values... but weirdly after switching back the URL and hand correcting this didn't change result. Did try regular `wp cache flush` but maybe there's another file based cache I'm not aware of? - Tried reverting to Roots\asset instead of Roots\bundle, having the same issues which led me to believe it may be upstream in WP itself or arising from the combination of software we are using - Did a bit of die(var_dump()) debugging within Roots\BundleContract, Roots\bundle, Roots\Asset, core WP Styles, wp_enqueue_styles and from all I can gather the caching of the config somehow triggers WP to choose the siteurl (which ends in `wp) for styles, even though it doesn't do so when cache hasn't been created and correcting that cache directly seems to not change anything. - Deleting the config.php file triggers the CSS to load and the URL is correct in the html, making me wonder if either the files presence or another setting within it is causing this issue - Tried https://github.com/roots/sage/issues/3031, changes a different setting and the file is still loaded from the wrong location - We are using a fork of Trellis and Bedrock as well as a Sage 10 beta2 which has been manually updated from an older beta. It's possible we missed something in the configuration changes between versions or something unique to our setup is causing this. I am mid setup for testing a non modified copy of Trellis\Bedrock\Sage but that's quite time consuming to setup so just wanted to get this bug report up first as it's possible I'll run out of time pursuing that before I get anywhere. - Checked multiple projects that are in Sage 10 beta1, Sage 10 beta2 and stable Sage 10 (10.1.6) - all have the same issue. All are using the same forks of Trellis and Bedrock #### What insights have you gained? - .env file setting of siteurl causes `wp acorn optimize` to work correctly but it's my understanding this will break things with Bedrock which requires /wp there. Also it works in a "live" way - if I generate the cached config and change the setting in env, it seems to use siteurl for stylesheets. If I don't cache configs, it's correctly using homeurl. - Deleting the config.php file allows css to load again but changing it by hand does not - This thread feels related https://discourse.roots.io/t/site-url-returning-wp/12270 #### Possible solutions - Open to suggestions :) #### Temporary workarounds - Omit `wp acorn optimize` from deployments, not sure how impacting this is on performance but it seemed minimal on first glance - Prefix the `/..` to assets.php, but this would be a last resort measure. Would almost rather just write our own script and link tags into the templates at that point. ### Steps To Reproduce 1. On a VM provisioned by Trellis 2. Setup a Bedrock website using Sage 10 3. Build frontend assets using Bud 4. Run `wp acorn optimize` to cache configs 5. Load the website in a browser and confirm CSS is not loading 6. Check CSS urls and confirm they contain `/wp/` after the public url of the site ### Expected Behavior - CSS to load - URLs generated by wp_enqueue_style to be consistent whether we have cached configs or not ### Actual Behavior CSS cannot load as the URLs are invalid. ### Relevant Log Output _No response_ ### Versions Acorn 2.0.5, Trellis 1.14.0, Sage 10 beta1,2 and 10.1.6, Bud 5.3.2, WP core 5.8.4, PHP 7.4, Ubuntu 20.04

Derek_Scott · March 28, 2023, 3:07am

Hey thanks!

That pointed me in the right direction of what is going on!

The only thing I could think, was because my site is using the /wp/ for stuff like /wp/wp-admin that it should also use the /wp/ for all my URLs, and I was clueless on how to go about correcting that, out side of something really hackey like sym linking a directory or who knows what sort of mess I would have created.

In any case, I now have all my JS and CSS being loaded, and the @SVG directive working, along side Bedrock & Sage 10 w/ Bud.js.

I can’t wait to get really get into some serious dev time now and really being able to code out the site originally dreamed up. I really do think what you all have done here is revolutionary for Wordpress. This is exactly what the project needs, not that AWFUL drag and drop theme builder. Ugh, I could go on a rant about that but I’ll save you, and instead just say Thanks again. I really was blown away by how much you’ve managed to Laravel-ify Wordpress is all the best ways. I really look forward to what else you release!