Webpack集成RxJS出现“需合适加载器”错误，求解决方案

问题现象 #

在TypeScript项目中通过npm安装RxJS后，在文件中引入import {take, map} from "rxjs/operators"，执行npx webpack打包时失败，出现大量类似如下的错误：

ERROR in ./node_modules/rxjs/dist/types/internal/util/noop.d.ts 1:7
Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
> export declare function noop(): void;
| //# sourceMappingURL=noop.d.ts.map
 @ ./node_modules/rxjs/dist/types/index.d.ts 23:0-44 23:0-44

相关配置文件 #

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/app.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'ts-loader'
        },
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.d.ts'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

package.json依赖

"devDependencies": {
    "@types/node": "^18.15.1",
    "babel-loader": "^9.1.2",
    "ts-loader": "^9.4.2",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.2",
    "webpack": "^5.76.1",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "node-sass": "^8.0.0",
    "rxjs": "^7.8.0",
    "save-dev": "^0.0.1-security"
  }

tsconfig.json

{  
    "compilerOptions": {
        "target": "es5",
        "module": "es6",
        "lib": ["DOM", "ES6", "DOM.Iterable", "ScriptHost", "ES2016.Array.Include"],
        "strict": true,
        "esModuleInterop": true,
        "outDir": "dist",
        "noEmit": false,
        "moduleResolution": "node",
        "baseUrl": "./"
    }
}

问题原因 #

1. webpack的resolve.extensions中包含了.d.ts，导致webpack解析模块时会尝试加载node_modules中的类型声明文件（如RxJS的.d.ts）
2. ts-loader配置中排除了node_modules目录，没有loader能处理这些被加载的.d.ts文件，因此出现解析错误
3. 实际上.d.ts是TypeScript的类型声明文件，仅用于编译时类型检查，不需要被webpack打包

解决方案 #

修改webpack.config.js #

从resolve.extensions中移除.d.ts，修改后的配置如下：

const path = require('path');

module.exports = {
  entry: './src/app.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'ts-loader'
        },
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'], // 移除.d.ts
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

验证说明 #

• 移除.d.ts后，webpack不会再尝试打包类型声明文件，避免了解析错误
• TypeScript会自动通过moduleResolution: node找到RxJS自带的类型声明文件，不影响类型检查

内容的提问来源于stack exchange，提问作者Andrej Butić