使用twit npm包获取推特热门标签时遇导出错误求助

我是Web开发新手，想获取Twitter前10个热门话题标签并展示在网页上。用twit npm包写了index.html和website.js，但直接在Chrome里打开index.html时，控制台报错：Uncaught SyntaxError: The requested module './node_modules/twit/lib/twitter.js' does not provide an export named 'default'。试过别人的建议，也禁用了所有Chrome扩展，还是一样的错误，求帮忙。

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitter Trending Hashtags</title>
    <!--  <link rel="stylesheet" href="styles.css"> -->
</head>
<body>
    <div class="container">
        <h1>Trending Hashtags</h1>
        <ul id="trendingHashtags">
            <!-- Trending hashtags will be added dynamically here -->
        </ul>
    </div>
    <script type='module' src="./website.js"></script>
</body>
</html>

website.js #

import Twit from './node_modules/twit/lib/twitter.js';
const apikey = 'API_KEY';
const apisecretkey = 'AP_SECRET_KEY';
const accesstoken = 'ACCESS_TOKEN';
const accesstokensecret = 'ACCESS_TOKEN_SECRET';

var T = new Twit({
  consumer_key: apikey,
  consumer_secret: apisecretkey,
  access_token: accesstoken,
  access_token_secret: accesstokensecret,
  timeout_ms: 60*1000,
  strictSSL: true
});

var params = { id: '23424977' };

T.get('trends/place', params, function(err, data, response) {
  console.log(JSON.stringify(data));
  var trends = data[0].trends;
  var html = '';

  for (var i = 0; i < trends.length; i++) {
    var trend = trends[i];
    var name = trend.name;
    var tweetVolume = trend.tweet_volume || 'N/A';

    html += `<div>
      <p>Name: ${name}</p>
      <p>Tweet Volume: ${tweetVolume}</p>
    </div>`;
  }
  var hashtagsContainer = document.getElementById('hashtags-container');
  hashtagsContainer.innerHTML = html;

   //console.log(html);
});

更新 #

尝试其他用户的建议后，Chrome控制台仍报错：The requested module './node_modules/twit/lib/twitter.js' does not provide an export named 'default'，且已禁用所有Chrome扩展。

解决方法 #

1. 核心问题：twit是Node.js专属库，不能直接在浏览器使用

twit是为Node.js环境开发的，依赖Node.js特有的API（如http、https模块），而且它的导出格式不符合浏览器ES模块规范，所以直接在前端导入必然报错。

2. 正确方案：搭建Node.js后端做API代理

把API调用逻辑放到后端，前端通过接口请求获取数据，既解决兼容性问题，也能保护你的API密钥不被泄露。

步骤1：创建后端服务

• 确保已安装twit：npm install twit
• 新建server.js文件：

const express = require('express');
const Twit = require('twit');
const cors = require('cors');

const app = express();
app.use(cors()); // 解决跨域问题

// 配置Twitter API密钥
const T = new Twit({
  consumer_key: '你的API_KEY',
  consumer_secret: '你的AP_SECRET_KEY',
  access_token: '你的ACCESS_TOKEN',
  access_token_secret: '你的ACCESS_TOKEN_SECRET',
  timeout_ms: 60*1000,
  strictSSL: true
});

// 提供热门话题接口
app.get('/trends', (req, res) => {
  T.get('trends/place', { id: '23424977' }, (err, data) => {
    if (err) {
      return res.status(500).json({ error: err.message });
    }
    // 返回前10个热门话题
    res.json(data[0].trends.slice(0, 10));
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

• 安装后端依赖：npm install express cors
• 启动后端：node server.js

步骤2：修改前端代码（website.js）

去掉twit导入，改用fetch请求后端接口：

document.addEventListener('DOMContentLoaded', async () => {
  try {
    const response = await fetch('http://localhost:3000/trends');
    const trends = await response.json();

    const container = document.getElementById('trendingHashtags');
    container.innerHTML = '';

    trends.forEach(trend => {
      const listItem = document.createElement('li');
      listItem.innerHTML = `
        <div>
          <p>话题：${trend.name}</p>
          <p>推文量：${trend.tweet_volume || 'N/A'}</p>
        </div>
      `;
      container.appendChild(listItem);
    });
  } catch (error) {
    console.error('获取热门话题失败：', error);
  }
});

步骤3：启动前端

推荐用VS Code的Live Server插件启动前端页面，避免浏览器本地文件跨域限制。

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