[Bug] Webpack: False alerts with TypeScript >= 4.9

[vivi90]

False alerts

Following webpack loaders are false alerts (btw. all loaders, i use):

• babel-loader
• css-loader
• file-loader
• html-loader
• raw-loader
• source-map-loader
• style-loader

And the following polyfills:

• buffer
• es6-promise
• core-js

Additional false alerts due to this bug

Since depcheck is not able to parse my webpack.config.ts due to the bug, i get the following additional false alerts:

• copy-webpack-plugin
• fork-ts-checker-webpack-plugin
• html-webpack-plugin
• mustache
• @types/mustache
• office-addin-dev-certs
• tsconfig-paths-webpack-plugin
• @types/webpack
• webpack-dev-server
• @types/node
• crypto-browserify
• stream-browserify

The bug

TypeScript 4.9 introduced the satisfies operator, using it in my webpack.config.ts:

import CopyWebpackPlugin from "copy-webpack-plugin";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { render as mustacheRender } from "mustache";
import { getHttpsServerOptions } from "office-addin-dev-certs";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
import { Configuration as WebpackConfiguration, DefinePlugin, ProvidePlugin } from "webpack";
import { Configuration as WebpackDevServerConfiguration, ServerOptions } from "webpack-dev-server";

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

...

type EnvironmentSettings = {
  [key in EnvironmentName]: SomeSettings;
};

enum EnvironmentName {
  EXAMPLE1 = "environment1",
  EXAMPLE2 = "environment2",
  ...
}

type AvailableEnvironment = keyof typeof payload;

const payload = {
  environment1: {
    ...
  },
  environment1: {
    ...
  },
} satisfies Partial<EnvironmentSettings>;

...

module.exports = async (env: typeof process.env, options: Configuration["devServer"]) => {
  ...

  const config: Configuration = {
    devtool: "source-map",
    entry: {
      polyfill: ["core-js/stable", ...],
      ...
    },
    output: {
      ...
      clean: true,
    },
    resolve: {
      extensions: [".ts", ".tsx", ".html", ".js"],
      fallback: {
        buffer: require.resolve("buffer/"),
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
        timers: require.resolve("timers"),
      },
      plugins: [new TsconfigPathsPlugin()],
    },
    module: {
      rules: [
        {
          test: /\.[jt]s(x?)$/i,
          exclude: /node_modules/,
          use: ["react-hot-loader/webpack", "babel-loader"],
          resolve: {
            fullySpecified: false,
          },
        },
        {
          test: /\.txt$/i,
          use: "raw-loader",
        },
        {
          test: /\.html$/i,
          exclude: /node_modules/,
          use: "html-loader",
        },
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
        ...
      ],
    },
    plugins: [
      new ForkTsCheckerWebpackPlugin({
        typescript: {
          diagnosticOptions: {
            declaration: true,
            global: true,
            semantic: true,
            syntactic: true,
          },
        },
      }),
      new CopyWebpackPlugin({
        patterns: [
          ...
          {
            ...
            transform(content) {
              return mustacheRender(...);
            },
          },
        ],
      }),
      new HtmlWebpackPlugin({
        ...
        chunks: [..., "polyfills"],
      }),
      new DefinePlugin(
        ...
      ),
      new ProvidePlugin({
        Promise: ["es6-promise", "Promise"],
        Buffer: ["buffer", "Buffer"],
      }),
      ...
    ],
    devServer: {
      hot: true,
      headers: {
        ...
      },
      proxy: [
        ...
      ],
      ...
    },
  };

  return config;
};

depcheck --specials=babel,bin,eslint,prettier,webpack --json says:

{
  "dependencies": [
    ...
  ],
  "devDependencies": [
    ...
  ],
  "missing": {},
  "using": {
    ...
  },
  "invalidFiles": {
    "/home/username/project/webpack.config.ts": "SyntaxError: Missing semicolon. (71:1)\n    at Parser._raise (/home/vrichter/Projekte/proc/protectr/mailconnect/node_modules/depcheck/node_modules/@babel/parser/lib/index.js:541:17)\n    at Parser.raiseWithData (/home/vrichter/Projekte/proc/protectr/mailconnect/node_modules/depcheck/node_modules/@babel/parser/lib/index.js:534:17)\n    at Parser.raise (/home/vrichter/Projekte/proc/protectr/mailconnect/node_modules/depcheck/node_modules/@babel/parser/lib/index.js:495:17)\n    at Parser.semicolon (/home/vrichter/Projekte/proc/protectr/mailconnect/node_modules/depcheck/node_modules/@babel/parser/lib/index.js:3550:10)\n    at Parser.parseVarStatement (/home/vrichter/Projekte/proc/protectr/mailconnect/node_modules/depcheck/node_modules/@babel/parser/lib/index.js:13837:10)\n    at Parser.parseStatementContent (/home/vrichter/Projekte/proc/protectr/mailconnect/node_modules/depcheck/node_modules/@babel/parser/lib/index.js:13421:21)\n    at Parser.parseStatementContent (/home/vrichter/Projekte/proc/protectr/mailconnect/node_modules/depcheck/node_modules/@babel/parser/lib/index.js:9528:18)\n    at Parser.parseStatement (/home/vrichter/Projekte/proc/protectr/mailconnect/node_modules/depcheck/node_modules/@babel/parser/lib/index.js:13352:17)\n    at Parser.parseBlockOrModuleBlockBody (/home/vrichter/Projekte/proc/protectr/mailconnect/node_modules/depcheck/node_modules/@babel/parser/lib/index.js:13941:25)\n    at Parser.parseBlockBody (/home/vrichter/Projekte/proc/protectr/mailconnect/node_modules/depcheck/node_modules/@babel/parser/lib/index.js:13932:10)"
  },
  "invalidDirs": {}
}

The error message SyntaxError: Missing semicolon. at something like ... } satisfies ... ; is typical for using old Typescript < 4.9 compilers:

depcheck/package.json

Line 104 in 4b23f8b

"typescript": "^4.0.5"

An version override for typescript in my package.json:

{
  ...
  "scripts": {
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
    "depcheck": "^1.4.3",
    ...
    "typescript": "^4.9.5",
    ...
  },
  "overrides": {
    "depcheck": {
      "typescript": "$typescript"
    }
  },
  ...
}

Does of course not help, since depcheck is already compiled before distributed.

Possible fix

Change in the package.json of depcheck:

{
  ...
  "devDependencies": {
    ...
    "typescript": "^4.9.0",
    ...
  },
  ...
}

[jtbandes]

I believe the real problem is that @babel/parser is out of date. Babel supports satisfies since v7.20.0: babel/babel#14211
cc @rumpl

[jtbandes]

Duplicate of #768

[mjlescano]

I believe the real problem is that @babel/parser is out of date. Babel supports satisfies since v7.20.0: babel/babel#14211

@jtbandes @babel/parser dep is already updated on the main branch.

[jtbandes]

Yep, I discovered that, the original report was #768 and it was fixed in #788