title: Webpack5 - Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader
body: <p>Trying to import local images into my React project. I'm using statements like these, nothing fancy.</p>
  <p><code>&lt;Image source={require('./redvelvet.png')}&gt;&lt;/Image&gt;</code></p>
  <p>And here's the error it produces.</p>
  <pre><code>ERROR in ./src/components/redvelvet.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)
   @ ./src/components/MachineTemplate.js 157:16-42
   @ ./src/components/App.js 6:0-48 21:28-43
   @ ./src/index.js 1:0-35
  </code></pre>
  <p>I'm pretty sure I've narrowed it down to my webpack.config file, but for the life of me I can't figure out what I've done wrong.</p>
  <pre><code>const path = require(&quot;path&quot;);
  const webpack = require(&quot;webpack&quot;);
  
  module.exports = {
    entry: &quot;./src/index.js&quot;,
    output: {
      path: path.resolve(__dirname, &quot;./static/frontend&quot;),
      filename: &quot;[name].js&quot;,
    },
    module: {
      rules: [
        {
          test: /\.js$|jsx/,
          exclude: /node_modules/,
          use: {
            loader: &quot;babel-loader&quot;,
          },
        },
      ],
    },
    optimization: {
      minimize: true,
    },
    plugins: [
      new webpack.DefinePlugin({
        &quot;process.env&quot;: {
          // This has effect on the react lib size
          NODE_ENV: JSON.stringify(&quot;production&quot;),
        },
      }),
    ],
  };
  </code></pre>
  <p>Any help is appreciated. It feels like it's something simple I'm missing here.</p>