Fast refresh not working properly

[marcoluzi]

Describe the bug

I am trying to use fast refresh but I struggle to set it up properly.

This is the error message I get in the console: WebSocket connection to 'wss://127.0.0.1:8000/ws' failed The service is trying to reconnecte regurarely with no success.

I am using Laravel Valet to serve my site. Laravel Valet uses .test domains, so devUrl should not be neccessary.

I cheked all points in the "Troubleshoot" Section in the README file.

The theme I use is mostly identical to the 10up wp-scaffold with some custom additions and tweaks.

Steps to Reproduce

1. Use Laravel Valet
2. Run 10up-toolkit with --hot flag

Screenshots, screen recording, code snippet

Environment information

• Device: MacBook Pro 2021
• OS: macOS 12.6.5
• Browser: Brave Version 1.51.110 Chromium: 113.0.5672.77

WordPress information

WordPress Information

### wp-core ### version: 6.2 site_language: en_US user_language: en_US timezone: Europe/Zurich permalink: /%postname%/ https_status: true multisite: false user_registration: 0 blog_public: 0 default_comment_status: undefined environment_type: production user_count: 1 dotorg_communication: true ### wp-paths-sizes ### wordpress_path: /Users/marco/repos/valet/lumiere-starter-theme wordpress_size: 223.66 MB (234519555 bytes) uploads_path: /Users/marco/repos/valet/lumiere-starter-theme/wp-content/uploads uploads_size: 375.60 KB (384614 bytes) themes_path: /Users/marco/repos/valet/lumiere-starter-theme/wp-content/themes themes_size: 520.77 MB (546062729 bytes) plugins_path: /Users/marco/repos/valet/lumiere-starter-theme/wp-content/plugins plugins_size: 46.68 MB (48947595 bytes) database_size: 6.20 MB (6504448 bytes) total_size: 797.67 MB (836418941 bytes) ### wp-active-theme ### name: Lumiere Theme (lumiere-starter-theme) version: 3.2.0 author: Marco Luzi author_website: (undefined) parent_theme: none theme_features: widgets-block-editor, automatic-feed-links, title-tag, post-thumbnails, editor-styles, html5, editor-style, menus theme_path: /Users/marco/repos/valet/lumiere-starter-theme/wp-content/themes/lumiere-starter-theme auto_update: Disabled ### wp-themes-inactive (3) ### Twenty Twenty-One: version: 1.8, author: the WordPress team, Auto-updates disabled Twenty Twenty-Three: version: 1.1, author: the WordPress team, Auto-updates disabled Twenty Twenty-Two: version: 1.4, author: the WordPress team, Auto-updates disabled ### wp-plugins-active (6) ### Advanced Custom Fields PRO: version: 6.1.3, author: WP Engine (latest version: 6.1.6), Auto-updates disabled Ghost Kit: version: 2.25.0, author: Ghost Kit Team, Auto-updates disabled Loco Translate: version: 2.6.4, author: Tim Whitlock, Auto-updates disabled Safe SVG: version: 2.0.3, author: 10up (latest version: 2.1.1), Auto-updates disabled Simple Custom Post Order: version: 2.5.6, author: Colorlib, Auto-updates disabled Yoast SEO: version: 20.4, author: Team Yoast (latest version: 20.6), Auto-updates disabled ### wp-media ### image_editor: WP_Image_Editor_GD imagick_module_version: Not available imagemagick_version: Not available imagick_version: Not available file_uploads: File uploads is turned off post_max_size: 512M upload_max_filesize: 512M max_effective_size: 512 MB max_file_uploads: 20 gd_version: 2.3.3 gd_formats: GIF, JPEG, PNG, WebP, BMP, AVIF, XPM ghostscript_version: not available ### wp-server ### server_architecture: Darwin 21.6.0 arm64 httpd_software: nginx/1.23.4 php_version: 8.1.18 64bit php_sapi: fpm-fcgi max_input_variables: 1000 time_limit: 30 memory_limit: 512M max_input_time: 60 upload_max_filesize: 512M php_post_max_size: 512M curl_version: 8.0.1 (SecureTransport) OpenSSL/1.1.1t suhosin: false imagick_availability: false pretty_permalinks: true ### wp-database ### extension: mysqli server_version: 10.11.2-MariaDB client_version: mysqlnd 8.1.18 max_allowed_packet: 16777216 max_connections: 151 ### wp-constants ### WP_HOME: undefined WP_SITEURL: undefined WP_CONTENT_DIR: /Users/marco/repos/valet/lumiere-starter-theme/wp-content WP_PLUGIN_DIR: /Users/marco/repos/valet/lumiere-starter-theme/wp-content/plugins WP_MEMORY_LIMIT: 40M WP_MAX_MEMORY_LIMIT: 512M WP_DEBUG: true WP_DEBUG_DISPLAY: false WP_DEBUG_LOG: true SCRIPT_DEBUG: true WP_CACHE: false CONCATENATE_SCRIPTS: undefined COMPRESS_SCRIPTS: undefined COMPRESS_CSS: undefined WP_ENVIRONMENT_TYPE: Undefined DB_CHARSET: utf8 DB_COLLATE: undefined ### wp-filesystem ### wordpress: writable wp-content: writable uploads: writable plugins: writable themes: writable

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[marcoluzi]

I just testet it on a https://github.com/10up / wp-local-docker-v2 setup with the https://github.com/10up / wp-scaffold. Same results.

[nicholasio]

Did you test it on Chromium as well or just Brave? does it work on Chrome?

[marcoluzi]

@nicholasio Just checked it on Chrome, Firefox and Safari. Same problem.

[marcoluzi]

@nicholasio Have you given up on trying to solve this issue with me?

[nicholasio]

@marcoluzi Sorry I was not able to reproduce this issue.

[iansvo]

@nicholasio I am currently experiencing the exact same issue. I made a brand new valet install with TLS cert and set up the barebones configuration to get 10up-toolkit and HMR to work. Everything is working, except the websocket url (wss://127.0.0.1:8000/ws) throws ERR_SSL_PROTOCOL.

I've made sure I have a functioning local cert as well, just in case. Is there anything else I can provide to help you troubleshoot this further?

[iansvo]

@nicholasio Just following up here, I've done some digging and it appears this is related to the fact that Laravel Valet uses a self-signed ceritifcate, which appears to be clashing with the websocket cert requirements. Basically, if a cert is self signed, the websocket connection automatically closes and errors without anything specific, or in some browsers (like Safari) if you hit the websocket URI directly you can see the ERR_SSL_PROTOCOL_ERROR message, which is what led me to this in the first place.

It appears that 10up local docker is using mkcert to generate the actual cert files for sites, which I think is part of the reason why it probably works there but does not with Laravel valet.

This may not necessarily be a problem with 10up-toolkit, but it could at least help to include something in the README about this.

[iansvo]

@nicholasio @marcoluzi I'm pleased to report I was able to get this to work, but I confess I don't have a 100% technical explanation for the why.

Ultimately I had to customize the webpack config to add my own cert details to get it to work. Before that, I'd only get protocol errors.

Here's the webpack file I used:

const config = require('10up-toolkit/config/webpack.config.js');
const fs = require('fs')

const certPath = '../../../../../.config/valet'

config.devServer.https = {
    key: fs.readFileSync(`${certPath}/Certificates/movies.test.key`),
    cert: fs.readFileSync(`${certPath}/Certificates/movies.test.crt`),
    ca: fs.readFileSync(`${certPath}/CA/LaravelValetCASelfSigned.pem`),
}

module.exports = config;

So I had to tell webpack which SSL to use in order for this to work. I'm not sure why this would work on say, 10up-local-docker setups (like you all use for projects and has worked for me before) but then doesn't with Valet unless explicitly told what cert to use.

You may also notice that the cert I'm using is not explicitly for localhost (its for the local site I'm using), I'm assuming it's set up to work for localhost/127.0.0.1, but I'm not 100% sure.

Either way I hope this helps. I can submit a PR for the readme to clarify this for other Valet users.

[marcoluzi]

Thanks for your help @iansvo

Unfortunately the error is still present on my setup. All the files seem to be loaded correctly into the webpack config though. What does your package.json file look like?

[iansvo]

Here's mine, but I kinda doubt it's related to your problem unless you have something incorrect in yours:

{
  "name": "movies-wp",
  "author": "Ian Svoboda",
  "scripts": {
    "start": "10up-toolkit build --watch --hot",
    "build": "10up-toolkit build",
    "format-js": "10up-toolkit format-js",
    "lint-js": "10up-toolkit lint-js",
    "lint-style": "10up-toolkit lint-style"
  },
  "devDependencies": {
    "10up-toolkit": "^5.2.1"
  },
  "10up-toolkit": {
    "devURL": "https://movies.test",
    "useBlockAssets": true,
    "entry": {
      "frontend": "assets/js/frontend.js",
      "editor-style": "assets/css/editor-style.css"
    }
  }
}

It is possible that you may need to include the devUrl if you're having this problem. I generally just include it for the sake of simplicity and to rule out shenanigans up front.

Are you visiting your actual valet host in browser (e.g. https://yoursite.test) and you're still getting the websocket connection error (same exact one as previous)?

Can you provide your webpack config and any more information about your setup (such as a repo)? It will be hard to proactively suggest anything without further details at this point.

[nicholasio]

I believe we can close this issue since we're mostly not experiencing this issue at 10up using our development tools (which are all very common to the wp community) and there's a documented workaround for those using laravel valet.