2

estoy con Laravel realizando un proyecto en el que he tenido que instalar Bootstrap (mi primera vez), también estoy utilizando Vite y ando un poco perdido pues desde que instalé Bootstrap no me funciona el php artisan serve que siempre me ha funcionado y para hacer cualquier cosa tengo que utilizar el "npm run dev" cuando supongo que no debería de ser así.

El error que me da: Unable to locate file in Vite manifest: resources/js/bootstrap.js.

No sé porqué no lo encuentra ya que sí que tengo en la carpeta el fichero bootstrap.js, dentro del fichero está escrito todo esto:

import 'bootstrap';

/**
* We'll load the axios HTTP library which allows us to easily issue 
requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 
'XMLHttpRequest';

/**
* Echo exposes an expressive API for subscribing to channels and 
listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/

// import Echo from 'laravel-echo';

// import Pusher from 'pusher-js';
// window.Pusher = Pusher;

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: import.meta.env.VITE_PUSHER_APP_KEY,
//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? 
`ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 
'https',
//     enabledTransports: ['ws', 'wss'],
// });

Aquí el package.json

{
"private": true,
"scripts": {
    "dev": "vite",
    "build": "vite build"
},
"devDependencies": {
    "@popperjs/core": "^2.11.6",
    "axios": "^1.1.2",
    "bootstrap": "^5.2.3",
    "laravel-vite-plugin": "^0.7.2",
    "sass": "^1.60.0",
    "vite": "^4.0.0"
}
}

Aquí el archivo vite.config.js:

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

export default defineConfig({
plugins: [
    laravel({
        input: [
            'resources/sass/app.scss',
            'resources/js/app.js',
        ],
        refresh: true,
    }),
],
});

Aquí el app.js:

import './bootstrap';
import '../css/app.css'
import * as bootstrap from 'bootstrap'
9
  • Si ya instalaste la libreria bootstrap con un gestor de paquetes como npm o yarn, proba import bootstrap from 'bootstrap' o import * as bootstrap from 'bootstrap' getbootstrap.com/docs/5.3/getting-started/download/… Commented el 11 abr. 2023 a las 18:12
  • Tambien fijate que en el package.json tambien está el script build ademas de dev, por lo que podrias correr npm run build y generaria un vite manifest sin tener que mantener corriendo el run dev Commented el 11 abr. 2023 a las 18:22
  • @porloscerrosΨ Sí que tengo en el package.json el script build y el dev, he probado a correr el npm run build pero me da errores: Could not resolve "../css/app.scss" from "resources/js/app.js" error during build: RollupError: Could not resolve "../css/app.scss" from "resources/js/app.js"
    – starnix
    Commented el 12 abr. 2023 a las 10:17
  • 1
    @porloscerrosΨ tuve que poner la siguiente linea en mi fichero vite para hacer que me funcionase optimizeDeps: { include: [ 'bootstrap' ] }, igualmente es normal que solo me funcione php artisan serve si ejecuto npm run dev primero? si paro el npm run dev me sigue saliendo el mismo error pero en cambio si lo dejo me funcionan ambos.
    – starnix
    Commented el 19 abr. 2023 a las 21:27
  • 1
    Genial que lo hayas resuelto. Para no tener corriendo npm run dev, prueba correr una vez npm run build y luego levantar el server. Eso va a compilar el js, css y tambien generar el vite-manifest, que es lo que no te deja levantar el server, pero a diferenxia de run dev, los archivos resultantes van a persistir Commented el 20 abr. 2023 a las 11:01

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.