Plugin is not able to find a value in assetInfo with NEXT.js webpack configuration

[KristijanKanalas]

Hello, I have a next.js setup with my next.config.js looking like this:

const FontminPlugin = require('fontmin-webpack');

module.exports = {
  // we don't need Next to compress responses because
  // we use nginx for that
  compress: false,

  i18n: {
    locales: ["sr", "en"],
    defaultLocale: "sr",
    localeDetection: false
  },

  images: {
    domains: ["example.com"]
  },

  webpack(config, { isServer }) {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }

    config.plugins.push(
      new FontminPlugin({
        autodetect: true,
      })
    );

    return config;
  }
};

Next.js is using webpack 5. I haven't added the file-loader for fonts because the next config behind the scene is already using the file-loader.

The problem occurs when plugin runs the findRegularFontFiles and findExtractTextFontFiles methods as module.buildInfo.assetsInfo returns a map that looks like this:

Map(1) {
  'static/media/icomoon.9342720d57735a21e6eb7644ecd6f5ad.eot' => undefined
}

With the key being where the file will be after build and the value being undefined so when this line is run const filename = Array.from(module.buildInfo.assetsInfo.values())[0].sourceFilename it shows an error:

(node:52) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'sourceFilename' of undefined
    at /home/node/app/node_modules/fontmin-webpack/lib/index.js:57:77
    at arrayMap (/home/node/app/node_modules/lodash/lodash.js:653:23)
    at Function.map (/home/node/app/node_modules/lodash/lodash.js:9622:14)
    at interceptor (/home/node/app/node_modules/lodash/lodash.js:17094:35)
    at thru (/home/node/app/node_modules/lodash/lodash.js:8859:14)
    at /home/node/app/node_modules/lodash/lodash.js:4430:28
    at arrayReduce (/home/node/app/node_modules/lodash/lodash.js:697:21
    at baseWrapperValue (/home/node/app/node_modules/lodash/lodash.js:4429:14)
    at LazyWrapper.lazyValue [as value] (/home/node/app/node_modules/lodash/lodash.js:1901:16)
    at baseWrapperValue (/home/node/app/node_modules/lodash/lodash.js:4427:25)

To be honest I'm not sure if there is a problem in my setup or if netxt.js configuration behind the scene is not properly passing the assetsInfo or if there is a bug in this plugin on newer versions of webpack. I'm open to do a pull request if given instructions, I made it work locally by hacking the code to use the key instead of the value in assetsInfo but of course that's not the correct solution :smile:

[patrickhulce]

Thanks for filing @KristijanKanalas! I don't really have the bandwidth to dig deeper into this at the moment, but happy to land a PR that fixes it :)

A good place to start might be a minimal repro of the behavior with a test case. Perhaps in your next.js config you can log the entire webpack config to try it without next.js involved?

When we have that it might be easier to narrow down where the proper fix should happen.

[KristijanKanalas]

Thanks for the fast reply @patrickhulce. Yep, not a problem, I will dig deeper over the weekend and will check for differences between next.js webpack config and just webpack config and will report back. Thanks for the repro tips 🙂