Skip to content

Missing assets in Twig autocompletation when using manifest.json and Webpack-Encore versioning #1020

New issue
New issue
Closed
Closed
Missing assets in Twig autocompletation when using manifest.json and Webpack-Encore versioning#1020
@loru88

Description

@loru88
loru88
opened on Sep 13, 2017 · edited by loru88

I configured my project to use webpack encore to handle assets with versioning following this guide, but twig can't suggest me the correct file.

My configuration is this:

in config.yml I have put this:

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

in my webpack.config.js I have this

.enableVersioning()

to enable versioning.

after running encore, my manifest.json become like this

{
  "build/app.js": "/build/app.177225afbc8589c7cfb4.js",
  "build/global.css": "/build/global.d41d8cd98f00b204e9800998ecf8427e.css"
}

this map my assets name to a new name with the version number. But obviously this change every time I edit my assets and run encore. Symfony knows how to handle this by reading the manifest.json file and place the mapped name of the asset (to better understand this read the guide).
But in any of my twig templates, the plugin can suggest me only the assets with the version number because they are the only who phisically exist.

I think it would be useful if the plugin can understand I'm using a manifest.json and suggest me the general asset name instead of alert of a missing asset.

missingasset

let me know if you understand the problem
thank you

Lorenzo

Activity

Koc

Koc commented on Oct 15, 2017

@Koc
Koc
on Oct 15, 2017
Contributor

Have same issue. Also there is another problem: project with remote sources by sftp, encore runned on remote server (actually docker) - and manifest.json should be downloaded on each rebuild.

xaben

xaben commented on Oct 18, 2017

@xaben
xaben
on Oct 18, 2017

Have the same problem, the issue is that the manifest file is not checked by the Symfony Plugin. On the hard drive the filename contains also the hash, so it never finds it.

This is a new feature, any plans or ETA for implementing it?

jtreminio

jtreminio commented on Mar 14, 2018

@jtreminio
jtreminio
on Mar 14, 2018 · edited by jtreminio

This is how I solved:

In your main JS file (where you define all require()):

const imagesCtx = require.context('../images', true, /\.(png|jpg|jpeg|gif|ico|svg|webp)$/);
imagesCtx.keys().forEach(imagesCtx);

This isn't strictly necessary to fix your issue, but it forces Encore to copy all image files over to public/build/assets/images/ directory. Otherwise, it only handles image files linked in your JS or CSS/SCSS files.

In your webpack.config.js:

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

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .enableSassLoader(function(sassOptions) {}, {
        resolveUrlLoader: false
    })
    .autoProvidejQuery({
        $: 'jquery',
        jQuery: 'jquery'
    })
    .enableSourceMaps(!Encore.isProduction())
    .cleanupOutputBeforeBuild()
    .enableVersioning(Encore.isProduction())
    .enableBuildNotifications()
;

if (Encore.isProduction()) {
    Encore.configureFilenames({
        images: '[path][name].[hash:8].[ext]',
        fonts: '[path][name].[hash:8].[ext]'
    });
} else {
    Encore.configureFilenames({
        images: '[path][name].[ext]',
        fonts: '[path][name].[ext]'
    });
}

module.exports = Encore.getWebpackConfig();

The important part is the if/else:

if (Encore.isProduction()) {
    Encore.configureFilenames({
        images: '[path][name].[hash:8].[ext]',
        fonts: '[path][name].[hash:8].[ext]'
    });
} else {
    Encore.configureFilenames({
        images: '[path][name].[ext]',
        fonts: '[path][name].[ext]'
    });
}

If in dev, do not use hashes; if in prod, use hashes.

Of course make sure .enableVersioning(Encore.isProduction()) is set.

Aerendir
mentioned this on Apr 7, 2018
yura3d
mentioned this on Aug 24, 2020
Haehnchen
added a commit that references this issue on May 5, 2022

#1536 #1020 support manifest.json inside assets

3c4182e
Haehnchen

Haehnchen commented on May 5, 2022

@Haehnchen
Haehnchen
on May 5, 2022
Owner

both webpack / encore files are supported now

Haehnchen
closed this as completedon May 5, 2022
Haehnchen
added a commit that references this issue on May 5, 2022

Merge pull request #1916 from Haehnchen/feature/1536-manifest-json

bf8fbbc
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Koc@jtreminio@xaben@loru88@Haehnchen

        Issue actions
          Missing assets in Twig autocompletation when using manifest.json and Webpack-Encore versioning · Issue #1020 · Haehnchen/idea-php-symfony2-plugin