CSS is not loaded when accessing WordPress Admin through the Bud dev server

[aksld]

Terms

• [X] I have read the guidelines for Contributing to Roots Projects
• [X] This request is not a duplicate of an existing issue
• [X] I have read the docs and followed them (if applicable)
• [X] I have seached the Roots Discourse for answers and followed them (if applicable)
• [X] This is not a personal support request that should be posted on the Roots Discourse community

Description

What's wrong?

I'm using bedrock + sage theme. Dev environment : lando (docker).

When accessing to http://gm.lndo.site all is working nice. But when accessing to http://localhost3000 i have no css and no js (see screenshoot).

What have you tried?

Use Sage without bedrock.

What insights have you gained?

When refreshing http://localhost:3000 i can see, quickly, an error in console : error : ERR_INVALID_URL : cannot sent headers after they are sent to the client.

Possible solutions

I don't know :(

Steps To Reproduce

1. composer create-project roots/bedrock
2. cd web/app/themes
3. composer create-project roots/sage your-theme-name dev-main
4. cd your-theme-name/
5. yarn
6. Edit bud.config.js with URL
7. yarn dev
8. Access to http://localhost:3000

Expected Behavior

Have css and js.

Actual Behavior

No css and no js.

Relevant Log Output

No response

Versions

Last version

[retlehs]

I'm using bedrock + sage theme.

it doesn't look like you are using sage yet tho

your screenshot is showing a wordpress installation screen — you'll need to install wordpress and activate sage prior to running yarn dev

[aksld]

Same problem after installing WP and activating theme (i have already did that but i missed to mention that)

.

[SergiArias]

@aksld I have the same console message and my config is loading correctly the css and js so I think it isn't related.

[aksld]

Do you have the last version of sage ?

Are you following these steps for installation :

1. composer create-project roots/bedrock
2. cd web/app/themes
3. composer create-project roots/sage your-theme-name dev-main
4. cd your-theme-name/
5. yarn
6. Edit bud.config.js with URL
7. yarn dev
8. Access to http://localhost:3000

I don't know if i miss something. With old version (Mix), i had no problem.

[SergiArias]

@aksld I'm not using bedrock, and I am on beta-2 instead of dev-main, but the rest is the same, and I have exactly the same error on my console although the css and js are loading correctly.

In fact, the CSS in this version is directly in while in yarn dev so it shouldn't load it anyway.

[retlehs]

@aksld i don't think we've heard of any other reports of this yet but that doesn't mean your issue isn't valid :eyes:

i don't have a lando environment setup right now. do you happen to have any other means of trying to reproduce with a different local env setup, like valet or trellis?

there's also some args you can pass to bud to help us debug better:

yarn bud dev --log --log.level vvvv --no-cache --no-dashboard

cc @kellymears

[aksld]

[server] [proxy] › ⬤  debug     [HPM] GET / -> http://bedrock.lndo.site/
TypeError [ERR_INVALID_URL]: Invalid URL
[your-theme-name] › ❯  Replacing 'http://bedrock.lndo.site(.*)?' with 'http://localhost:3000$1'
[server] [proxy] › ⬤  debug     [HPM] GET /app/themes/your-theme-name/public/app.js -> http://bedrock.lndo.site/
TypeError [ERR_INVALID_URL]: Invalid URL
[your-theme-name] › ❯  Replacing 'http://bedrock.lndo.site(.*)?' with 'http://localhost:3000$1'
[server] [proxy] › ⬤  debug     [HPM] GET /favicon.ico -> http://bedrock.lndo.site/
TypeError [ERR_INVALID_URL]: Invalid URL
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
[your-theme-name] › ❯  Replacing 'http://bedrock.lndo.site(.*)?' with 'http://localhost:3000$1'
[server] [proxy] › ⬤  debug     [HPM] GET /wp/wp-admin -> http://bedrock.lndo.site/
TypeError [ERR_INVALID_URL]: Invalid URL
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
[your-theme-name] › ❯  Replacing 'http://bedrock.lndo.site(.*)?' with 'http://localhost:3000$1'
[server] [proxy] › ⬤  debug     [HPM] GET /wp/wp-includes/css/dashicons.css?ver=5.8.2 -> http://bedrock.lndo.site/
TypeError [ERR_INVALID_URL]: Invalid URL
[server] [proxy] › ⬤  debug     [HPM] GET /wp/wp-includes/css/buttons.css?ver=5.8.2 -> http://bedrock.lndo.site/
TypeError [ERR_INVALID_URL]: Invalid URL
[server] [proxy] › ⬤  debug     [HPM] GET /wp/wp-admin/css/forms.css?ver=5.8.2 -> http://bedrock.lndo.site/
TypeError [ERR_INVALID_URL]: Invalid URL

Same problem with valet. I tried to change port of server, same error.

[nathanbrnrd]

Playing around with Sage 10. I have a similar issue with some styles not loading. The stylesheets coming from /wp-admin and /wp-includes are not loading while on localhost:3000 but are loading fine under my local domain name (basic MAMP server). It is due to the fact that the connection is proxied:

This could be problematic as the development would happen without the native WP styles.

So far the styles generated through Sage seem to be ok.

[knowler]

@aksld Is your Lando site using SSL? Because if you gave Bud the URL with just http:// that might be the problem.

[nathanbrnrd]

Could you try to log in through http://localhost:3000? I can log in while on my local dev server but when on http://localhost:3000.

Didn't find any reports for this kind of issue yet. Thx

[aksld]

Maybe it's because js is not loaded ? i can test in few hours.

[nathanbrnrd]

I tried it on the local custom url (LCU) with the javascript disabled and it still works. I presume that /wp-login.php does not require the js to log in. Logging in on my LCU sends back a 302 response status code but on http://localhost:3000, I receive a 200 status code.

Tried the same scenario on a sage 9 install and it is working properly

[knowler]

// this is a proxied connection for development. css is served from the js bundle.

Since there’s no JavaScript bundle for any admin page, that means that there’s nothing to inject the styles.

On another note, while I can see a few use cases for needing to be logged into WordPress on the proxied connection, it is not necessary to access WordPress Admin. In fact, I would recommend just using your normal development URL for accessing the Admin.

We will seek a fix for this since it does need to be fixed, however, I don’t see any point in wasting so much time trying to log in this way when you can just use your un-proxied development URL.

[knowler]

This issue has been fixed in Bud and we are just waiting for its next release.

[retlehs]

fixed as of bud v5.1.0 (#2952) with the latest acorn (#2953)