Symfony Webpack: Could not find the entrypoints file from Webpack

Question

A relatively fresh Symfony 4.1.7 project after installing Webpack Encore throws the error

An exception has been thrown during the rendering of a template ("Could not find the entrypoints file from Webpack: the file ".../public/build/entrypoints.json" does not exist.")

where the template includes {{ encore_entry_link_tags('app') }} when launching http://127.0.0.1:8000/

What have I missed?

$ yarn encore dev
Running webpack ...

 DONE  Compiled successfully in 1974ms

 I  3 files written to public\build
Done in 3.33s.

.../public/build contains

app.css
app.js
manifest.json

local Symfony versions:

symfony/webpack-encore-bundle       v1.0.0
symfony/webpack-encore-pack         v1.0.3

webpack.config.js:

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

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    // uncomment to create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning(Encore.isProduction())

    // uncomment to define the assets of the project
    .addEntry('app', './assets/js/app.js')
//     .addEntry('js/app', './assets/js/app.js')
//     .addStyleEntry('css/app')
//     .addStyleEntry('css/app', './assets/css/app.scss')

    // uncomment if you use Sass/SCSS files
    // .enableSassLoader()

    // uncomment for legacy applications that require $/jQuery as a global variable
     .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Answer 1

Update your version constraint in package.json for @symfony/webpack-encore to ^0.21.0

...
"devDependencies": {
    "@symfony/webpack-encore": "^0.21.0",
...

add .enableSingleRuntimeChunk() to your webpack.config.js

...
.addEntry('app', './assets/js/app.js')
//     .addEntry('js/app', './assets/js/app.js')
//     .addStyleEntry('css/app')
//     .addStyleEntry('css/app', './assets/css/app.scss')
.enableSingleRuntimeChunk()
...

Then run yarn upgrade or yarn install

PS: If you have symfony/webpack-encore-bundle installed, you can remove symfony/webpack-encore-pack

composer remove symfony/webpack-encore-pack

Answer 2

In case somebody is running into a similar issue on staging or production servers: Make sure the asset build is run in the deployment process. On Heroku, for example, you need to use a postinstall script.

{
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.5.0",
        "@symfony/webpack-encore": "^0.22.0",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "postinstall": "encore production --progress" // executed during deployment to Heroku
    },
    "dependencies": {
        "bootstrap": "^4.1.3",
        "fontawesome": "^4.7.2",
        "jquery": "^3.3.1",
        "node-sass": "^4.10.0",
        "popper.js": "^1.14.6",
        "sass-loader": "^7.1.0"
    }
}