Browser Sync does not load - white screen with Webpack / Wordpress

[irenehardy]

Issue details

Running browser-sync via webpack for a Wordpress plugin. Everything compiles fine, but the proxied browser-sync window just opens a white screen that hangs on loading infinitely. No source code, no console information. Happens both via webpack, and in the command line directly calling browser-sync with the proxy url.

Please specify which version of Browsersync, node and npm you're running

• Browsersync [ 2.27.11 ]
• Node [ 18.13.0 ]
• Npm [ 8.19.3 ]

Affected platforms

• linux
• windows
• [ x ] OS X
• freebsd
• solaris
• other (please specify which)

Browsersync use-case

• API
• Gulp
• Grunt
• [ x ] CLI
• [ x ] Webpack

If CLI, please paste the entire command below

browser-sync https://[[redacted]].test

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

Webpack config -

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var path = require('path');

const jsPath= './public/js';
const cssPath = './public/scss';
const outputPath = './public/dist';
const localDomain = 'https://[[redacted]].test/';
const entryPoints = {
  'app': jsPath + '/scripts.js',
};

module.exports = {
  entry: entryPoints,
  output: {
    path: path.resolve(__dirname, outputPath),
    filename: '[name].js',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),

    new BrowserSyncPlugin({
        proxy:  {
            target: localDomain,
            },
        host: '127.0.0.1',
        files: [ outputPath + '/*.css' ],
        injectCss: true
    }, 
    { reload: false, }),
  ],
  module: {
    rules: [
      {
        test: /\.s?[c]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.sass$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: { indentedSyntax: true },
            },
          },
        ],
      },
      {
        test: /\.(jpg|jpeg|png|gif|woff|woff2|eot|ttf|svg)$/i,
        use: 'url-loader?limit=1024',
      },
    ]
  },
};

[DeoThemes]

I'm having the same issue. Have you managed to resolve?

[irenehardy]

Yes and no. LocalWP advised against using SSL with browser sync, so I was able to get it working with a non-secure local version of the site. I still would love to resolve it, because it used to be no trouble using SSL in proxy mode, but works well enough for the time being.

[jm-byteberry]

Same issue here also using macOS. It used to work for me until now. I guess something I've recently updated broke the compatibility. The only way I can make it work is using http instead of https.