Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

bearbytestudio's avatar

Vite + InertiaJS + React + Spatie Media Library Pro

Has anyone been able to get these to work together? I can't seem to import any of the components in my React files

0 likes
8 replies
Sinnbeck's avatar

Never used media library, but I use the rest. While waiting for someone who has used all together, perhaps you can show how you are using it and the error you are getting?

bearbytestudio's avatar

Hey @sinnbeck, good idea I should have included that in the first place!

So, using their pro library which is from an invite only git repo, the javascript libraries are included in their composer package, so you import them form there.

Previously, in mix, I could alias the directory like so:

mix.override(webpackConfig => {
    webpackConfig.resolve.modules = [
        'node_modules',
        __dirname + '/vendor/spatie/laravel-medialibrary-pro/resources/js',
    ];
});

Which would allow me to import in my components like so (this is a Vuejs example, but I'm porting over to React):

import { MediaLibraryAttachment } from 'media-library-pro-vue2-attachment';

In my latest, vite setup, I try to add an alias:

export default defineConfig({
    ...
    resolve: {
        alias: {
            "@": resolve(__dirname, "resources/js"),
            "spatie-media-lib-pro":
                "/vendor/spatie/laravel-medialibrary-pro/resources/js",
        },
    },
});

But when importing like this:

import { MediaLibraryAttachment } from "spatie-media-lib-pro/media-library-pro-react-attachment";

I get this error:

[plugin:vite:import-analysis] Failed to resolve import "@babel/runtime/helpers/objectWithoutProperties" from "vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-react-attachment/dist/index.esm.js". Does the file exist?
/Users/.../vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-react-attachment/dist/index.esm.js:11:255

Same issue if I try a named import vs a default import.

Any help appreciated!

Sinnbeck's avatar

@bearbytestudio hm ok. Yeah I can see why you wanted someone who had already used it :)

What if you alias the exact thing?

export default defineConfig({
    ...
    resolve: {
        alias: {
            "@": resolve(__dirname, "resources/js"),
            "spatie-media-lib-pro-attachment":
                "/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-react-attachment",
        },
    },
});

import { MediaLibraryAttachment } from "spatie-media-lib-pro-attachment";
Sinnbeck's avatar

But as it's paid and vite is the official compiler in laravel, I am sure they have had that exact question a lot of times already. So maybe try asking them? As far as I know, they provide support for their paid packages

bearbytestudio's avatar

Didn't work I'm afraid @sinnbeck, but thanks for your help - the GOAT of Laracasts! :)

I've reached out to them on Twitter, maybe I'll try emailing them :)

1 like
Sinnbeck's avatar

@bearbytestudio happy to try and help. Sorry I cannot really come with a working solution, but It's hard when I cannot replicate it :)

And thanks for the nice words!

1 like
waffl's avatar

Just struggled with this myself, my vite config is like so:

import path from 'path';
...
export default defineConfig({
    ...
    resolve: {
        alias: {
            '@spatie/laravel-medialibrary-pro': path.resolve(
                __dirname,
                'vendor/spatie/laravel-medialibrary-pro/resources/js'
            ),
        },
    },
});

Then in my component I was able to import:

import '@spatie/laravel-medialibrary-pro/media-library-pro-styles/src/styles.css';
import { MediaLibraryAttachment } from '@spatie/laravel-medialibrary-pro/media-library-pro-vue3-attachment';
1 like
Kolyacd's avatar

I have the same problem with vue vite i solve it importing:

import { MediaLibraryAttachment } from "spatie-media-lib-pro/media-library-pro-vue3-attachment";

Please or to participate in this conversation.