phpsymfonytwigwebpack-encorepimcore

The twig functions encore_entry_link_tags('app') and encore_entry_script_tags('app') both cause an internal server error

I am setting up a new Pimcore website locally and I can't seem to get the mentioned twig functions to work. I get this error message Error

When I comment out encore_entry_link_tags('app'), encore_entry_script_tags('app') causes the same error.

I followed this guide to install webpack encore into my pimcore project and the bundling works perfectly fine. Both SCSS and javascript files get bundled when I run npm run build and saved to public/build. It seems that just the final step won't work.

Here is my current 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())
    .enableSassLoader()
    .configureBabel((config) => {
        config.plugins.push("@babel/plugin-transform-class-properties");
    })

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

// enables Sass/SCSS support

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

I have tried looking at different projects to see how they implement this without much success. Everything in my code and configs looks just like in other functional projects. AI wasn't much help either and nobody else seems to have encountered this particular issue, which is why I decided to ask here.

Thank you for any help whatsoever!

Solution

  • After some more research I came across a file called webpack_encore.yaml. I found it in an old private project and it looked something like this:

    webpack_encore:
    # The path where Encore is building the assets - i.e. Encore.setOutputPath()
    output_path: '%kernel.project_dir%/public/build'
    # If multiple builds are defined (as shown below), you can disable the default build:
    # output_path: false

    # Set attributes that will be rendered on all script and link tags
    script_attributes:
        defer: true
        # Uncomment (also under link_attributes) if using Turbo Drive
        # https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
        # 'data-turbo-track': reload
    # link_attributes:
        # Uncomment if using Turbo Drive
        # 'data-turbo-track': reload

    # If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
    # crossorigin: 'anonymous'

    # Preload all rendered script and link tags automatically via the HTTP/2 Link header
    # preload: true

    # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
    # strict_mode: false

    # If you have multiple builds:
    # builds:
        # pass "frontend" as the 3rg arg to the Twig functions
        # {{ encore_entry_script_tags('entry1', null, 'frontend') }}

        # frontend: '%kernel.project_dir%/public/frontend/build'

    # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
    # Put in config/packages/prod/webpack_encore.yaml
    # cache: true

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

#when@prod:
#    webpack_encore:
#        # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
#        # Available in version 1.2
#        cache: true

#when@test:
#    webpack_encore:
#        strict_mode: false

    Usually this file would have been added automatically via symfony flex, but since I am using Pimcore, which doesn't use symfony flex, I had to create it myself.

    After adding this file I had no further issues and while I am still testing the general functionality, it could handle so far everything I threw at it.

    Hope this helps somebody in the future!