0

I'm new to Symfony and I'm trying to do an app from command

symfony new 'app_name' --version=6.4 --php=8.3 --webapp --docker --cloud

importmap seems to work fine and bootstrap css has been loaded well, the problem is the dropdown menu, I cannot see it.

This is the code in importmap.php:

<?php
//importmap.php
/**
 * Returns the importmap for this application.
 *
 * - "path" is a path inside the asset mapper system. Use the
 *     "debug:asset-map" command to see the full list of paths.
 *
 * - "entrypoint" (JavaScript only) set to true for any module that will
 *     be used as an "entrypoint" (and passed to the importmap() Twig function).
 *
 * The "importmap:require" command can be used to add new entries to this file.
 */
return [
    'app' => [
        'path' => './assets/app.js',
        'entrypoint' => true,
    ],
    '@hotwired/stimulus' => [
        'version' => '3.2.2',
    ],
    '@symfony/stimulus-bundle' => [
        'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
    ],
    '@hotwired/turbo' => [
        'version' => '7.3.0',
    ],
    'bootstrap' => [
        'version' => '5.3.3',
    ],
    '@popperjs/core' => [
        'version' => '2.11.8',
    ],
    'bootstrap/dist/css/bootstrap.min.css' => [
        'version' => '5.3.3',
        'type' => 'css',
    ],
    'jqueryify' => [
        'version' => '1.11.0',
    ],
];

And this is what's written in app.js:

//app.js
import './bootstrap.js';

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/app.css';
/*
 * Welcome to your app's main JavaScript file!
 *
 * This file will be included onto the page via the importmap() Twig function,
 * which should already be in your base.html.twig.
 */
import '@popperjs/core';

console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

I have installed bootstrap with command:

bin/console importmap:require bootstrap

and imported into app.js, the fonts are recognized while scripts are not, Symfony doesn't display any error, what is wrong? I really don't have a clue!

01/01/2025 HAPPY NEW YEAR TO EVERYONE!!!! I have bypassed it including bootstrap link and scripts in base.html.twig, this works fine even if it is not the best way to do it, if someone knows how to fix it I will be infinitely grateful to him\her!

Improve this question
7
  • Recommend pasting your code as code blocks vice links to pictures. Additionally, recommend including any errors you may be seeing on the console. Commented Dec 28, 2024 at 18:00
  • Hi, thank you, I will tomorrow, I don't have errors, that's the main problem! Commented Dec 28, 2024 at 22:51
  • Sometimes this type of problems happens when bootstrap is loaded before popper...try to import @popperjs/core before bootstrap in your app.js file Commented Dec 30, 2024 at 7:54
  • @MoWiz not working :( Commented Jan 1 at 17:09
  • I'm intringued by the way you import boostrap in your app.js file... personnally i use Webpack to handle my dependencies. don't you think the first line of your app.js file should be import 'bootstrap' ? Because what you are doing in my understanding of the code you provided is importing a boostrap.js file that is in your directory (line 1). Commented Jan 2 at 10:17
Related questions
1
TailwindCSS v4 Build Causes No Styles to Display in Symfony (using Importmap)
0
Symfony: Assetic not using controller with bootstrap bundle?
0
How do I use Bootstrap 5.3.3 css and have the buttons back to their original colours with glyphicons?
Load 4 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.