Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Bug] Laravel - Vite - bootstrap is not defined

Pessoal, boa tarde.

Estou começando um projeto apenas para estudo de laravel, porém estou obtendo erro na inicialização do bootstrap para execução de um "$("#modal").modal("show"), onde ao aplicar isso ele informa que o bootstrap não foi definido.

meu arquivos se encontram assim:

As chamadas do "alias" acontecem no meu app.css

vite.config.js:

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, "node_modules/bootstrap/dist"),
            "~bootstrapIcons": path.resolve(__dirname, "node_modules/bootstrap-icons/font"),
            '@Components': "resources/components",
            "~datatables": path.resolve(__dirname, "node_modules/datatables/media")
        },
    },
});

bootstrap.js:


import axios from "axios";
window.axios = axios;

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

import jQuery from "jquery";
window.$ = jQuery;

import DataTable from "datatables.net";
window.DataTable = DataTable;

import * as Popper from "@popperjs/core";
window.Popper = Popper;

quando faço a adesão do bootstrap no meu bootstrap.js dessa maneira:

import axios from "axios";
window.axios = axios;

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

import jQuery from "jquery";
window.$ = jQuery;

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

import DataTable from "datatables.net";
window.DataTable = DataTable;

import * as Popper from "@popperjs/core";
window.Popper = Popper;

O erro é alterado para "this.config is undefined", não encontrei solução em foruns na internet.

OBS: as chamadas do Jquery, datatables estão funcionando normalmente e meu css do bootstrap também está em funcionamento, porém o js dele não estou conseguindo executar, alguém saberia me dizer como aplicar?

OBS: não tenho total certeza se estou executando as chamadas corretamente, porém foi a maneira que identifiquei e está funcionando.

Desde já, obrigado.

1 resposta
solução!

Oii, Daniel! Tudo bem?

Peço desculpas peça demora em te responder.

Parabéns pela iniciativa de começar um projeto para estudo, será muito importante para o seu desenvolvimento. Como é um projeto externo, no qual não tenho acesso ao contexto, logo consigo apenas lhe dizer algumas recomendações.

Você está no caminho certo, o erro que está retornando indica que o Bootstrap está tentando usar uma parte importante para fazer as coisas funcionarem, porém, não consegue encontrá-la.

Uma possível solução é olhar se o Bootstrap está importado certinho em seu arquivo bootstrap.js. Veja um exemplo de como ficaria a importação:

import 'bootstrap/dist/js/bootstrap';

Veja também se possui o pacote do Bootstrap instalado em seu projeto. Para instalá-lo executando o seguinte comando no terminal:

npm install bootstrap

Outro detalhe, veja se o arquivo bootstrap.js está importado em seu arquivo vite.config.js, sempre se atentando a sintaxe e estrutura do caminho.

Espero que as sugestões te ajude. Caso tenha resolvido, compartilhe com a comunidade se você sentir confortável.

Bons estudos, Daniel!