“Parsing error: invalid character” when bundling images with Webpack's loaders

Question

When I'm trying to bundle my React project, I get the following error regarding an image I'm about to load:

Oddly enough, when I hide the error overlay, I can see in a browser that my picture has been loaded correctly, despite Webpack's complaints. I've already been carefully following other working config examples, where that problem doesn't occur, but I can't easily identify the source of the issue, what leaves me here with no idea how to approach it or where to look for a hint. I've also tried different loaders: url-loader , file-loader and image-webpack-loader , but to no avail. Maybe that's Typescript what causes these troubles?

App.tsx where I'm importing my image:

import "./app.d";
import React from "react";
import SampleImage from "./assets/images/sample-image.jpg";

const App: React.FC = () => (
  <div>
    <img src={SampleImage} />
  </div>
);

export default App;

app.d.ts with modules declarations to allow importing assets in typescripts files:

declare module "*.jpeg";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.png";

webpack.common.ts - my main Webpack config file, where I placed both url-loader and file-loader as it is in ejected create-react-app config, but it doesn't really change anything:

import path from "path";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";

module.exports = {
  entry: path.resolve(__dirname, "..", "./src/index.tsx"),
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              presets: [
                "@babel/preset-env",
                "@babel/preset-react",
                "@babel/preset-typescript",
              ],
            },
          },
        ],
      },
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.(ts|tsx)$/,
          /\.css$/,
          /\.json$/,
          /\.bmp$/,
          /\.gif$/,
          /\.jpe?g$/,
          /\.png$/,
        ],
        loader: require.resolve("file-loader"),
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
        include: path.resolve(__dirname, "..", "./src/assets"),
      },

      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve("url-loader"),
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
        include: path.resolve(__dirname, "..", "./src/assets"),
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx"],
  },
  output: {
    path: path.resolve(__dirname, "..", "./dist"),
    filename: "bundle.js",
  },
  devServer: {
    contentBase: path.resolve(__dirname, "..", "./dist"),
    hot: true,
    compress: true,
    open: true,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "React App",
      template: path.resolve(__dirname, "..", "./src/index.html"),
    }),
    new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: path.resolve(__dirname, "..", "./src/**/*"),
      },
    }),
  ],
};

webpack.dev.ts

import webpack from "webpack";
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";

module.exports = {
  mode: "development",
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              presets: [
                "@babel/preset-env",
                "@babel/preset-react",
                "@babel/preset-typescript",
              ],
              plugins: [require.resolve("react-refresh/babel")],
            },
          },
        ],
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin({
      overlay: {
        sockIntegration: "wds",
      },
    }),
  ],
};

webpack.prod.ts

import webpack from "webpack";

module.exports = {
  mode: "production",
  devtool: "source-map",
};

webpack.config.ts

import merge from "webpack-merge";
import devConfig = require("./webpack.dev");
import prodConfig = require("./webpack.prod");
import commonConfig = require("./webpack.common");

module.exports = ({ env }: { env: "dev" | "prod" }) => {
  const envConfig = env === "dev" ? devConfig : prodConfig;

  return merge(commonConfig, envConfig);
};

Additionaly, my .babelrc file:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "react-refresh/babel",
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

and tsconfig.json :

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

Scripts in package.json :

"scripts": {
  "start": "webpack serve --config config/webpack.config.ts --env env=dev --hot",
  "build": "webpack --config config/webpack.config.ts --env env=prod",
},

I'd be really grateful for any hint how to solve the issue.

Answer 1

Thanks to help received here: https://github.com/webpack/webpack/issues/12276#event-4152056913 , I've managed to surpass the error overlay by changing the options passed to the ForkTsCheckerWebpackPlugin in my webpack.common.ts file.

Before:

new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: path.resolve(__dirname, "..", "./src/**/*"),
      },
    }),

Now:

new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: path.resolve(__dirname, "..", "./src/**/*.{ts,tsx,js,jsx}"),
      },
    }),