Using flowbite with assets-mapper

[LyamD]

Hi, I'm trying to use the flowbite plugin with Symfony 7, assets-mapper and the tailwind-bundle.

I can't get the JS of flowbite to work. I've followed line by line the Symfony documentation, restarted the project from scratch, also tried the few tricks from this issue: #36

No matter how I import ("flowbite/plugin", "flowbite/plugin.js", full path), and I think i've tried every combination possible within app.js, tailwind.config.js and importmap.php, but it is still not working.

I don't have any js console errors, custom js and css are loaded, but none of the flowbite component are working.

What am I missing ? Is it still possible to do it ?

[bocharsky-bw]

Hm, the import path should be relative, it depends on where the file is located in which you're trying to include that flowbite. But IIRC you need to import the main flowbite package:

// The path should be correct only if you're in assets/app.js, otherwise change it correspondively
import '../vendor/flowbite/flowbite.js';

And I think in your tailwind.config.js it should be something like:

module.exports = {
  content: [
    './templates/**/*.html.twig',
    './assets/**/*.js',
    './assets/vendor/flowbite/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('./assets/vendor/flowbite/plugin'),
  ],
};

And in importmap.php:

return [
    'imports' => [
        'flowbite' => 'assets/vendor/flowbite/flowbite.js',
    ],
];

I hope that helps!

[luisibal]

Just a follow up, I left this message in the other thread:

I was struggling with this but the 'Solution' is not use the flowbite like this:

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}

Since this requires installing it with npm/ pnpm etc. and then flowbite/plugin looks up in the node_modules folder, that's why we get an error with AssetMapper because it doesn't use a node_modules folder. Using it like that was only one of the ways to use flowbite mentioned in the documentation.

https://flowbite.com/docs/getting-started/quickstart/

but simple use like this:

import 'flowbite';

in your js file where you want to use it and you can still configure tailwind the usual way.