Roots Discourse

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

#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