HRM hot file use IPv6 while vite devserver running on IPv4

[jenky]

• Laravel Vite Plugin Version: 0.5.0
• Laravel Version: 9.21.4
• Node Version: 18.3.0
• NPM Version: 8.11.0
• Host operating system: macOS Monterey 12.4
• Web Browser & Version: Chome 103.0.5060.114 (arm64)
• Running in Sail / Docker: No (Valet)

Description:

HRM hot file use IPv6 while vite devserver running on IPv4

The URL inside public/hot file: http://::1:5173

Steps To Reproduce:

Upgrade from 0.4.0 and vite 2.9.9, then starts the dev server with npm run dev

[jessarcher]

Hi @jenky, by default the Vite dev server listens on IPv4 and IPv6, if your OS supports it.

I can't see anything in your issue that indicates that the Vite dev server is only listening on IPv4. localhost is a hostname and can resolve to both IPv6 (::1) and IPv4 (127.0.0.1) addresses.

[jenky]

Hmm, but some how I can't visit http://::1:5173/@vite/client nor http://::1:5173/resources/js/app.js. Chrome decide to block it and redirect to blank page about:blank#blocked

Edit:

I think the url is missing [] bracket, it should be http://[::1]:5173. No idea why hot file strips those square bracket

[jessarcher]

That's strange!

The plugin should be adding the brackets for IPv6 addresses:

vite-plugin/src/index.ts

Line 342 in 6ed250d

const serverAddress = address.family === 'IPv6' ? `[${address.address}]` : address.address

[jessarcher]

We've just double-checked this on macOS and the hot file has:

http://[::1]:5173

Do you have any server config in your vite.config.js?

[jenky]

No I don't. This is my current vite.config.js

import { defineConfig, splitVendorChunkPlugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin'
import DefineOptions from 'unplugin-vue-define-options/vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    splitVendorChunkPlugin(),
    vue({
      template: {
        transformAssetUrls: {
          // The Vue plugin will re-write asset URLs, when referenced
          // in Single File Components, to point to the Laravel web
          // server. Setting this to `null` allows the Laravel plugin
          // to instead re-write asset URLs to point to the Vite
          // server instead.
          base: null,

          // The Vue plugin will parse absolute URLs and treat them
          // as absolute paths to files on disk. Setting this to
          // `false` will leave absolute URLs un-touched so they can
          // reference assets in the public directly as expected.
          includeAbsolute: false,
        },
      },
    }),
    laravel({
      input: 'resources/js/app.js',
      ssr: 'resources/js/ssr.js',
      refresh: true,
    }),
    DefineOptions(),
    AutoImport({
      imports: [
        'vue',
        {
          '@inertiajs/inertia-vue3': [
            'useForm',
            'usePage',
          ],
        },
      ],
    }),
  ],
})

[jenky]

That's strange!

The plugin should be adding the brackets for IPv6 addresses:

vite-plugin/src/index.ts

Line 342 in 6ed250d

const serverAddress = address.family === 'IPv6' ? `[${address.address}]` : address.address

After putting a log in the script, this is the value of address.

The family value is just 6 instead of IPv6, that's why square bracket is missing.

[jessarcher]

Interesting! The type definition for Node's AddressInfo interface shows that family is supposed to be a string.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/node/net.d.ts#L22

I've tried with Node 16 and 18 and I can't get it to give me a number.

This means TypeScript doesn't even like me testing for a number:

[jenky]

I found this after doing some research https://nodejs.org/api/net.html#serveraddress. Definitely interesting!

[timacdonald]

Taking a look over the changelog I can see that this was released (as shown above) in Node v18.4.0.

Issue: nodejs/node#43014
Pull Request: nodejs/node#43054

Seems changing this was essentially seen as a bug fix as it was breaking many 3rd party packages, thus it was pushed in a minor release.

Please update to at least node v18.4. We may consider putting a patch in place for this, but for now updating should get you out of trouble.

[scrummitch]

I also encountered the issue without the brackets with node 18.1, upgrading to 18.7 has solved it for me

[timacdonald]

This has been addressed in v0.5.3 of the plugin, which should hopefully help those that hit this in the future.