Brave browser opens blank when Browsersync starts

I set up my dev enviornment locally yesterday and I can pull up my http://domain.test site locally. I can also pull up http://localhost:3000 and see the theme. When I run yarn and then yarn start, it looks like it’s working (HTML Intejector is running], but I get 4 white browsersync windows. Can you tell me where to start to look to troubleshoot?

Maybe the blank windows are due to Brave browser. When I go to localhost:3000 from google chrome, it says connected to browsersycn in a popup, so maybe I’m good to move forward.

Does Brave’s console show any errors that you can share with us here?

I didn’t see any errors. In fact, the whole screen was white. There was no menu header or anything. The whole screen was white from top to bottom.

But in the browser console are there any errors? You can access it if you right click on the page and select “Inspect Element” or use the hotkey to open it (maybe F12?).


Brave must be Chromium-based so its Developer Tools are the identical to Chrome’s.

I tried F12 and there was no response. That key does work on other brave windows to bring up the dev tools.

Try going to a page that the dev tools works on, open them, and then, in the same tab, navigate to http://localhost:3000.

I can’t seem to reproduce the issue in Brave on Mac.

knowler, the test page comes up if I do it the way you said…manually navigate to localhost. It’s only when it auto launches the pages from the console that it comes up blank. Do you need a screencast?

1 Like

Wow, that’s so strange. I set Brave as the browser to use:

// resources/assets/build/webpack.config.watch.js

    // ...
    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
      advanced: {
        browserSync: {
          browser: 'brave',
        },
      },
    }),
    // ...

And I’m getting the same result as you:

I was able to replicate this on a non-Sage project that uses Browsersync so it isn’t a Sage specific issue. This seems like an issue with either Browsersync or Brave. Maybe take a look through the issues for people experiencing this same problem. If you don’t find an existing issue, submit one. I can do this as well if you are unable to. Let me know.

For now you can set the browser option to another browser or set the open option to false to prevent Browsersync from opening a window (you’d have to manually go to the address).

Perhaps not the best solution, but I found the issue on the Brave repo, and you can fix it by setting the Node environment variable to production (or anything but development) in the start script in package.json:

"scripts": {
  // ...
  "start": "NODE_ENV=production webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",
  // ...
}

Thanks for checking in on this, knowler. It’s not a huge deal for me, since I know I can close the windows and open a new one. I did a search in discourse.roots and didn’t see anything around this issue. I haven’t submitted any formal issues before. Would you mind submitting it and linking it here, so I can see how you did it?

1 Like

I just made a comment on the thread for the issue.

Just updated the topic’s title to reflect the issue we’ve narrowed it down to.

1 Like