Webpack-encore: Problem css background images

[daninr]

Hello, I'm having some troubles using Symfony4 with Encore and Webpack.

With my configuration I cannot resolve background images on my css.

I have a css file with some background images referenced:

.user-menu li.user-menu_mystyle a {
    background: url(../img/private-area/private-area-icon-style.svg) no-repeat 10px center; 
}
.user-menu li.user-menu_mystyle a:hover, .user-menu li.user-menu_mystyle a:active {
    background-color: #d7eeed; 
}

And this is my webpack.config.js:

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

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(true)

    // uncomment to define the assets of the project
     .addEntry('js/main', './assets/js/main.js')
     .addEntry('js/fluidvids', './assets/js/fluidvids.js')
     .addEntry('js/modernizr', './assets/js/modernizr.js')

     .addStyleEntry('css/screen', './assets/css/screen.css')
     .addStyleEntry('css/ie', './assets/css/ie.css')
     .addStyleEntry('css/print', './assets/css/print.css')

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

    .addLoader({
        test: /\.(png|jpg|svg)$/,
        loader: 'file-loader',
        options: {
            name: '/[name].[hash:7].[ext]',
            publicPath: '/build',
            outputPath: 'images'
        }
    })
    .addLoader({
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
        query: {
            presets: ["es2015", "react", "stage-0"]
        }
    })

    .addPlugin(ManifestPlugin)

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

module.exports = Encore.getWebpackConfig();

When I execute this command:

./node_modules/.bin/encore dev

It generates on public/build/images two files for each referenced image:

First (with name: arrow-back.77e1028a.svg) with this content:

module.exports = "/build/arrow-back.81414ee.svg";

And second (with name: arrow-back.81414ee.svg) is the correct image, but my compiled css file is referencing to first file, and cannot resolve file... browser is thowing this error:

I also included manifest.json into Symfony4 configuration:

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

Can someone explain me what I'm doing wrong? I cannot find this error on documentation.

[Lyrkan]

Hi @daninr,

I can't reproduce that issue with the following files (and test.svg being a random SVG file):

/* test.css */
body {
  background: url('./test.svg');
}

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

Encore
  .setOutputPath('build/')
  .setPublicPath('/build')
  .cleanupOutputBeforeBuild()
  .addStyleEntry('test', './test.css')
;

module.exports = Encore.getWebpackConfig();

Is there a specific reason that made you call addLoader for images and JS files?
These loaders are already managed by Encore by default and by adding them again you'll end-up with duplicated instances (which I suspect is causing your issue).

Same thing for the ManifestPlugin, it should already be added automatically.

[daninr]

Hi @Lyrkan

Thanks for your reply.

I'm call addLoader for JS files because i'm working with ReactJS and without this configuration it breaks when compiling.

I removed ManifestPlugin and still not working.

EDIT: Now I get working removing custom loaders... you was right, it didn't work for me days ago... Thanks you very much!

[ebuildy]

I found the same bug by following the Symfony 5 tutorial. Here how I fix it:

webpack.config.js

...
.configureLoaderRule('images', (loaderRule) => {
    loaderRule.options.esModule = false;
  })
...

[Lyrkan]

@ebuildy That shouldn't be necessary since the version of file-loader included in Encore does not have the esModule option yet (see https://github.com/symfony/webpack-encore/issues/678#issuecomment-566042729)

[ebuildy]

I managed to fix this in a new project, using "@symfony/webpack-encore": "^0.28.2", I have followed the official tutorial from symfony.com, then I had this bug, end this fixed it.