Conflicting file-loader documentation

[lmartins]

Hi, I'm having issues getting file-loader to work and I have noticed that the documentation seems to be contradicting itself in relation to the usage of this Webpack loader.

On the Using file-loader section it says that we should not use the file-loader directive directly, but rather use the fileLoader provided by the scripts API:

Do not use file-loader as a direct value. Import fileLoader from API and use it instead.

However the example given on the Nodejs API documentation it seems to be contradicting that information by using file-loader instead.

Regardless of what I try though, I can't get this feature to work though. I can get the script to log a path to the file, like this: //192.168.86.86:3000/wp-content/themes/themename/dist/app/assets/fig1-b2cdecd7.png but both browser console and the CLI output show:

./src/js/components/content/FrameCalculator/img/fig1.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Any clues to what I may be missing?

Currently my wpackio.project.js is setup like this (some parts omitted for brevity):

const pkg = require('./package.json');
const path = require('path');

const {
  getFileLoaderOptions,
  // getBabelPresets,
  // getDefaultBabelPresetOptions,
  issuerForJsTsFiles,
  issuerForNonJsTsFiles,
  issuerForNonStyleFiles,
  // babelLoader,
  fileLoader,
  // eslint-disable-next-line import/no-extraneous-dependencies
} = require('@wpackio/scripts');

const webpackOverrideCallback = (config, merge, appDir, isDev) => {
  const configWithSvg = {
    module: {
      rules: [
        {
          test: /\.(svg|mp4|webm|webp|png)$/,
          use: [
            {
              loader: fileLoader,
              options: getFileLoaderOptions(appDir, isDev, false),
            },
          ],
          issuer: issuerForNonStyleFiles,
        },
        {
          test: /\.(svg|mp4|webm|webp|png)$/,
          issuer: issuerForNonJsTsFiles,
          use: [
            {
              loader: fileLoader,
              options: getFileLoaderOptions(appDir, isDev, true),
            },
          ],
        },
      ],
    },
  };

  // merge our custom rule with webpack-merge
  return merge(config, configWithSvg);
};

module.exports = {
  // Project Identity
  appName: 'appname', // Unique name of your project
  type: 'theme', // Plugin or theme
  slug: 'themename', // Plugin or Theme slug, basically the directory name under `wp-content/<themes|plugins>`
  // Files we need to compile, and where to put
  files: [
    {
      name: 'app',
      entry: {
        app: ['./src/js/app.js'], // Or an array of string (string[])
      },
      // If enabled, all WordPress provided external scripts, including React
      // and ReactDOM are aliased automatically. Do note that all `@wordpress`
      // namespaced imports are automatically aliased and enqueued by the
      // PHP library. It will not change the JSX pragma because of external
      // dependencies.
      optimizeForGutenberg: false,
      webpackConfig: webpackOverrideCallback,
    },
  ],
  // Output path relative to the context directory
  // We need relative path here, else, we can not map to publicPath
  outputPath: 'dist',
  // Project specific config
  // Needs react(jsx)?
  hasReact: true,
};