CODEWITHSUNDEEP
phplaravelfileurl
jpesa
jpesa

Reputation: 103

How can i config Vite to access files outside public folder?

I have this file structure:

Can someone help me know how can i access pdf.js by configuring Vite?.

What i tried:

In vite.config.js, at export default defineConfig:

plugins: [
        laravel({
            input: [
                'node_modules/pdfjs-dist/build/pdf.js'
            ],
            refresh: true,
        }),
    ],

and i used @vite at my app.blade.php:

@vite([
    'node_modules/pdfjs-dist/build/pdf.js'
    ])

and i got this errors: Unable to locate file in Vite manifest: node_modules/pdfjs-dist/build/pdf.js.

Can someone explain it to me?

Upvotes: 0

Views: 1284

Answers (1)

CJHolowatyj
CJHolowatyj

Reputation: 437

I see from your question that you appear to be using Laravel (good because that's what I'm familiar with too).

I would recommend checking out the Laravel documentation, and specifically the configurations for vite that come out of the box with new installations of Laravel. By following the directory conventions they specify, you'll save yourself from endless headaches by trying to break their mold. Reviewing the following section of the Laravel Documentation would be a good starting point: https://laravel.com/docs/10.x/vite#main-content

In an ideal world, you'd be following the same conventions that Laravel assumes you would be... namely that your project has a resources/js folder, which is where you'd usually store your project's javascript (like app.js for example).

As long as you import the javascript file wherever it is needed within your application, the best solution would likely be to use resources/js/app.js for your Vite "input", and reference it within the Vite blade directive as well (as resources/js/app.js). Vite would then import that dependency when it is needed within your application.

# Your vite.config.js excerpt would look like:

plugins: [
    laravel({
        input: [
            'resources/js/app.js'
        ],
        refresh: true,
    }),
],

# Your @vite blade directive would look like:

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

# Your import call (wherever you're using this dependency) might look like:

import 'pdfjs-dist/build/pdf.js';

Hope that helps!

Upvotes: 0

Related Questions