Open thdoan opened 1 year ago
Maybe this will resolve it?
Try add this to your vite config
server: {
port: 5173,
strictPort: true,
hmr: {
port: 5173,
},
},
@devnomic thanks for the setting -- that fixed the "failed to construct websocket" error, but now whenever I reload the extension in dev mode it throws an "extension context invalidated" error for each opened tab:
Is there a setting we can add to suppress these errors? I know they can be ignored, but sometimes when we're in the middle of development a real error can be lost in the middle of all these context invalidated errors.
I didn't get those errors, Right now i'm using these dependencies seems working fine for me (for now).
"vite": "^4.2.2",
"@vitejs/plugin-react": "^3.1.0",
"@crxjs/vite-plugin": "^2.0.0-beta.16",
Maybe you can try using same or check working versions from this repo from crxjs author https://github.com/crxjs/vite-4-react
This is related to Vite 4.3.X https://github.com/crxjs/chrome-extension-tools/issues/693
My setup:
"@crxjs/vite-plugin": "^2.0.0-beta.16",
"@sveltejs/vite-plugin-svelte": "^2.1.0",
"vite": "^4.3.1"
Downgrading Vite to 4.2.x fixed this issue for me: "vite": "~4.2.2"
. Thanks @thyngster
Downgrading Vite to 4.2.x fixed this issue for me:
"vite": "~4.2.2"
. Thanks @thyngster
client.ts:78 WebSocket connection to 'ws://localhost/' failed:
Try add this to your vite config
server: { port: 5173, strictPort: true, hmr: { port: 5173, }, },
Amazing!! Thanks for this, it solves my issue :)
Setting the server ports as @devnomic described resolves this for me as well. I did not need to downgrade any packages.
Looks like I'm on vite@npm:4.5.0
% yarn info --name-only
├─ @crxjs/vite-plugin@npm:2.0.0-beta.19
├─ @mantine/core@npm:7.1.7
├─ @mantine/hooks@npm:7.1.7
├─ @types/react-dom@npm:18.2.14
├─ @types/react@npm:18.2.33
├─ @vitejs/plugin-react-swc@npm:3.4.0
├─ autoprefixer@npm:10.4.16
├─ eslint-plugin-react-hooks@npm:4.6.0
├─ eslint-plugin-react-refresh@npm:0.4.4
├─ eslint-plugin-react@npm:7.33.2
├─ eslint@npm:8.52.0
├─ postcss-preset-mantine@npm:1.9.0
├─ postcss-simple-vars@npm:7.0.1
├─ postcss@npm:8.4.31
├─ react-dom@npm:18.2.0
├─ react@npm:18.2.0
├─ tailwindcss@npm:3.3.5
├─ vite-3-yarn@workspace:.
└─ vite@npm:4.5.0
I have the same error and a very slow @vite server.
Environment Operating System: Ubuntu 22.04 Node Version: v18.17.0 Nuxt Version: 3.8.2 Nitro version: 2.8.1 Package Manager: yarn@1.22.19
Describe the bug
I configured Nginx to serve Nuxt project with server_name nuxt.example.local
while this will be proxied on localhost
on port 8082
. Then in location /etc/hosts
, I pointed 127.0.0.1
to that server name. To run Nuxt project on localhost:8082
, I'm using command yarn dev --port 8082
. But with this setup and configuration I get the same error as above in my browser console:
The URL 'ws://localhost:undefined/_nuxt/' is invalid.
Nginx config file
server {
listen 80;
server_name nuxt.example.local;
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://localhost:8082;
}
}
Nuxt config file
export default defineNuxtConfig({
server: {
port: 8082,
strictPort: true,
hmr: {
port: 8082,
},
},
}
Hosts file
127.0.0.1 nuxt.example.local
I have the same error and a very slow @Vite server.
Environment Operating System: Ubuntu 22.04 Node Version: v18.17.0 Nuxt Version: 3.8.2 Nitro version: 2.8.1 Package Manager: yarn@1.22.19
Describe the bug I configured Nginx to serve Nuxt project with
server_name nuxt.example.local
while this will be proxied onlocalhost
on port8082
. Then in location/etc/hosts
, I pointed127.0.0.1
to that server name. To run Nuxt project onlocalhost:8082
, I'm using commandyarn dev --port 8082
. But with this setup and configuration I get the same error as above in my browser console:
The URL 'ws://localhost:undefined/_nuxt/' is invalid.
Nginx config file
server { listen 80; server_name nuxt.example.local; gzip on; gzip_types text/plain application/xml text/css application/javascript; gzip_min_length 1000; location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_read_timeout 1m; proxy_connect_timeout 1m; proxy_pass http://localhost:8082; } }
Nuxt config file
export default defineNuxtConfig({ server: { port: 8082, strictPort: true, hmr: { port: 8082, }, }, }
Hosts file
127.0.0.1 nuxt.example.local
Oops, I made a mistake in my previous comment. Let me correct that:
export default defineNuxtConfig({
vite: {
server: {
strictPort: true,
hmr: {
port: 8082,
},
},
},
}
I spend hours trying different settings, but the problem - Nuxt ignoring your hmr settings. (Nuxt 3.8.2) So you just need extend vite config in hook:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: false },
ssr: false,
css: [
'bootstrap/dist/css/bootstrap.min.css',
'~/assets/scss/main.scss',
],
vite: {
server: {
// In my case I use Nginx reverse proxy
// with self signet certificate (mkcert)
// so I just want this works on localhost:3000
// but these settings ignoring. You can check hmr is false
// in 'vite:configResolved' hook
// And the most efficient and elegant way to fix it is
// override vite config in 'vite:extendConfig' hook below
hmr: {
protocol: 'ws',
host: 'localhost',
},
},
},
hooks: {
'vite:extendConfig' (viteInlineConfig, env) {
viteInlineConfig.server = {
...viteInlineConfig.server,
hmr: {
protocol: 'ws',
host: 'localhost',
},
}
},
},
})
Hi, maybe this can help you if hmr is ignored: https://github.com/nuxt/nuxt/issues/12003#issuecomment-1939083966
Hi, I am getting a failed to construct Websocket with ws://localhost:undefined?connectToken=undefined
Using vite/5.2.8 win32-x64 node-v20.11.0
, neu CLI: v11.0.1
, Neutralinojs binaries: v5.1.0
Vite dev server is correctly configured and listening :
server: {
port: 3000,
strictPort: true,
hmr: {
protocol: "ws",
host: "localhost",
port: 3000,
},
},
neutralino cli config :
"cli": {
"binaryName": "App",
"resourcesPath": "/vite-project/build/",
"extensionsPath": "/extensions/",
"binaryVersion": "5.1.0",
"frontendLibrary": {
"patchFile": "/vite-project/index.html",
"devUrl": "http://localhost:3000"
}
}
It looks like this is due to the window.NL_*
not being assigned when the browser is opened, still cannot manage to solve this.
So if I'm digging correctly the problem is that le global variables are not loaded, when looking through the doc section "how to work with front end frameworks" , there is an example given with react that specify importing this script in the main entrypoint : <script src="%PUBLIC_URL%/__neutralino_globals.js"></script>
.
But Im not working with react, and i dont see what this __neutralino_globals.js
refers to ? Am I supposed to copy/paste the minified client from the node module to my src ?
Well found out in this source that __neutralino_globals.js
is actually generated on the fly
It would be nice to have this piece of info in the official documentation.
Try add this to your vite config
server: { port: 5173, strictPort: true, hmr: { port: 5173, }, },
It works for me
@lukas-pierce Hi !!!!! You saved my life!! Thank you!!
Build tool
Vite
Where do you see the problem?
Describe the bug
I'm seeing these errors while in development (
npm run dev
):I don't recall seeing this error message before. Can I safely ignore these errors, or is it something that needs to be fixed?
Reproduction
https://github.com/Jemeni11/Chrome-Extension-CRXJS-Vite-TS-Template
Logs
No response
System Info
Severity
annoyance