Encountering issues while trying to integrate Bootstrap's js with Symfony 5, encore, stimulus, etc...
All required dependencies like jquery, popper, corejs are installed and functioning, except for Bootstrap's JS components.
The compilation of app.scss and app.js seems to be successful using sass, postcss, babel, including Bootstrap's CSS. However, the dropdowns and other JS functionalities from Bootstrap are not working.
assets/app.js
// Import any CSS to output into a single css file (app.css)
import './styles/app.scss';
// Initialize the Stimulus application
import './bootstrap';
assets/bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bridge';
// Register 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 custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);
Note: No specific controller found under assets/controllers
webpack.config.js
const Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured by the "encore" command.
// Useful when using tools relying on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath("public/build/")
.setPublicPath("/build")
// Define entry points for JavaScript and CSS files
.addEntry("app", "./assets/app.js")
.enableStimulusBridge('./assets/controllers.json')
.splitEntryChunks()
.enableSingleRuntimeChunk()
// Additional feature configurations
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push("@babel/plugin-proposal-class-properties");
})
.configureBabelPresetEnv((config) => {
config.useBuiltIns = "usage";
config.corejs = 3;
})
.enableSassLoader()
.enablePostCssLoader();
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"
}
Looking to troubleshoot these issues further? Reach out for more insights!