模块解析失败：意外的令牌WebPack

Question

运行 webpackserve 会出现此错误“模块解析失败：意外的令牌 (1:12)”。 screenshot

我还尝试使用 babel-loader 运行 webpack .js、.jsx 文件和 ts-loader 用于 .ts、.tsx 文件，但我得到同样的错误

{
  test: /\.(ts|tsx)$/,
  exclude: '/node_modules/',
  use: {
    loader: 'ts-loader',
    options: {
      configFile: path.resolve(__dirname, 'tsconfig.json'),
      allowTsInNodeModules: true,
      transpileOnly: true
    }
  }
}

webpack.configs.js

module.exports = {
  context: resolve(__dirname, '../src'),
  plugins: [ ... ],
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        include: path.resolve(__dirname, '../src/'),
        exclude: path.resolve(__dirname, '../node_modules/'),
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    targets: 'last 3 versions'
                  }
                ],
                '@babel/preset-react',
                '@babel/preset-typescript'
              ]
            }
          }
        ]
      }
    ]
  }
};

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-jsx",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "declaration": true
  },
  "include": ["src"],
}

OS: OSX 12.3
webpack-dev-server: ^3.5.1
babel-core: ^7.12.6
babel-loader: ^8.0.6
ts-loader: ^8.2.0
typescript: ^4.6.3
webpack: 4.46.0
node: 12.22.11
npm: 8.5.0