F
FilamentChesterS

Enable Echo.js without breaking Hot Reload

Ok I'm at my wit's end here... I know this is probably not strictly Filament related, but maybe there's a JS wizard here that can help I'm trying to enable broadcasting. Here are the relevant files
// echo.js
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
broadcaster: 'reverb',
...
enabledTransports: ['ws', 'wss'],
});
// echo.js
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
broadcaster: 'reverb',
...
enabledTransports: ['ws', 'wss'],
});
// AppServiceProvider.php
FilamentAsset::register([
Js::make('echo', Vite::asset('resources/js/echo.js')),
]);
// AppServiceProvider.php
FilamentAsset::register([
Js::make('echo', Vite::asset('resources/js/echo.js')),
]);
//vite.config.js
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
'resources/js/echo.js',
'resources/css/filament/theme.css',
],
}),
],

});
//vite.config.js
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
'resources/js/echo.js',
'resources/css/filament/theme.css',
],
}),
],

});
As you can see, most of the code is boilerplate. It works when I run npm run build , but when I run npm run dev I get the following error.
Uncaught SyntaxError: import.meta may only appear in a module
Uncaught SyntaxError: import.meta may only appear in a module
in firefox and
Uncaught SyntaxError: Cannot use 'import.meta' outside a module
Uncaught SyntaxError: Cannot use 'import.meta' outside a module
inside the echo.js file
import.meta.env = {"VITE_PUSHER_APP_KEY":"","VITE ....
import.meta.env = {"VITE_PUSHER_APP_KEY":"","VITE ....
Has anyone run into something similar? Any suggestions? Googling for this error doesn't get me anything useful.