如何防止 webpack 为未使用的模块引发 typescript 错误？

Question

I have the following structure:

└── src
    ├── tsconfig.json
    ├── core
    │   ├── [...].ts
    └── ui
        ├── [...].tsx
        └── tsconfig.json

In the frontend I import a small number of modules from the core. These modules, and any dependent modules, are compliant with both tsconfig files.

tsc and eslint pass with no errors and webpack builds the desired output file. So far so good.

However when webpack builds it throws loads of type errors for other backend modules.

How do I suppress these errors? I tried excluding src/core from babel-loader and including the required modules but I was still getting the same errors.

/// webpack.config.js
/* eslint-disable @typescript-eslint/no-var-requires */

const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',

  entry: './src/ui',

  output: {
    path: path.resolve(__dirname, './ui-dist'),
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: 'source-map',

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },

  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            babelrc: false,
            presets: [
              [
                '@babel/preset-env',
                { targets: { browsers: 'last 2 versions' } }, // or whatever your project requires
              ],
              '@babel/preset-typescript',
              '@babel/preset-react',
            ],
            plugins: [
              // plugin-proposal-decorators is only needed if you're using experimental decorators
              //  in TypeScript
              ['@babel/plugin-proposal-decorators', { legacy: true }],
              ['@babel/plugin-transform-runtime', { legacy: true }],
              ['@babel/plugin-proposal-class-properties', { loose: true }],
              'react-hot-loader/babel',
            ],
          },
        },
      },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader',
      },
    ],
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      tsconfig: path.resolve(__dirname, './src/ui/tsconfig.json'),
      eslint: true,
      /** Options to supply to eslint https://eslint.org/docs/developer-guide/nodejs-api#cliengine */
      // eslintOptions: EslintOptions;
    }),
    new HtmlWebpackPlugin({
      title: 'development',
      template: './src/ui/template.html',
    }),
  ],
  // When importing a module whose path matches one of the following, just
  // assume a corresponding global variable exists and use that instead.
  // This is important because it allows us to avoid bundling all of our
  // dependencies, which allows browsers to cache those libraries between builds.
  // externals: {
  //   react: 'React',
  //   'react-dom': 'ReactDOM',
  // },
  devServer: {
    contentBase: path.resolve(__dirname, './ui-dist'),
  },
};

EDIT: I suppose I am referencing these modules throwing an error by using import type { x } from '../core/index.ts' . Perhaps I need to find a way for babel-loader to skip scanning type imports.

Answer 1

removing ForkTsCheckerWebpackPlugin did the trick. Type checking is done when calling tsc in any case.