Closed jenky closed 2 years ago
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.
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
That's strange!
The plugin should be adding the brackets for IPv6 addresses: https://github.com/laravel/vite-plugin/blob/6ed250de5cb325075ad539b415cb01488e28dd1c/src/index.ts#L342
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
?
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',
],
},
],
}),
],
})
That's strange!
The plugin should be adding the brackets for IPv6 addresses:
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.
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:
I found this after doing some research https://nodejs.org/api/net.html#serveraddress. Definitely interesting!
Taking a look over the changelog I can see that this was released (as shown above) in Node v18.4.0
.
Issue: https://github.com/nodejs/node/issues/43014 Pull Request: https://github.com/nodejs/node/pull/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.
I also encountered the issue without the brackets with node 18.1, upgrading to 18.7 has solved it for me
This has been addressed in v0.5.3
of the plugin, which should hopefully help those that hit this in the future.
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