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

sage
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 ¯\_(ツ)_/¯

2 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?

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.

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

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.