Fails to load fonts since update

[karolyi]

Hey,

I just updated to 1.1.3 from 0.11.2, and ever since my fonts fail to load. I use the latest webpack packages, thanks to regularly updating because of actively working on my project..

What I can see in the console is that instead of loading the font files, the browser tries to load http://test.localdomain:8000/[object%20Object]. test.localdomain:8000 is my local dev environment, but it fails on the dev/live server the same way, requesting [object%20Object] instead of the font path.

here's my webpack config base:

const path = require('path')
const webpack = require('webpack')

const postCssConfigPath = path.resolve(
  path.join(__dirname, '..', '..', 'postcss.config.js'))

module.exports = {
  context: __dirname,

  entry: {
    common: [
      '../src/js/common',
    ],
    scssShop: [
      '../src/scss/shop/base.scss',
    ],
    commonShop: [
      '../src/js/shop/common-shop',
    ],
    scssAdmin: [
      '../src/scss/admin/base.scss',
    ],
    commonAdmin: [
      '../src/js/admin/common-admin',
    ],
    commonAdminDelete: [
      '../src/js/admin/common-delete',
    ],
    authGroupCommon: [
      '../src/js/admin/auth-group-common',
    ],
    authUserCommon: [
      '../src/js/admin/auth-user-common',
    ],
    adminProfileEdit: [
      '../src/js/admin/profile-edit',
    ],
    adminBookingOfficeAddEdit: [
      '../src/js/admin/auth-bookingoffice-add-edit',
    ],
    adminEmailTextAddEdit: [
      '../src/js/admin/snippet-emailtext-add-edit',
    ],
    adminSeasonAddEdit: [
      '../src/js/admin/event-season-add-edit',
    ],
    adminPerformanceSeriesAddEdit: [
      '../src/js/admin/event-performanceseries-add-edit',
    ],
    adminPerformanceAddEdit: [
      '../src/js/admin/event-performance-add-edit',
    ],
    adminPerformanceAddMany: [
      '../src/js/admin/event-performance-add-many',
    ],
    adminSeatGroupAddEdit: [
      '../src/js/admin/pricing-seatgroup-add-edit',
    ],
    adminPriceCategoryAddEdit: [
      '../src/js/admin/pricing-pricecategory-add-edit',
    ],
    adminDiscountAddEdit: [
      '../src/js/admin/pricing-discount-add-edit',
    ],
    adminPaymentMethodAddEdit: [
      '../src/js/admin/pricing-paymentmethod-add-edit',
    ],
    commonListFilterForm: [
      '../src/js/admin/common-list-filter-form',
    ],
    adminBookingStart: [
      '../src/js/admin/booking-start',
    ],
    adminBookingStep3: [
      '../src/js/admin/booking-step3',
    ],
    adminBookingStep4: [
      '../src/js/admin/booking-step4',
    ],
    adminBookingCartDetailed: [
      '../src/js/admin/booking-cart-detailed',
    ],
    adminOrderHistory: [
      '../src/js/admin/order-history',
    ],
    adminOrderPaymentAndDocuments: [
      '../src/js/admin/order-payment-and-documents',
    ],
    adminFinanceBilledPeriodAdd: [
      '../src/js/admin/finance-billed-period-add',
    ],
  },

  output: {
    path: path.resolve(path.join(__dirname, '..', 'dist', 'assets')),
    publicPath: '/static/assets/',
    filename: '[name].js',
    // http://stackoverflow.com/questions/34357489/calling-webpacked-code-from-outside-html-script-tag
    libraryTarget: 'var',
    library: ['TicketShop', '[name]'],
  },

  // configure your plugins at the separate mode level files
  module: {
    rules: [
      // !!! Keep this at 1st place, prod settings modify this
      {
        test: /node_modules\/.*\.(ttf|eot|svg|woff)(\?.*)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
          },
        }],
      },
      // !!! Keep this at 2nd place, prod settings modify this
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype: 'application/font-woff',
            name: 'fonts/[name].[ext]',
          },
        }],
      },
      {
        test: /frontend\/src\/assets\/.*.svg$/,
        use: [{
          loader: 'raw-loader',
        }],
      },
      {
        test: /popper\.js.*$/,
        use: [{
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: [
              [
                'es2015',
                {
                  modules: 'umd',
                },
              ],
            ],
          },
        }],
      },
      // Transpile ES6 to ES5 in Bootstrap V4
      {
        test: /bootstrap\/js\/src\/.*\.js$/,
        use: [{
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: [
              [
                'es2015',
                {
                  loose: true,
                  modules: false,
                },
              ],
            ],
          },
        }, {
          loader: 'imports-loader',
          options: {
            jQuery: 'jquery',
            Popper: 'popper.js/dist/umd/popper',
          },
        }],
      },
      {
        // Transpile ES6 to ES5 everywhere except node_modules
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            babelrc: true,
          },
        }],
      },
      {
        test: /\.json$/,
        use: [{ loader: 'json-loader' }],
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader', options: { useable: true } },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: { config: { path: postCssConfigPath }, sourceMap: true },
          },
        ],
      },
      {
        test: /.*\.html(\?.*)?$/,
        use: [{
          loader: 'raw-loader',
        }],
      },
    ],
  },
  // This will be extended later on from configs that inherit this
  // module
  plugins: [
    // This is FUBAR. See https://stackoverflow.com/a/25426019/1067833
    // See also https://github.com/moment/moment/issues/2517#issuecomment-185836313
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de/),
  ],

  resolve: {
    modules: [
      path.resolve(__dirname, '../..'),
      path.resolve(__dirname, '../../node_modules'),
    ],
    extensions: ['.js'],
  },
}

As you can see, regarding the file-loader, a pretty basic config is in place.

I guess until we don't figure out the exact cause of the error, I'll have to revert to 0.11.2.

[phawrylak]

I have the same problem after update to 1.1.3. After revert to 0.11.2 everything works again. Definitely something is wrong with this version.

[hoangphuong020193]

same issue. I'll have to revert to 0.11.2. wait for fix.

[dalimian]

same here, i was updating from 0.9.0
basically, it turned my url(blabla.b946e5ec5f62646a5812e4748b8fa5ec.woff2) into url([object Object])

had the same issue with 1.0.0, downgraded to 0.11.2

[boaticus]

Experiencing the same issue. I'll also confirm that reverting back to 0.11.2 fixed it. Waiting for a fix.

[karolyi]

can confirm it's fixed now.

[joshwiens]

@boaticus @hoangphuong020193 @phawrylak - Give me a thumbs up if your specific issue is resolved using file-loader@1.1.4