Webpack5环境使用rss-parser出现TypeError: get is not a function求助

我是前端新手，正在用rss-parser开发RSS解析器，发现这个包可能只兼容Webpack 4——因为Webpack 4会自动为Node内置模块提供垫片，但我用的是Webpack 5，所以遇到了问题。

错误详情 #

报错行在Parser.js第79行：

let req = get(requestOpts, (res) => {

完整出错函数代码 #

parseURL(feedUrl, callback, redirectCount=0) {
  let xml = '';
  let get = feedUrl.indexOf('https') === 0 ? https.get : http.get;
  let urlParts = url.parse(feedUrl);
  let headers = Object.assign({}, DEFAULT_HEADERS, this.options.headers);
  let timeout = null;
  let prom = new Promise((resolve, reject) => {
    const requestOpts = Object.assign({headers}, urlParts, this.options.requestOptions);
    let req = get(requestOpts, (res) => {
      if (this.options.maxRedirects && res.statusCode >= 300 && res.statusCode < 400 && res.headers['location']) {
        if (redirectCount === this.options.maxRedirects) {
          return reject(new Error("Too many redirects"));
        } else {
          const newLocation = url.resolve(feedUrl, res.headers['location']);
          return this.parseURL(newLocation, null, redirectCount + 1).then(resolve, reject);
        }
      } else if (res.statusCode >= 300) {
        return reject(new Error("Status code " + res.statusCode))
      }
      let encoding = utils.getEncodingFromContentType(res.headers['content-type']);
      res.setEncoding(encoding);
      res.on('data', (chunk) => {
        xml += chunk;
      });
      res.on('end', () => {
        return this.parseString(xml).then(resolve, reject);
      });
    })
    req.on('error', reject);
    timeout = setTimeout(() => {
      return reject(new Error("Request timed out after " + this.options.timeout + "ms"));
    }, this.options.timeout);
  }).then(data => {
    clearTimeout(timeout);
    return Promise.resolve(data);
  }, e => {
    clearTimeout(timeout);
    return Promise.reject(e);
  });
  prom = utils.maybePromisify(callback, prom);
  return prom;
}

Chrome堆栈跟踪 #

Uncaught TypeError: get is not a function
    at Parser.js:79:1
    at new Promise (<anonymous>)
    at Parser.parseURL (Parser.js:76:1)
    at FeedRSSPrint (Popup.tsx:18:1)
    at App (Popup.tsx:30:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26560:1)

项目依赖 #

"devDependencies": {
  "@material-ui/core": "^4.12.4",
  "@material-ui/icons": "^4.11.3",
  "@types/chrome": "^0.0.195",
  "@types/react": "^18.0.18",
  "@types/react-dom": "^18.0.6",
  "clean-webpack-plugin": "^4.0.0",
  "copy-webpack-plugin": "^11.0.0",
  "css-loader": "^6.7.1",
  "entities": "^4.4.0",
  "html-webpack-plugin": "^5.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "stream": "^0.0.2",
  "stream-http": "^3.2.0",
  "style-loader": "^3.3.1",
  "terser-webpack-plugin": "^5.3.5",
  "ts-loader": "^9.3.1",
  "typescript": "^4.7.4",
  "url": "^0.11.0",
  "webpack": "^5.74.0",
  "webpack-cli": "^4.10.0",
  "webpack-merge": "^5.8.0",
  "xml2js": "^0.4.23"
}

当前Webpack配置相关部分 #

module.resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    fallback: { "http": false, "browser": false, "https": false, 
      "stream": false, "url": false, "buffer": false, "timers": false
    }
}

解决方法 #

问题根源是Webpack 5不再自动为Node.js内置模块提供垫片，而rss-parser依赖http/https这些Node模块，你当前的Webpack配置里把这些模块设为false，导致无法找到对应的实现。

步骤1：安装必要的浏览器端垫片包 #

首先安装浏览器兼容的替代包：

npm install --save-dev http-browserify https-browserify timers-browserify buffer stream-browserify

步骤2：修改Webpack配置的fallback设置 #

把之前的fallback配置里的false替换成对应的垫片包：

resolve: {
  extensions: ['.tsx', '.ts', '.js'],
  fallback: {
    "http": require.resolve("http-browserify"),
    "https": require.resolve("https-browserify"),
    "stream": require.resolve("stream-browserify"),
    "url": require.resolve("url"),
    "buffer": require.resolve("buffer"),
    "timers": require.resolve("timers-browserify")
  }
}

步骤3：添加全局变量插件（可选） #

部分垫片包需要全局变量支持，比如Buffer，可在Webpack配置的plugins中添加：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
  ],
};

步骤4：验证配置并重新构建 #

执行构建命令检查是否解决问题：

npm run build

备选方案：绕开rss-parser的内置请求逻辑 #

如果上述配置仍有问题，可直接用浏览器fetchAPI获取RSS内容，再传给rss-parser的parseString方法：

import Parser from 'rss-parser';

const parser = new Parser();

async function fetchAndParseRSS(feedUrl) {
  try {
    const response = await fetch(feedUrl);
    const xmlText = await response.text();
    const feed = await parser.parseString(xmlText);
    return feed;
  } catch (error) {
    console.error('解析RSS失败:', error);
  }
}

这个方法更适配浏览器环境，还能避免跨域问题（需目标RSS源支持CORS）。

内容的提问来源于stack exchange，提问作者Cale McCollough