• Laravel Vite Plugin Version: 0.2.3
• Laravel Version: 9.x-dev (to include vite changes)
• Node Version: 16.14.0
• NPM Version: 8.4.1

Description:

In Windows, when loading the resources from Vite it fails to load as 0.0.0.0 is an invalid address in Windows and doesn't get rerouted to 127.0.0.1 Chrome's output: Failed to load resource: net::ERR_ADDRESS_INVALID 0.0.0.0:5173/@vite/client:1 Manually going into the generated hot file and changing the url to http://localhost:5173 instead of http://0.0.0.0:5173 allows all the files to load.

Steps To Reproduce:

Set up Laravel Vite Plugin as outlined in the UPRADE.md on Windows I'm using Laravel Sail (with the 5173 port mapped) through WSL, although I don't know if that makes a difference. Due to the line setting host: '0.0.0.0',, even changing the host in the vite.config.js file doesn't help as it gets overwritten by this plugin.

• Laravel Vite Plugin Version: 0.2.4
• Laravel Version: 9.19.0
• Node Version: 16.15.1
• NPM Version: 8.12.1

Description:

After a fresh installation of Laravel Sail and Laravel Breeze, css and js files are not loading in the browser

Steps To Reproduce:

curl -s "https://laravel.build/example-app" | bash

cd example-app
 
./vendor/bin/sail up

sail composer require laravel/breeze

sail artisan breeze:install

sail npm install && sail npm run dev

vite v2.9.13 dev server running at:

Local: http://localhost:5173/ Network: http://192.168.48.4:5173/

When I visit localhost/login, the console shows "Failed to load resource: bad URL" and these are the locations where the browser is looking for the resources:

http://0.0.0.0:5173/resources/css/app.css http://0.0.0.0:5173/@vite/client http://0.0.0.0:5173/resources/js/app.js

This is how the login page looks like

• Laravel Vite Plugin Version: 0.2.0
• Laravel Version: 9.19.0
• Node Version: 18.4.0
• NPM Version: 8.12.1
• Inertia Version: 0.6.3

Description:

Upon running npm run dev Laravel throws:

Configuration "resources/js/app.js" does not exist.

Steps To Reproduce:

1. Follow the official Laravel docs
2. Replace 'mix' directive with 'vite' directive in app.blade.php

Went so far as to make changes in the vite.config file with no success. Also used an absolute URL for the resources and error persists.

Dumped composer and cleared Laravel and browser cache with no success.

There is a post on Stackoverflow with a similar issue: https://stackoverflow.com/questions/72799267/why-laravel-vite-directive-not-working-in-my-project

• Laravel Vite Plugin Version: 0.2.4
• Laravel Version: 9.19.0
• Node Version: 17.8.0
• NPM Version: 8.5.5

Description:

Ran VIte shift on a couple small applications and both apps are not loading the front end (just a blank white page). app.css and app.js are not loading due to ERR_BLOCKED_BY_CLIENT / Referrer Policy: strict-origin-when-cross-origin. Also worth noting I am running Valet to serve locally.

Steps To Reproduce:

• Upgrade Laravel Jetstream/Inertia app to use Vite

I migrated from Mix 6.0.6 to Vite 3.0.9 (laravel-vite-plugin 0.5.4) on Laravel 9.2.5.1.

I followed these instructions: https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-laravel-mix-to-vite

The assets resources/css/app.css and resources/js/app.js are not served when i start hot-reloading on Sail via sail npm run dev (= vite) , if i did not build them before via sail npm run build (= vite build) and the ./public/build/** files exist.

If the compiled assets in ./public/build/** do NOT exist, then @vite(['resources/css/app.css', 'resources/js/app.js']) in my blade-template does not touch the defined links - they are referenced like that in the web-browser, and therefore won't be served.

If the compiled assets in ./public/build/** DO exist, then @vite(['resources/css/app.css', 'resources/js/app.js']) in my blade-template is converted to the related compiled assets, e.g. build/assets/app.3696ec54.css or build/assets/app.dfc18a0d.js.

Shouldn't hot-reloading started with sail npm run dev (= vite) also create the build-directories and files on related file-changes?

And is it possible to change the build target directory like we can do it with Mix?

My package.json scripts section:

"scripts": {
        "dev": "vite",
        "build": "vite build"
    }

My vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        host: 'server.apps.local'
    },
    plugins: [
        laravel({
            input: [
              'resources/css/app.css',
              'resources/js/app.js',
            ],
            refresh: true
        }),
        vue({
             template: {
                 transformAssetUrls: {
                     base: null,
                     includeAbsolute: false,
                 },
             },
        }),
    ]
});

My postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

My docker-compose.yml:

# For more information: https://laravel.com/docs/sail
version: "3"
x-tz: &tz
    TZ: Europe/Berlin
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.1/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            <<: *tz
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
            - meilisearch
            - selenium
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3307}:3307'
        environment:
            <<: *tz
            MYSQL_TCP_PORT: '${DB_PORT}'
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: "%"
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
            retries: 3
            timeout: 5s
    redis:
        image: "redis:alpine"
        ports:
            - "${FORWARD_REDIS_PORT:-6379}:6379"
        environment:
            <<: *tz
        volumes:
            - 'sail-redis:/data'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "redis-cli", "ping"]
            retries: 3
            timeout: 5s
    meilisearch:
        image: 'getmeili/meilisearch:latest'
        ports:
            - '${FORWARD_MEILISEARCH_PORT:-7700}:7700'
        environment:
            <<: *tz
        volumes:
            - 'sail-meilisearch:/data.ms'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "wget", "--no-verbose", "--spider",  "http://localhost:7700/health"]
            retries: 3
            timeout: 5s
    mailhog:
        image: 'mailhog/mailhog:latest'
        environment:
            <<: *tz
        ports:
            - '${FORWARD_MAILHOG_PORT:-1025}:1025'
            - '${FORWARD_MAILHOG_DASHBOARD_PORT:-8025}:8025'
        networks:
            - sail
    selenium:
        image: 'selenium/standalone-chrome'
        environment:
            <<: *tz
        volumes:
            - '/dev/shm:/dev/shm'
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local
    sail-meilisearch:
        driver: local

• Laravel Vite Plugin Version: 2.9.13
• Laravel Version: 9.19.0
• Node Version: 16.15.1
• NPM Version: 8.11.0
• Windows 10 with WSL2
• Docker Desktop 4.8.1 (78998) using WSL2 backend

Description:

Setting up a new Laravel project with Sail on Windows. The app and asset bundling works, but HMR is not triggered when updating resources, or even when manually refreshing the tab.

The blade template calls @vite(['resources/css/app.css', 'resources/js/app.js']) in the <head> section. App loads successfully, including styles. The dev tools console shows both [vite] connecting... and [vite] connected. Saving a change to a resource file does not trigger a browser update, and even manually refreshing does not work. (The route loads, but with stale resources).

Steps To Reproduce:

• Connect to WSL instance in Terminal, and install Laravel via curl -s https://laravel.build/example-app | bash
• cd and run npm install
• From the WSL connected Terminal npm run dev. (I can see ready in 3523ms and my APP_URL)
• Load the app in the browser (e.g. http://example-app.test) with a view that uses the @ vite helper
• The page loads as expected, console shows [vite] connected
• Changing and saving resources/css/app.css does not update the browser. Dev console shows no requests or errors
• Force refreshing shows no changes
• Manually opening the CSS link in a new tab (e.g. http://127.0.0.1:3000/resources/css/app.css) shows the updated content. If you save another change to the CSS and refresh this tab the changes will show
• Changing the <link href> attribute on the style link in the main tab to append a cache-bust query parameter (e.g. http://127.0.0.1:3000/resources/css/app.css?v=2) does trigger the new style
• Apart from manually changing the URL like that I need to stop and restart the npm run build server and then reload the tab to see changes.

Vite Config

Using the default vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

• Laravel Vite Plugin Version: 0.2.3
• Laravel Version: 9.x-dev 4d46bda
• Node Version: 16.15.0
• NPM Version: 8.5.5
• Chrome Version: 102.0.5005.115
• Firefox Version: 101.0.1
• Laravel Valet Version: 3.1.7
• macOS Version: 12.3.1 (M1)

Description:

When serving a local development site, e.g. valet-vite.test, using Valet, after the site is secured with HTTPS using valet secure the connection to wss://valet-vite.test:3000 fails, and all the pings to https://valet-vite.test/__vite_ping 404.

The errors look like this (screenshot is Firefox, errors are the same in Chrome).

Steps To Reproduce:

• composer create-project laravel/laravel:9.x-dev valet-vite && cd valet-vite
• valet link valet-vite && valet secure
• add @vite('resources/js/app.js') to resources/views/welcome.blade.php
• set APP_URL to https://valet-vite.test
• npm install && npm run dev

• Laravel Vite Plugin Version: 0.7.2
• Laravel Version: 9.4.0
• Node Version: 16.18.1
• NPM Version: 8.19.2
• Host operating system: Windows
• Web Browser & Version: Chrome 108.0.5359.124
• Running in Sail / Docker: Docker

Description:

I'm using Laravel 9.x along with Inertia (Svelte). There is an issue when running npm run dev: error when starting dev server: TypeError: laravel is not a function.

Steps To Reproduce:

Bellow is vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        svelte({
            prebundleSvelteLibraries: true,
        }),
    ],
    
    optimizeDeps: {
        include: [
            '@inertiajs/inertia',
            '@inertiajs/inertia-svelte',
            "@inertiajs/progress",
        ]
    }
});

• Laravel Vite Plugin Version: 0.5.0
• Laravel Version: 9.21.3
• Node Version: 16.13.2
• NPM Version: 8.1.2
• Host operating system: Windows
• Web Browser & Version: Chrome - Version 103.0.5060.134 (Official Build) (64-bit)
• Running in Sail / Docker: No

Description:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

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

After running this command:

npm run build

Getting this error:

Unable to locate file in Vite manifest: resources/css/app.css.

Steps To Reproduce:

I have done some research on it.

there is an issue in the manifest.json file.

{
  "resources/js/app.js": {
    "file": "assets/app.8fe7c9ab.js",
    "src": "resources/js/app.js",
    "isEntry": true
  },
  "resources/css\\app.css": {
    "file": "assets/app.8794147c.css",
    "src": "resources/css\\app.css"
  }
}

and in the Vite.php this manifest key is not matching.

that's why js files working fine and css files having issues.

please fix this, thanks.

Hi, very glad to see an official integration for vite in laravel. Much respect for the work! :+1:

I tried to integrate this with DDEV, a local PHP development environment system based on Docker.

Vite runs inside the docker container. The following vite.config.ts is needed to get this working with DDEV router (a reverse proxy. Vite must respond to all network requests via 0.0.0.0:

/* vite.config.ts */
  server: {
    // respond to all network requests
    host: '0.0.0.0',
    strictPort: true,
    port: 3000
  },

For the HTML output of @vite it would be needed to use the following custom URL

https://my-laravel-project.ddev.site:3000

which would result in

<script type="module" src="https://my-laravel-project.ddev.site:3000/@vite/client"></script>

But: For the above posted config larave/vite-plugin currently resolves the following in public/hot, which doesn't work (of course):

http://[::]:3000

I saw that the dev server URL resolve is handled here:

/**
 * Resolve the dev server URL from the server address and configuration.
 */
function resolveDevServerUrl(address: AddressInfo, config: ResolvedConfig): DevServerUrl {
    const configHmrProtocol = typeof config.server.hmr === 'object' ? config.server.hmr.protocol : null
    const clientProtocol = configHmrProtocol ? (configHmrProtocol === 'wss' ? 'https' : 'http') : null
    const serverProtocol = config.server.https ? 'https' : 'http'
    const protocol = clientProtocol ?? serverProtocol

    const configHmrHost = typeof config.server.hmr === 'object' ? config.server.hmr.host : null
    const configHost = typeof config.server.host === 'string' ? config.server.host : null
    const serverAddress = address.family === 'IPv6' ? `[${address.address}]` : address.address
    const host = configHmrHost ?? configHost ?? serverAddress

    return `${protocol}://${host}:${address.port}`
}

I discussed this at length with DDEV users and DDEV maintainer and they gave me the advice that I should not fiddle around with server.hmr-settings in vite.config.ts because this is not suited for a reverse proxy usage. (Tested it, vite doesn't connect when using hmr.host etc.). (Discussion)

Demo repo: https://github.com/mandrasch/ddev-laravel-breeze-vite#readme

Proposal:

When I manually overwrite public/hot with https://my-laravel-project.ddev.site:3000 everything works fine.

Therefore I would like to suggest to introduce another config option to manually overwrite the dev server url output for @vite.

For example innocenzi/laravel-vite offers an manual override with DEV_SERVER_URL in .env / config/vite.php.

Thanks very much in advance, this may be really helpful for other docker use cases as well I guess! Best regards, Matthias

This PR updates the hot file generation to use Vite's server.hmr.port config option when specified by the user.

This configuration option is intended to tell the Vite client where to find the HMR server port for cases where it is different from server.port. I believe it makes sense for us to use it as well.

This probably helps a range of use cases, but specifically, it allows users to run Vite inside a Sail container that is running inside WSL, where the Vite dev server needs to be configured on the container's public address, but where the host machine cannot connect to this same address.

Users running Vite inside Sail inside WSL will need to add the following to the defineConfig section of their vite.config.js file:

server: {
    hmr: {
        port: 3001,
    },
},

In draft state until I've got some more testing done to confirm the fix.

Fixes https://github.com/laravel/vite-plugin/issues/187

Todo

• [ ] We should consider making the Laravel skeleton "module" by default.

TODO: We still need to consider the order of resolution of certificates.

This PR is an alternative proposal for https://github.com/laravel/vite-plugin/pull/163.

This PR adds:

• Valet certificate auto-detection (the default).
• Ability to opt-out of auto-detection valetTls: false.
• CLI output to indicate when the Valet certificate is being used (when known).

This PR allows teams with a mixture of Valet and non-Valet users to configure TLS certificates, without the need to adding extra Vite configuration - but keeps the Valet specific configuration options available.

The following standard Laravel plugin config supports both use-cases:

import fs from 'fs'
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

For Valet users, as long as a Valet certificate is found. It will be used. Valet certificates are "guessed" in the same way they currently are.

1. CWD is used as the host.
2. TLD is resolved from the Valet config.

For non-Valet users, you may specify the path to TLS certificates with the existing environment options.

VITE_DEV_SERVER_KEY=/path/to/key
VITE_DEV_SERVER_CERT=/path/to/cert

CLI output

We now output on the CLI when Vite certificates are in use. This will help users know when the Valet certificates have been auto-detected, etc.

The valetTls option now has the following options.

laravel({
  // ...

  // Auto-detection.
  // - Host is guessed via convention.
  // - Missing certificates are ignored.
  // _

  // Explicitly use Valet certificates.
  // - Host is guessed via convention.
  // - Errors are thrown when missing certificates. 
  valetTls: true,

  // Explicitly use Valet certificates.
  // - Host specified is used.
  // - Errors are thrown when missing certificates. 
  valetTls: 'tim.dev',

  // Opt-out of auto-detection.
  valetTls: false,
}),

Because we now auto-detect the certificates, which could be seen as a breaking change, I've targeted 0.8.x for this PR.

Closes #162

This pull request changes how the certificates for the development server are resolved.

Previously, the valetTls option needed to be defined for Valet certificates to be inferred. However, this is not an environment-agnostic solution: if a developer works on Windows, they will get an error when the server starts.

I tried to mitigate this through https://github.com/laravel/vite-plugin/pull/151, but this requires valetTls to be removed/set to false, and everyone to specify their certificates in their .env, which is super inconvenient.

Even when using valetTls, the current implementation tries to find certificates by using the current working directory's name instead of the APP_URL, which is problematic when the directory name is not the same as the APP_URL. This can be fixed by setting valetTls to the name of the domain, but then this breaks the configuration for the rest of the team — so we're back to setting valetTls to false and manually specifying the certificates in the .env.

To fix all of these issues:

• The valetTls option in vite.config.ts should be removed
• Certificates should be inferred in a logical order (environment-defined certificates first, then Valet certificates)
• Certificate resolution should not throw an error

~~Marking this as draft to properly test it in all of our environments.~~