Webpack and rxjs - "You may need an appropriate loader" error

Question

I've just installed rxjs with npm into my typescript project.

After including import {take, map} from "rxjs/operators" into one file, any subsequent attempt at npx webpack fails and gives many instances of the following error:

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. See https://webpack.js.org/concepts#loaders
> export declare function noop(): void;
| //# sourceMappingURL=noop.d.ts.map
 @ ./node_modules/rxjs/dist/types/index.d.ts 23:0-44 23:0-44

For reference, here is the noop.d.ts.map file causing the issue (this is one of many similar ones). The issue I guess occurs right at the declare token:

export declare function noop(): void;
//# sourceMappingURL=noop.d.ts.map

Here is my 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'),
  },
};

My installed dependencies in 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"
  }

Any idea how to get past this? Thanks in advance.

EDIT: Updated with my 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": "./"
    }
}

Answer 1

Perhaps you could use dts-loader to resolve that error.

npm install --save-dev dts-loader

Then in your webpack.config.js add this in the rules

{
    test: /\.d\.ts$/,
    use: {
      loader: 'dts-loader'
    }
}

Edit: try ignoring d.ts files by changing it to this

const path = require('path');
const webpack = require('webpack');

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

Answer 2

First, your import should be:

import {take, map} from "rxjs"

note that "rxjs/operators" is deprecated.

Second, remove ".d.ts" from the list of resolve extensions in your webpack config.

Finally, show your tsconfig.json contents. The error might be in there.