Use Stimulus Bridge with different webpack builds

[jvanoostrom]

Hi all,

I'm trying to get stimulus to work together with the Bolt CMS (link), which is a Symfony application. I've created some custom code to run along Bolt, for which I also added webpack encore. I've created a build in webpack_encore.yaml.

Now, following the installation steps of Encore and Stimulus, encore throws me a build error:

 ERROR  Failed to compile with 1 errors10:53:29

Module build failed: Module not found:
"./assets/bootstrap.js" contains a reference to the file "./controllers".
This file can not be found, please check it for typos or update it if the file got moved.

My bootstrap.js contains the exact code from the stimulus guide:

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

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

My 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/')

    .copyFiles({
        from: './public/theme/cavv-2021/img',
    })

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * 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')
    //.addEntry('page1', './assets/page1.js')
    //.addEntry('page2', './assets/page2.js')

    // 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())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    .enableStimulusBridge('./assets/controllers.json')

// enables Sass/SCSS support
//.enableSassLoader()

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

// 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()

// uncomment if you use API Platform Admin (composer require api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/admin.js')
;

module.exports = Encore.getWebpackConfig();

My webpack_encore.yaml:

webpack_encore:
    # The path where Encore is building the assets.
    # This should match Encore.setOutputPath() in webpack.config.js.
    output_path: '%kernel.project_dir%/%bolt.public_folder%/assets'
    builds:
        cavv: '%kernel.project_dir%/%bolt.public_folder%/build'

And finally my assets.yaml:

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/%bolt.public_folder%/assets/manifest.json'
        packages:
            cavv:
                json_manifest_path: '%kernel.project_dir%/%bolt.public_folder%/build/manifest.json'

Like said, it throws me an error. I've followed the exact same steps on a fresh symfony install, and I noticed 2 things:

1. On the fresh install, all default files are auto-generated. Not in the existing Bolt install.
2. The fresh install does not throw any errors (default setup, no builds or anything)

Anyone has any idea?

Thanks in advance!

Jeffrey

[GuillaumeSTEIN]

Hi, I have exactly the same issue :/ build work in dev but not in prod. If you find anything, please let us know

[GuillaumeSTEIN]

Ok I found a solution to my problem. The folder controllers was missing. Initialy it has been created here ./assets/controllers , so I created ./assets/js/controllers to fit my app architecture.

[weaverryan]

Hi!

About the original error. Your bootstrap.js file correctly looks like this:

// assets/bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bridge';

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

And the error is:

"./assets/bootstrap.js" contains a reference to the file "./controllers".

That ./controllers part comes from the END of the long '@symfony/stimulus-bridge/lazy-controller-loader!./controllers', line. Everything in front of the ! is fancy "loader" magic. What this line "basically" is doing is looking for a controllers directory next to the bootstrap.js file (so assets/controllers). Double check that it's there :).

Cheers!