Karma, Webpack & Typescript: TS2307: Cannot find module 'log4js' or its corresponding type declarations

Question

When running karma ( npx karma start ) I get an error about a module

× ｢atl｣: Checking finished with 1 errors
i ｢atl｣: Checking started in a separate process...
× ｢atl｣: Checking finished with 1 errors
× ｢wdm｣:
ERROR in [at-loader] ./node_modules/@types/karma/index.d.ts:14:26
    TS2307: Cannot find module 'log4js' or its corresponding type declarations.
i ｢wdm｣: Failed to compile.
23 07 2020 12:53:39.790:WARN [karma]: No captured browser, open http://localhost:9876/
23 07 2020 12:53:39.803:INFO [karma-server]: Karma v5.1.0 server started at http://0.0.0.0:9876/
23 07 2020 12:53:39.803:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
23 07 2020 12:53:39.820:INFO [launcher]: Starting browser Chrome
23 07 2020 12:53:41.358:INFO [Chrome 84.0.4147.89 (Windows 10)]: Connected on socket CIrhkw1m_-3oa6JsAAAA with id 44315598
Chrome 84.0.4147.89 (Windows 10): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
Chrome 84.0.4147.89 (Windows 10): Executed 1 of 1 SUCCESS (0.125 secs / 0.002 secs)
TOTAL: 1 SUCCESS

It does succeed executing the tests, but it throws an error about log4js. How can I solve this error? (I already tried installing log4js npm package)

Karma config:

    config.set({
        basePath: "",
        frameworks: ["mocha"],
        files: [
            "UnitTests/**/*.browsertest.ts",
        ],
        preprocessors: {
            "UnitTests/**/*.browsertest.ts": "webpack",
        },
        webpack: webpackConfig,
        webpackMiddleware: {
          stats: 'errors-only'
        },
        reporters: ["progress"],
        browsers: ["Chrome"],
        autowatch: false,
    });

Webpack config (simplified but I confirmed this throws the same error):

{
      mode: "development",
      entry: {
         "dist/main.bundle": "./TypeScript/Main.entry.ts",
      },
      output: {
         path: path.join(__dirname, "wwwroot"),
         filename: "[name].js"
      },
      devtool: "source-map",
      resolve: {
         extensions: [".ts", ".js"]
      },
      module: {
         rules: [
            { 
               test: /\.tsx?$/, exclude: [/node_modules/], 
               use: ["awesome-typescript-loader"]
            }
         ]
      }
   }

tsconfig:

{
   "compileOnSave": true,
   "compilerOptions": {
      "experimentalDecorators": true,
      "sourceMap": true,
      "strictNullChecks": true,
      "noImplicitAny": true,
      "module": "amd",
      "target": "es6",
      "jsx": "react",
      "jsxFactory": "renderDom",
      "declaration": false,
      "esModuleInterop": true,
      "lib": [
         "WebWorker",
         "DOM",
         "es6"
      ],
      "typeRoots": [
         "./node_modules/@types",
         "./@types"
      ]
   },
   "include": [
      "TypeScript/**/*",
      "UnitTests/**/*"
   ],
   "exclude": ["node_modules"]
}

What I already tried:

Installing log4js by running yarn add log4js and yarn add @types/log4js

Answer 1

For now I have a solution, but if anyone knows a better solution I'd love to know. Because this requires copying a file from node_modules, and it won't be updated if the package is updated.

I copied the contents from node_modules/log4js/types/log4js.d.ts to a new file I made at @types/log4js/index.dts (Note this is our own @types directory as configured in our tsconfig seen above, it's not the folder in node modules). Then I slightly modified this index by adding this at the top of the file:

declare module "log4js" {

And at the bottom of the file:

}