TypeError: Cannot read properties of null (reading 'length')

francoism90 commented 1 month ago

Vite Plugin Version

1.0.5

Laravel Version

11.28.1

Node Version

20.15.1

NPM Version

10.8.0

Operating System

Linux

OS Version

41

Web browser and version

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Running in Sail?

No

Description

I'm keep getting the following console error after upgrading to the latest Laravel version: Uncaught TypeError: Cannot read properties of null (reading 'length')

This seems to be the full dump:

<script>
     window.addEventListener('load', () => window.setTimeout(() => {
        const makeLink = (asset) => {
            const link = document.createElement('link')

            Object.keys(asset).forEach((attribute) => {
                link.setAttribute(attribute, asset[attribute])
            })

            return link
        }

        const loadNext = (assets, count) => window.setTimeout(() => {
            if (count > assets.length) { // This line here
                count = assets.length

                if (count === 0) {
                    return
                }
            }

            const fragment = new DocumentFragment

            while (count > 0) {
                const link = makeLink(assets.shift())
                fragment.append(link)
                count--

                if (assets.length) {
                    link.onload = () => loadNext(assets, 1)
                    link.error = () => loadNext(assets, 1)
                }
            }

            document.head.append(fragment)
        })

        loadNext(null, 10)
    }))
</script>

What's even weirder, is that it's included twice (<head> + <body>).

Steps To Reproduce

This is my app.blade.php:

<!doctype html>
<html
    class="scroll-smooth"
    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
>
<head>
    <meta charset="utf-8" />
    <meta
        name="application-name"
        content="{{ config('app.name') }}"
    >
    <meta
        name="csrf-token"
        content="{{ csrf_token() }}"
    >
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
    @vite('resources/css/app.css')
</head>

<body>

    {{ $slot }}

    @vite('resources/js/app.js')
    @stack('scripts')

</body>
</html>

This is with latest Livewire as well.

francoism90 commented 1 month ago

It turns out this is related to something I did in ViewServiceProvider:

Vite::useWaterfallPrefetching(concurrency: 10);

Is this expected?

timacdonald commented 3 weeks ago

@francoism90, you should only use the @vite directive once in your views.

<!doctype html>
<html
    class="scroll-smooth"
    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
>
<head>
    <!-- ... -->
    @vite(['resources/js/app.js', 'resources/css/app.css'])
</head>

<!-- ... -->
</html>

I'd also recommend using the documented approach for setting prefetching.

Vite::prefetch(concurrency: 10);

timacdonald commented 3 weeks ago

Let me know if you are still having issues after that.

laravel / vite-plugin