Webpack-encore: Fonts are not loaded correctly - url([object Module]) instead of url("font path....")

[naive17]

/* eslint-disable */
let Encore = require('@symfony/webpack-encore');

const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Encore
  .enableSingleRuntimeChunk()
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .cleanupOutputBeforeBuild()
  .autoProvidejQuery()
  .addEntry('app', './assets/js/app.js')

  // .addEntry('agenda', './assets/js/pages/agenda.js')
  /*  .addEntry('contratto', './assets/js/pages/contratto.js')
    .addEntry('workflow', './assets/js/pages/workflow.js')
    .addEntry('cliente', './assets/js/pages/cliente.js')
    .addEntry('schedacontratto', './assets/js/pages/schedacontratto.js')
    .addEntry('listacontratto', './assets/js/pages/listacontratto.js')
    .addEntry('form', './assets/js/form.js')
    .addEntry('lista', './assets/js/lista.js')*/

  .splitEntryChunks()
  .addStyleEntry('style', './assets/css/app.less')
  .addLoader({
    test: /\.ya?ml$/,
    use: 'webpack-yaml-loader',
  })
  .addLoader({
    test: /\.ttf$/,
    use: [
      {
        loader: 'ttf-loader',
        options: {
          name: './font/[hash].[ext]',
        },
      },
    ]
  })
  .enableBuildNotifications()
  .enableVersioning(Encore.isProduction())
  .enableVueLoader()
  .enableLessLoader()
  .addLoader({
    test: /\.pug$/,
    oneOf: [
      {
        resourceQuery: /^\?vue/,
        use: ['pug-plain-loader']
      },
      {
        use: ['raw-loader', 'pug-plain-loader']
      }
    ]
  })
  .configureBabel((babelConfig) => {
    babelConfig.presets = ['@babel/preset-env'];
    babelConfig.plugins = ['@babel/plugin-syntax-flow', '@babel/plugin-transform-flow-strip-types', '@babel/plugin-transform-runtime',
      ['wildcard', {
        exts: ['js', 'es6', 'es', 'jsx'],
      }]];
  })

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

  ;

const webpackConfig = Encore.getWebpackConfig();

//console.log(webpackConfig.plugins);
/*
webpackConfig.plugins = webpackConfig.plugins.filter(
    plugin => !(plugin instanceof webpack.optimize.UglifyJsPlugin)
);*/

/*
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
*/
webpackConfig.resolve.alias = {
  vue$: 'vue/dist/vue.esm.js',
};

if (Encore.isProduction()) {
  Encore.cleanupOutputBeforeBuild();
  webpackConfig.plugins.push(new UglifyJsPlugin(
    {
      cache: true,
      parallel: true
    }
  ));
}

if (!Encore.isProduction()) {
  webpackConfig.devtool = 'cheap-module-source-map';
}


if (Encore.isDevServer()) {
  Encore.disableCssExtraction();
}

webpackConfig.devServer = {
  contentBase: path.join(__dirname, 'public/'),
  //watchContentBase: true,
  compress: true,
  host: '0.0.0.0',
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': '*',
  },
  //open: true,
  disableHostCheck: true,
  progress: true,
  /*watchOptions: {
    watch: true,
    poll: true
  }*/
};
//console.log(webpackConfig)

module.exports = webpackConfig;

[Lyrkan]

That's probably related to the loader you added to handle .ttf files.

By the way, Encore already provides something for that extension, if you want to replace it by your own you should either change that rule (using Encore.configureLoaderRule()) or disable it entirely (with Encore.disableFontsLoader()).

[naive17]

I want to handle all fonts extensions (woff, otf, woff2) and if i leave all the configuration untouched it doesn't work (i mean without any custom loader), and everything before the update to 0.28.x worked without any custom rule

[naive17]

I solved my problem using this loader (disabling font loader) and setting "esModule : false" on the option.

.disableFontsLoader()
  .addLoader(  {
    test: /\.(ttf|eot|svg|png|woff(2)?)(\?[a-z0-9]+)?$/,
    use: [{
      loader: 'file-loader', options: {esModule: false}
    }]
  })

[Lyrkan]

I solved my problem using this loader (disabling font loader) and setting "esModule : false" on the option.

I don't think that's related to an Encore update then... Encore includes file-loader@^1.1.10 and the esModule option only exists since [email protected] (well, it was introduced by 4.3.0 but was called esModules back then).

If you add packages that are already provided by Encore to your package.json it can cause that kind of issue since they may not be compatible with other built-in packages (for instance in this case you'd also need to update css-loader in order to support esModule: true)

[ebuildy]

It's always hard to determine the root cause, but this is a fix!

[crabnky]

Solution proposed by @koso00 was not suitable for me as directory I keep fonts in was changed. Here is what I did (thanks to @ebuildy):

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

All is working now as expected.