Symfony4.2 Assets compilation

Question

I have an app that use Symfony4.2 but started with 4.0 and then 4.1.

It seems the Assets compilation changed in 4.2, there is now {{ encore_entry_link_tags('app') }} or a entrypoints.json and runtime.js.

Or these 2 last files should be there.

Of course I installed the webpack-encore-bundle + the npm/yarn package like this link.

But when I compile with yarn encore dev or ./node_modules/.bin/encore dev these files are not in my build folder.

So I have Exceptions using encore_entry_link_tags:

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

I use fomantic-ui as frontend library and it seems to not working with yarn (yarn install raise some exceptions) so maybe all the packages are not installed ?

I tried to to npm install instead of yarn install but seems there is something missing, I still don't have these entrypoint.json and runtime.js files.

For information here is my webpackConfig

// webpack.config.js
let Encore = require('@symfony/webpack-encore');

Encore
// the project directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath((!Encore.isProduction()) ? '/rapp/build' : '/build')

    // this is now needed so that your manifest.json keys are still `build/foo.js`
    // i.e. you won't need to change anything in your Symfony app
    .setManifestKeyPrefix('build')

    // will create public/build/main.js and public/build/main.css
    .addEntry('main', './assets/js/main.js')
    //Add entry if other js/css needed. first parameter is the generated filename.
    //require scss file in js. (if you addEntry for scss file only, it will create a js file with same name)
    .addEntry('reader', './assets/js/reader.js')

    //file upload with dropzone
    .addEntry('dropzone', './assets/js/dropzone.js')

    //Admin chapter js
    .addEntry('admin-chapter', './assets/js/chapter.js')

    .addEntry('admin-unfollow', './assets/js/backend/unfollow.js')

    //addStyleEntry : for css file only
    .addStyleEntry('public', './assets/css/public.scss')

    // allow sass/scss files to be processed
    .enableSassLoader()

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

// create hashed filenames (e.g. app.abc123.css)
    .enableVersioning()

    .createSharedEntry('vendor', [
        'jquery',
    ])

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })

    /*.copyFiles({
        from: './assets/img',
        // optional target path, relative to the output dir
        //to: 'images/[path][name].[ext]',

        // if versioning is enabled, add the file hash too
        to: 'images/[path][name].[hash:8].[ext]',

        // only copy files matching this pattern
        pattern: /\.(png|jpg|jpeg|gif|ico|svg|webp)$/
    })*/

    .configureFilenames({
        images: '[path][name].[hash:8].[ext]'
    })
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

In the webpackConfig the copyFiles methos raise an exception too : Error: Encore.copyFiles is not a recognized property or method.

I don't know if I completely messed up something by upgrading from symfony4.1 and installing the encore js and bundle, but it seems the new Symfony Assets is quite broken.

EDIT :

I followed the steps here and I now have an exception, preventing all compilation.

"./node_modules/.bin/encore" dev Running webpack ...

D:\PhpStormProjects\bookuto\node_modules\webpack-cli\bin\cli.js:235
                                throw err;
                                ^

TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.
    at Object.<anonymous> (D:\PhpStormProjects\bookuto\node_modules\mini-css-extract-plugin\dist\index.js:26:44)
    at Module._compile (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (D:\PhpStormProjects\bookuto\node_modules\mini-css-extract-plugin\dist\cjs.js:3:18)
    at Module._compile (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (D:\PhpStormProjects\bookuto\node_modules\@symfony\webpack-encore\lib\loaders\css-extract.js:12:30)
    at Module._compile (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (D:\PhpStormProjects\bookuto\node_modules\@symfony\webpack-encore\lib\config-generator.js:12:30)
    at Module._compile (D:\PhpStormProjects\bookuto\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)

yarn encore dev does the same error.

Answer 1

I managed to fix it!

For people having an "old" symfony app, take care to

• update webpack version like this : "webpack": "^4.28.4"

A warning is raised when you compile webpackEncore : WARNING Webpack is already provided by Webpack Encore, also adding it to your package.json file may cause issues. but, in my case, ig I remove webpack frome my package.json it stopped working, completely, saying "webpack is not found" or something similar

• update your "@symfony/webpack-encore" to at least "^0.21.0"

• If you don't have symfony-flex, add these following config files

assets.yaml

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

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%/public/build'

And in your bundles.php

Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],

• update your "sass-loader" to "^7.0.1" at least (it's recommended, if you have a lesser version it will raise a werning about certain functions in webpack config file.)

Hope I didn't miss something and that it could help other people.