How do I configure Vite to access files outside of public folders?

Question

I have this file structure:

• My project
  • app
  • Bootstrap
  • Configuration
  • database
  • Node module
    • pdfjs-dist
      • Construct
        • pdf.js
  • public
    • Upload
      • document
        • solution_12.pdf
  • resource

Can someone help me know how to configure Vite to access pdf.js?

I have tried before:

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

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

I used @vite:

in my app.blade.php

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

I got this error: Unable to find file: node_modules/pdfjs-dist/build/pdf.js in Vite manifest.

Can anyone explain it to me?

Answer 1

From your question I see that you seem to be using Laravel (which is good since I'm familiar with it too).

I recommend you check out the Laravel documentation, specifically the vite configuration that comes out of the box with a new Laravel installation. By following their specified directory conventions, you'll avoid the endless trouble of trying to break their mold. Looking at 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 would follow the same convention that Laravel assumes... i.e. your project has a resources/js folder, which is where you normally store your project's javascript (e.g. app such as .js).

As long as you import the javascript files where needed in your application, the best solution is probably to use resources/js/app.js as your Vite "input" and add it in the Vite Blade directive Just quote it in (such as resources/js/app.js). Vite will then import that dependency when your application requires it.

# 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 it helps!