Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
loru88 opened this issue Sep 13, 2017 · 4 comments
Closed

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

loru88 opened this issue Sep 13, 2017 · 4 comments

Comments

@loru88
Copy link

loru88 commented Sep 13, 2017 •
edited

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
@Koc
Copy link
Contributor

Koc commented Oct 15, 2017

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
Copy link

xaben commented 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
Copy link

jtreminio commented Mar 14, 2018 •
edited

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 Aerendir mentioned this issue Apr 7, 2018
Closed
@yura3d yura3d mentioned this issue Aug 24, 2020
Closed
Haehnchen added a commit that referenced this issue May 5, 2022
@Haehnchen
#1536 #1020 support manifest.json inside assets
3c4182e
@Haehnchen
Copy link
Owner

both webpack / encore files are supported now

Haehnchen added a commit that referenced this issue May 5, 2022
@Haehnchen
Merge pull request #1916 from Haehnchen/feature/1536-manifest-json
bf8fbbc 
#1536 #1020 support manifest.json inside assets
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@Koc @jtreminio @xaben @loru88 @Haehnchen