1

I am having difficulties loading Bootstrap's js with Symfony 5, encore, stimulus etc...

jquery, popper, corejs, etc all installed and at least jquery is working...

app.scss and app.js seems to compile well using sass, postcss and babel, including Bootstrap's CSS. Just Bootstrap's JS is not there, so no dropdowns, etc.

assets/app.js

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';

// start the Stimulus application
import './bootstrap';

assets/bootstrap,js

import { startStimulusApp } from '@symfony/stimulus-bridge';

// Registers Stimulus controllers from controllers.json and in the controllers/ directory
 export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.(j|t)sx?$/
));

// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);

note: There is no specific controller under assets/controllers

webpack.config.js

const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
  // directory where compiled assets will be stored
  .setOutputPath("public/build/")
  // public path used by the web server to access the output path
  .setPublicPath("/build")
  // only needed for CDN's or sub-directory deploy
  //.setManifestKeyPrefix('build/')

  /*
   * ENTRY CONFIG
   *
   * Each entry will result in one JavaScript file (e.g. app.js)
   * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
   */
  .addEntry("app", "./assets/app.js")

  // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
  .enableStimulusBridge('./assets/controllers.json')

  // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
  .splitEntryChunks()

  // will require an extra script tag for runtime.js
  // but, you probably want this, unless you're building a single-page app
  .enableSingleRuntimeChunk()

  /*
   * FEATURE CONFIG
   *
   * Enable & configure other features below. For a full
   * list of features, see:
   * https://symfony.com/doc/current/frontend.html#adding-more-features
   */
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  // enables hashed filenames (e.g. app.abc123.css)
  .enableVersioning(Encore.isProduction())

  .configureBabel((config) => {
    config.plugins.push("@babel/plugin-proposal-class-properties");
  })

  // enables @babel/preset-env polyfills
  .configureBabelPresetEnv((config) => {
    config.useBuiltIns = "usage";
    config.corejs = 3;
  })

  // enables Sass/SCSS support
  .enableSassLoader()

  // enable PostCSS
  .enablePostCssLoader();

// uncomment if you use TypeScript
//.enableTypeScriptLoader()

// uncomment if you use React
//.enableReactPreset()

// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())

// uncomment if you're having problems with a jQuery plugin
// .autoProvidejQuery()

module.exports = Encore.getWebpackConfig();

package.json (only dependencies)

  "devDependencies": {
    "@popperjs/core": "^2.10.2",
    "@symfony/stimulus-bridge": "^2.1.0",
    "@symfony/webpack-encore": "^1.6.1",
    "autoprefixer": "^10.4.0",
    "bootstrap": "^5.1.3",
    "core-js": "^3.19.1",
    "jquery": "^3.6.0",
    "postcss-loader": "^6.2.0",
    "sass": "^1.43.4",
    "sass-loader": "^12.3.0",
    "stimulus": "^2.0.0",
    "webpack-notifier": "^1.14.1"
  },
  "dependencies": {
    "popper.js": "^1.16.1"
  }

How to troubleshoot further?

2
  • did you add this to your app.scss @import "~bootstrap/scss/bootstrap"; Commented Nov 24, 2021 at 12:41
  • Yes @OussMaL'aireBien and css compiles well... it is JS which is not being loaded Commented Nov 24, 2021 at 14:22

3 Answers 3

5

You don't import bootstrap anywhere. You have your own file named bootstrap.js, but that does some unrelated stimulus things.

You need to add import 'bootstrap'; to app.js.

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you, yes I've noticed meanwhile I confused stimulus ".bootstrap" file with bootstrap itself :facepalm:
0

beware to import the correct one. you need to import with: import './bootstrap'; because mine import 'boostrap'; imports getbootstrap library.

Comments

0

I had the same issues so I have install stimulus with yarn. All info in this website :

https://www.npmjs.com/package/@symfony/stimulus-bridge

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

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.