LaravelDaily/Larastarters

laravel-ui / tabler dashboard dropdown not working

corean opened this issue · 6 comments

스크린샷 2023-02-09 오후 3 54 02

In devtools, the events are occurring, but it is not able to add the "show" class.

It works normally when inserting CDN

in resources/views/layouts/app.blade.php

    <!-- Core plugin JavaScript-->
	<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js"></script>
	@vite('resources/js/app.js')

the same here I had the same problem I wonder why it doesn't work

This is an issue with @tabler/core
First, I changed the path issue and it works fine.

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tabler/core": "^1.0.0-beta17",
        "@tabler/icons": "^2.3.0",
        "autoprefixer": "^10.4.13",
        "autosize": "^5.0.2",
        "axios": "^1.1.2",
        "dropzone": "^6.0.0-beta.2",
        "imask": "^6.4.3",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "sass": "^1.58.0",
        "tinymce": "^6.3.1",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@popperjs/core": "^2.11.6",
        "bootstrap": "5.3.0-alpha1"
    }
}

node_modules/@tabler/core/src/scss/_bootstrap-config.scss

// Config
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/variables-dark";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

node_modules/@tabler/core/src/scss/_bootstrap-components.scss

// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";
@import "~bootstrap/scss/placeholders";

// Helpers
@import "~bootstrap/scss/helpers";

// Utilities
@import "~bootstrap/scss/utilities/api";

``

@corean you changed path in node_modules?

Tabler imports bootstrap so to fix it just remove import bootstrap from resources/js/bootstrap.js. Never change anything in node_modules and vendor.

@krekas thank you. I already deleted that line.