Vite migration Not Connecting

@Sinnbeck With that config, Looks like Im getting an error when starting dev

wsServer.on is not a function

@davidconrad can you show your new file

@Sinnbeck

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue2';
import path from 'path';
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  server: {
    hmr: {
      server: {
        https: false,
        host: true,
        port: 8080,
        hmr: { host: 'localhost', protocol: 'ws' },
      },
    },
  },

  plugins: [
    laravel({
      input: ['resources/sass/app.scss', 'resources/js/app.js'],
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
    Components({
      resolvers: [
        VuetifyResolver(),
      ],
    }),
  ],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    alias: {

      '@': path.resolve(__dirname, './src'),
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    },
  },
  css: {
    preprocessorOptions: {
      sass: {

        additionalData: [
          '@import "./resources/sass/variables.scss"',
          '@import "vuetify/src/styles/settings/_variables"',
          '', // end with newline
        ].join('\n'),
      },
    },
  },
});

@davidconrad I thought you were running laravel on port 8080? You are telling vite to use the same port

port: 5173,

@Sinnbeck sorry, I'm not the best at some of this docker and port stuff.

I updated it to 5173 and got the same error

@Sinnbeck also, I am not using sail.

@davidconrad no worries. Just making sure. I'll just check through the config and see if I can spot any mistakes

What version of vite are you using?

@Sinnbeck

"vite": "^3.0.2",

when I run php artisan serve, It is running on 127.0.0.1:8000

Idk if this has to do with my issue or not

@davidconrad both sail and lando are just wrappers for docker :)

Can you show some more of the error? I have the same version, but don't get that error. Are you sure you are starting vite inside the container?

@Sinnbeck

error when starting dev server: TypeError: wsServer.on is not a function at createWebSocketServer (file:///var/www/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:57780:18) at createServer (file:///var/www/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:61955:16) at async CAC. (file:///var/www/node_modules/vite/dist/node/cli.js:707:24) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ dev: vite npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I am exec into the docker container running the laravel application

@davidconrad try removing one line at a time until the error goes away

@Sinnbeck

Back to the original error. I had nested an extra hmr. (copied and pasted wrong)

  server: {
    https: false,
    host: true,
    port: 8080,
    hmr: { host: 'localhost', protocol: 'ws' },
  },

@davidconrad the port should be different than php

  server: {
    https: false,
    host: true,
    port: 5173,
    hmr: { host: 'localhost', protocol: 'ws' },
  },

@Sinnbeck

same original error (building but 500 on page)

  server: {
    https: false,
    host: true,
    port: 5173,
    hmr: { host: 'localhost', protocol: 'ws' },
  },

@davidconrad I'm curious where the 500 is. That normally means a server error, but if you have debug mode on you should see the error. What url gives that error?

@Sinnbeck

localhost 8080

yeah theres nothing in the console. Nothing in network tab. Really no good information.

These were showing at one point. They seems to be generated from an error in the blade where the vite directives are. @vite(['./css/app.css', 'resources/js/app.js'])

• url net::ERR_ADDRESS_INVALID
• url net::ERR_ADDRESS_INVALID
• url net::ERR_ABORTED 404

It makes me wonder if the paths in the vite directives are incorrect. But I believe our file structure is typical so I dont know why they would be wrong.

@davidconrad ah one path is wrong here. It's missing resources

vite(['./resources/css/app.css', 'resources/js/app.js'])

@Sinnbeck

our login blade is in root/resources/views/auth/login.blade.php

do you know if I would need to modify the directive file path?

@vite(['./css/app.css', 'resources/js/app.js'])
@vite('./resources/js/app.js')
@vite(['resources/sass/app.scss'])

@vite(['resources/sass/variables.scss'])

@davidconrad the paths need to match records that vite outputs. Check the keys in the manifest.json file in /public/build

@Sinnbeck

great catch. I updated it.

Slightly different error in the console.

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

@Sinnbeck

I only have a mix-manifest.json file. its in root/public

@davidconrad trying to picture it. Could you try putting a picture of your screen on imgur.com? Just leave out https from the url and you can post it

@davidconrad run npm run build to create it. /public/build/manifest.json

@Sinnbeck

{
  "node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff2": {
    "file": "assets/MaterialIcons-Regular.5743ed3d.woff2",
    "src": "node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff2"
  },
  "node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.eot": {
    "file": "assets/MaterialIcons-Regular.e69d687a.eot",
    "src": "node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.eot"
  },
  "node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff": {
    "file": "assets/MaterialIcons-Regular.11ec382a.woff",
    "src": "node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff"
  },
  "node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.ttf": {
    "file": "assets/MaterialIcons-Regular.29c11fa5.ttf",
    "src": "node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.ttf"
  },
  "resources/js/app.js": {
    "file": "assets/app.1b3f56b5.js",
    "src": "resources/js/app.js",
    "isEntry": true,
    "dynamicImports": [
      "_contact-table.02c5cc11.js",
      "resources/js/views/clients/index-clients.vue",
      "resources/js/views/locations/index-locations.vue",
      "resources/js/views/contacts/index-contacts.vue"
    ],
    "css": [
      "assets/app.cc1a1387.css"
    ],
    "assets": [
      "assets/MaterialIcons-Regular.e69d687a.eot",
      "assets/MaterialIcons-Regular.5743ed3d.woff2",
      "assets/MaterialIcons-Regular.11ec382a.woff",
      "assets/MaterialIcons-Regular.29c11fa5.ttf"
    ]
  },
  "_contact-table.02c5cc11.js": {
    "file": "assets/contact-table.02c5cc11.js",
    "isDynamicEntry": true,
    "imports": [
      "_plugin-vue2_normalizer.b5aa7c59.js",
      "resources/js/app.js"
    ],
    "css": [
      "assets/contact-table.f6efd222.css"
    ]
  },
  "_plugin-vue2_normalizer.b5aa7c59.js": {
    "file": "assets/plugin-vue2_normalizer.b5aa7c59.js",
    "imports": [
      "resources/js/app.js"
    ],
    "css": [
      "assets/plugin-vue2_normalizer.d3b14938.css"
    ]
  },
  "resources/js/views/clients/index-clients.vue": {
    "file": "assets/index-clients.05a2ab37.js",
    "src": "resources/js/views/clients/index-clients.vue",
    "isDynamicEntry": true,
    "imports": [
      "_contact-table.02c5cc11.js",
      "_location-table.77b57d5c.js",
      "_plugin-vue2_normalizer.b5aa7c59.js",
      "resources/js/app.js",
      "_VSpacer.355ac1d4.js"
    ],
    "css": [
      "assets/index-clients.643b220e.css"
    ]
  },
  "_VSpacer.355ac1d4.js": {
    "file": "assets/VSpacer.355ac1d4.js",
    "imports": [
      "_plugin-vue2_normalizer.b5aa7c59.js",
      "resources/js/app.js"
    ]
  },
  "_location-table.77b57d5c.js": {
    "file": "assets/location-table.77b57d5c.js",
    "imports": [
      "_plugin-vue2_normalizer.b5aa7c59.js"
    ],
    "css": [
      "assets/location-table.5983d5b5.css"
    ]
  },
  "resources/js/views/locations/index-locations.vue": {
    "file": "assets/index-locations.fccf78b1.js",
    "src": "resources/js/views/locations/index-locations.vue",
    "isDynamicEntry": true,
    "imports": [
      "_location-table.77b57d5c.js",
      "_plugin-vue2_normalizer.b5aa7c59.js",
      "_VSpacer.355ac1d4.js",
      "resources/js/app.js"
    ]
  },
  "resources/js/views/contacts/index-contacts.vue": {
    "file": "assets/index-contacts.c816bea9.js",
    "src": "resources/js/views/contacts/index-contacts.vue",
    "isDynamicEntry": true,
    "imports": [
      "_contact-table.02c5cc11.js",
      "_plugin-vue2_normalizer.b5aa7c59.js",
      "_VSpacer.355ac1d4.js",
      "resources/js/app.js"
    ],
    "css": [
      "assets/index-contacts.0956ecc6.css"
    ]
  },
  "contact-table.css": {
    "file": "assets/contact-table.f6efd222.css",
    "src": "contact-table.css"
  },
  "location-table.css": {
    "file": "assets/location-table.5983d5b5.css",
    "src": "location-table.css"
  },
  "resources/js/views/contacts/index-contacts.css": {
    "file": "assets/index-contacts.0956ecc6.css",
    "src": "resources/js/views/contacts/index-contacts.css"
  },
  "resources/js/views/clients/index-clients.css": {
    "file": "assets/index-clients.643b220e.css",
    "src": "resources/js/views/clients/index-clients.css"
  },
  "plugin-vue2_normalizer.css": {
    "file": "assets/plugin-vue2_normalizer.d3b14938.css",
    "src": "plugin-vue2_normalizer.css"
  },
  "resources/sass/app.scss": {
    "file": "assets/app.1d8f5435.css",
    "src": "resources/sass/app.scss",
    "isEntry": true
  },
  "resources/js/app.css": {
    "file": "assets/app.cc1a1387.css",
    "src": "resources/js/app.css"
  }
}

@davidconrad seems that it builds correct at least

Are you sure you have this in your env file?

APP_DEBUG=true 

@Sinnbeck It was false. After setting it to true I've got some good looking erros in the console here!

GET localhost 8080   /login 500 (Internal Server Error)
GET  localhost 5173    /@vite/client net::ERR_EMPTY_RESPONSE

Theres also a big javascript object with information about laravel, request headers, entrypoitns, framework versions and a bunch of other stuff.

@Sinnbeck and a laravel generated page error report

Too few arguments to function Illuminate\Foundation\Vite::__invoke(), 0 passed in /var/www/storage/framework/views/7369b96b436adb2109e56fbb8ed7ba805568c985.php on line 35 and at least 1 expected

at this script in the blade

<script type="module" src="http://localhost:8080/@vite/client"></script>

I tried swapping 8080 with 5173. same error

@davidconrad ok for some reason it's using the 8080 port there. Maybe your views are cached php artisan view:clear

And double check you don't have 8080 in your vite config file. If you have it in your env file, please show me :)

@Sinnbeck

  server: {
    https: false,
    host: true,
    port: 5173,
    hmr: { host: 'localhost', protocol: 'ws' },
  },

ran php artisan view:clear

no change

maybe I should config:clear and cache:clear as well?

@davidconrad yeah give it a shot. Maybe let's try getting it working with build first. So stop npm run dev for now and see if it works

@Sinnbeck

sure,

I'd like to note that run dev doesnt give me much feedback besides

• "Local: 5173"
• "network: local 172.17.0.4:5173"
• "APP_URL: local: 8080" It doesnt look like the npm run build at all.

I ran npm run build 555 modules transformed and a list of assets successfully built

@davidconrad yeah that is correct. Vite is a lot different than mix. Mix always compiles the code to files. Vite only compiles files with npm run build. When you run npm run dev it starts a small server that injects the css and Javascript into the dom via urls to that server. The server then returns the data in real-time. No files are written at all. Once you stop the command, you will revert to how it was before you started it as no files are written

@Sinnbeck

Ok so I actually have something up and running now.

It looks like the last time I built the app with mix though. No changes are going through. Errors in console

• :5173/css/app.css:1 Failed to load resource: net::ERR_EMPTY_RESPONSE
• :5173/resources/sass/app.scss:1 Failed to load resource: net::ERR_EMPTY_RESPONSE
• :5173/resources/sass/variables.scss:1 Failed to load resource: net::ERR_EMPTY_RESPONSE
• :5173/resources/js/app.js:1 Failed to load resource: net::ERR_EMPTY_RESPONSE
• :5173/@vite/client:1 Failed to load resource: net::ERR_EMPTY_RESPONSE

@davidconrad these imply the dev server is still running 5173/@vite/client:1

Check if you have a file named hot in /public. Delete it

@davidconrad so everything works perfectly if you just run npm run build? As I said I suggest getting that working first :) ignore npm run dev until the first command works correctly

@Sinnbeck yep! Seems like it runs npm run build correctly

@davidconrad and the page loads without errors? (also in console)

If it does, try checking if the port is open on the container. Run docker ps and see the ports section for the container

@Sinnbeck

    @vite('resources/js/app.js')
    @vite(['resources/sass/app.scss'])

Using these directives (I matched them with the ones in the manifest file), I was able to get past this error.

imgur /a/hbNcmew

Now it looks like the site is loading from the last time I used laravel.mix. heres the errors in the console.

imgur /a/ht6dvgB

Thanks for all your help

@davidconrad I think I once saw that error but I cannot recall what it was. Do you btw still have the @mix helper somewhere or similar since it's able to load those old files?

https://imgur.io/a/ht6dvgB https://imgur.io/a/hbNcmew

Maybe @thinkverse has some idea as I am running out of them :)

@Sinnbeck Not sure what the mix helper is. We have three people looking at this now and we are all stumped. Thanks for all the help though!

@davidconrad when you use mix, you use mix() to load the assets. But it could be asset() as well.

Did you check the ports with docker ps btw?