Filament•2y ago

Laravel Resource JS

How do I include my resource app.js file? I've added my resource app.js file to vite.config.js but I'm not sure how to setup and to be able to be included in my Filament apps. Do I need to use Filament::registerScripts([])?

20 Replies

Dan Harrin•2y ago

yeah you need to register it as a script

_.shapeshifterOP•2y ago

I tried but I encountered Cannot use import statement outside a module

Dan Harrin•2y ago

doesnt sound like a filament problem, just something wrong with what you put in the js file

_.shapeshifterOP•2y ago

here is the snippet inside my app.js

import confetti from "canvas-confetti";

Livewire.on('confetti', () => {
    confetti({
        particleCount: 80,
        spread: 200,
        origin: {y: 0.6}
    });
})

import confetti from "canvas-confetti";

Livewire.on('confetti', () => {
    confetti({
        particleCount: 80,
        spread: 200,
        origin: {y: 0.6}
    });
})

here is my vite.config.js file.

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament.css',
            ],
            refresh: true,
        }),
        splitVendorChunkPlugin(),
    ],
build: {
    rollupOptions: {
        external: [
            "../../node_modules/@types/**/*",
            "../../vendor/filament/forms/dist/module.esm.css",
            "../../vendor/filament/filament/resources/css/app.css",
            "../../vendor/filament/forms/dist/module.esm",
            "../../vendor/filament/notifications/dist/module.esm",
        ],
        output: {
            manualChunks(id) {
                if (id.includes('node_modules')) {
                    return id.toString().split('node_modules/')[1].split('/')[0].toString();
                }
            }
        }
    }
    },
});

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament.css',
            ],
            refresh: true,
        }),
        splitVendorChunkPlugin(),
    ],
build: {
    rollupOptions: {
        external: [
            "../../node_modules/@types/**/*",
            "../../vendor/filament/forms/dist/module.esm.css",
            "../../vendor/filament/filament/resources/css/app.css",
            "../../vendor/filament/forms/dist/module.esm",
            "../../vendor/filament/notifications/dist/module.esm",
        ],
        output: {
            manualChunks(id) {
                if (id.includes('node_modules')) {
                    return id.toString().split('node_modules/')[1].split('/')[0].toString();
                }
            }
        }
    }
    },
});

Dennis Koch•2y ago

Did you just register resources/js/app.js. That one wasn't touched by Vite and therefore you have imports in you JS file. Not sure what's the right syntax here. If it's output in public/js you should use that path.

_.shapeshifterOP•2y ago

should I register the asset build output by Vite? I think the filename is changing every build?

Dennis Koch•2y ago

You might get it to work with the Vite class: $vite = app(Vite::class); $vite('resources/js/app.js);

_.shapeshifterOP•2y ago

in the Filament boot? I think Filament need to create similar to Filament::registerViteTheme([]) but for JS module

Dennis Koch•2y ago

Check the source code of that method 😉 It's not much magic. There should be a Vite::asset('/resources/js/app.js) now

Dennis Koch•2y ago

https://github.com/laravel/framework/pull/43702

GitHub

[9.x] Vite asset url helper by timacdonald · Pull Request #43702 · ...

When using plain Blade as your templating platform, it can be useful to still process images that are not referenced in your JS with Vite - it may even be the case that you don't have any JS an...

_.shapeshifterOP•2y ago

Thanks for the help! 🍻

Dennis Koch•2y ago

Is it working?

_.shapeshifterOP•2y ago

I can see now different error response, and I see the app.js is now part of the page. nnot use import statement outside a module (

Dennis Koch•2y ago

That's the same error as before isn't it?

_.shapeshifterOP•2y ago

yeah, not sure what is wrong, with the import in app.js

Dennis Koch•2y ago

I think you cannot register a JS module (type="module") with registerScript().

_.shapeshifterOP•2y ago

that's what I'm thinking also, that is why I'm thinking to have similar to Filament::registerViteTheme([]) but for JS module I'm trying to check online if there is a workaround to this hahaha

Dennis Koch•2y ago

Maybe use a render hook to register that file yourself

_.shapeshifterOP•2y ago

its now working, thanks!

MichaelMdp•17mo ago

I solved it this way, now I have a file where I can add modules used by my custom filament stuff:

 
Filament::registerRenderHook(
  'scripts.end',
  function () { 
    return '<script src="' . Vite::asset('resources/js/filament-extra-modules.js') . '" type="module"></script>';
  }
);

 
Filament::registerRenderHook(
  'scripts.end',
  function () { 
    return '<script src="' . Vite::asset('resources/js/filament-extra-modules.js') . '" type="module"></script>';
  }
);

Gaming

Programming

Laravel Resource JS