Import all files in a folder Vite

I'd like to import all files in a specific folder using laravel plugin in vite. Here is my Vite config:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [
    laravel({
      input: ["resources/js/app.js", "resources/js/static/*.js"],
      refresh: true,
    }),
    react(),
  ],
  resolve: {
    alias: {
      "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
      "~fontawesome": path.resolve(
        __dirname,
        "node_modules/@fortawesome/fontawesome-free"
      ),
      "@": "/resources",
    },
  },
  server: {
    hmr: {
      host: "localhost",
    },
  },
});

As you can see i have many entrypoints, so it would be hard to update vite config each time i create a new one. With the config above i'm able to load any script in dev environment, but when i try to build it i got this error:

$ vite build
vite v4.0.4 building for production...
✓ 0 modules transformed.
Could not resolve entry module "resources/js/static/*.js".
error during build:
RollupError: Could not resolve entry module "resources/js/static/*.js".
    at error (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:1967:30)
    at ModuleLoader.loadEntryModule (file:///var/www/html/node_modules/rollup/dist/es/shared/rollup.js:23115:20)
    at async Promise.all (index 1)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

LaryAI

3 years ago

Level 58

To import all files in a specific folder using Laravel plugin in Vite, you can use the glob package to get all the files in the folder and pass them as an array to the input option in the Vite config.

Here's an example code snippet:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";
import path from "path";
import glob from "glob";

export default defineConfig({
  plugins: [
    laravel({
      input: ["resources/js/app.js", ...glob.sync("resources/js/static/*.js")],
      refresh: true,
    }),
    react(),
  ],
  resolve: {
    alias: {
      "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
      "~fontawesome": path.resolve(
        __dirname,
        "node_modules/@fortawesome/fontawesome-free"
      ),
      "@": "/resources",
    },
  },
  server: {
    hmr: {
      host: "localhost",
    },
  },
});

In this example, we use the glob.sync method to get all the files in the resources/js/static folder that match the *.js pattern and spread them into the input array.

Make sure to install the glob package by running npm install glob or yarn add glob.

Please or to participate in this conversation.