Roots Discourse

Sage 9 + BrowserSync not loading any CSS at all on 'yarn run start'

#10

I also see a rebuild message webpack built [some hash] in ms directly in browser (browsersync proxied) after saving a file modification, but nothing changes in browser.

1 Like

#11

I think we’re having different issues - modified views (.blade.php files) get injected for me, but styles don’t - not when yarn start is run, and not when files are modified.

EDIT: I misunderstood the above post, lol. When I save SCSS files, everything properly recompiles and I get the same ‘webpack built…’ message, but the CSS still isn’t injected and everything remains unstyled.

1 Like

#12

Yes, indeed, styles are not injected for me, too.
Which is indeed the biggest issue because usually I work on them most of the time.

0 Likes

#13

Just for ha-has, have you tried force-refreshing a few times after seeing a recompile message? Like I said, I see this sometimes but a force-refresh usually kicks it into gear.

1 Like

#14

Yes, I have. Everything remains unstyled.

1 Like

#15

Me, too. Restarted the browser, incognito mode, cleared everything, used different browser, etc.
Saving a stylesheet results indeed in an automatic rebuild, I even see stylelint errors in browser. But the styles themselves aren’t applied to the page.

Edit: I am running the watch script on WSL/Bash on Windows, with native file system watching.

1 Like

#16

Edit: I am running the watch script on WSL/Bash on Windows, with native file system watching.

So am I! Looks like we found a common reason this could be not working. Hmmmmmmmm…

1 Like

#17

I get this problem regularly, where the .test site doesn’t get the CSS for a long time.

And a (likely) related problem where the BrowserSync CSS doesn’t update when changes are saved.

In both cases I need to hard-reload over and over to see updates.

2 Likes

Sage 8 legacy sites and Bootstrap 4 stable version
#18

Got the same problem over here. Using a .local address an Google Chrome.

0 Likes

#19

Sage 9 issues during yarn run start usually mean that your publicPath and/or devUrl in resources/assets/config.json are incorrect

Can anyone confirm that this happens on a completely unmodified version of Sage 9 with the proper publicPath and devUrl?

If you’ve already made changes to your styles or JS, it’s possible you’re hitting a linting error that isn’t being shown

0 Likes

#20

Would be interested to see if this fixes for others. Think there’s an issue with the JS loading, and that manifests in not loading the CSS updates.

Try adding "headers": { "Access-Control-Allow-Origin": "*" }, to config.json

That appears to be fixing it here now. The page will still load with no assets/js/css at first, but after a reload or two it all works.

Also: make sure you your proxyUrl is secure with https as well.

Have tested the above on a fresh install. Was able to duplicate my problem and then fix it with the above.

2 Likes

#21

I had the same issue. yarn run start didn’t compile to dist/styles.
I had removed @php(wp_footer()) in app.blade.php by accident and by reverting this webpack started to work again.

1 Like

#23

I solved it. It’s so stupid, oh my god.

So because my design doesn’t actually have a footer element, I never bothered to add any of the footer code to my page. But wp_footer() isn’t a footer element, it’s how WordPress injects javascript files to the bottom of your body.

So I added it. And it fixed the whole problem - it works flawlessly now. God, I feel dumb.

Hopefully this helps someone else, too - I’m probably the only one to make this mistake considering how obvious it is but maybe not ¯\_(ツ)_/¯

0 Likes

#24

The theme still got the wp_footer(), so this isn’t the issue in my case.

I noticed that in console the following is logged on a (failed) hot-reload (after saving source styles):

Failed to load http://localhost:3000/app/themes/the-theme/dist/57efeac3e396fa2f9996.hot-update.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.8.101:3000' is therefore not allowed access.

Uncaught (in promise) Error: Manifest request to http://localhost:3000/app/themes/the-theme/dist/57efeac3e396fa2f9996.hot-update.json timed out.
    at XMLHttpRequest.request.onreadystatechange (bootstrap 57efeac3e396fa2f9996:38)

@Simeon: I added the

"headers": { "Access-Control-Allow-Origin": "*" },

to config.json, as top level field. – Am I still missing something here?

0 Likes

Sage 9 + webpack
#25

Yeah it’s not a perfect fix. Occasionally I’ll check the inspector and it’ll say it can’t find the main.js file at all, but then if you try and access it directly it loads, and then the site does as well.

0 Likes

#26

@Simeon:
Edit: According to author BrowserSync has to be configured with advanced key:

    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
      advanced: {
        browserSync: {
          cors: true,
        },
      },
    }),

Related issues:


1 Like

XMLHttpRequest cannot load hot-update.json due to access control checks
CORS header Browsersync issue
Webpack sync is not working
Browsersync not syncing
#27

So the question is: Why do some of us need cors enabled?
Would it make sense to add this to the official sage9 config?

0 Likes

#28

Same issue here. This should definitely be in the default config since it’s required to work.

1 Like

#29

This is definitely not required to work by default for everyone. This is definitely related to your local development webserver setup.

Closing this thread as it hasn’t been related to the solution posted since someone else posted with an unrelated issue.

0 Likes

closed #30
0 Likes