网页开发新手加载MongoDB库遇import语法错误求助

1. 先解决import语法错误 #

你遇到的Uncaught SyntaxError: Cannot use import statement outside a module错误，是因为浏览器默认把<script>标签当作普通脚本文件，不支持ES模块的import语法。解决这个只需给script标签加上type="module"属性：

修改你的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MRE</title>
    <link rel="stylesheet" href="styles.css">
    <!-- 加上type="module" -->
    <script type="module" src="script.js"></script>
</head>
<body>
    <div class="container">
        <div>Header</div>
    </div>
</body>
</html>

2. 解决MongoDB库的浏览器兼容性问题 #

注意：npm上的mongodb包是为Node.js环境设计的，不能直接在浏览器里使用，即使你解决了import语法问题，后续也会出现其他运行错误。这里给你两个可行方案：

方案一：使用MongoDB官方浏览器SDK（仅用于测试，不推荐生产环境） #

MongoDB提供了浏览器兼容的ES模块版本，你可以直接通过CDN引入：

修改script.js里的import语句，替换为CDN地址：

// 使用unpkg提供的浏览器兼容版本
import { MongoClient } from 'https://unpkg.com/mongodb@6.3.0/dist/bundle.esm.js';

// 后续连接逻辑不变，但注意：不要把数据库连接字符串暴露在前端代码里，这会泄露你的数据库凭证

⚠️ 警告：这种方式会把数据库连接字符串直接暴露在前端代码中，非常不安全，只能用于本地测试，绝对不能在生产环境使用。

方案二：后端代理（推荐，安全可靠） #

正确的做法是通过后端服务处理数据库连接，前端仅通过API接口和后端交互，避免暴露数据库凭证。步骤如下：

第一步：搭建Node.js后端

1. 新建一个项目文件夹，初始化npm：

npm init -y

2. 安装依赖：

npm install mongodb express cors

3. 新建server.js文件，编写后端代码：

const express = require('express');
const { MongoClient } = require('mongodb');
const cors = require('cors');
const app = express();
const port = 3000;

// 从环境变量读取数据库连接字符串（不要硬编码在代码里）
const MONGODB_URI = process.env.MONGODB_URI || '你的数据库连接字符串';

// 启用CORS和静态文件服务
app.use(cors());
app.use(express.static('public')); // 把你的前端HTML/CSS/JS放在public文件夹里

// 定义接口，用于前端获取数据
app.get('/api/get-data', async (req, res) => {
  let client;
  try {
    // 连接数据库
    client = new MongoClient(MONGODB_URI);
    await client.connect();
    
    // 查询数据（替换成你的数据库和集合名称）
    const db = client.db('你的数据库名称');
    const collection = db.collection('你的集合名称');
    const data = await collection.find({}).limit(10).toArray();
    
    res.json({ success: true, data });
  } catch (err) {
    console.error('数据库操作错误:', err);
    res.status(500).json({ success: false, error: '获取数据失败' });
  } finally {
    // 关闭连接
    if (client) await client.close();
  }
});

// 启动服务
app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

第二步：修改前端代码

把你的HTML/CSS/JS文件都放在项目的public文件夹里，修改script.js，通过fetch调用后端接口：

async function loadData() {
  try {
    // 调用后端接口
    const response = await fetch('http://localhost:3000/api/get-data');
    const result = await response.json();
    
    if (result.success) {
      // 更新页面内容
      const container = document.querySelector('.container');
      result.data.forEach(item => {
        const div = document.createElement('div');
        div.textContent = JSON.stringify(item);
        container.appendChild(div);
      });
    } else {
      console.error(result.error);
    }
  } catch (err) {
    console.error('请求接口失败:', err);
  }
}

// 页面加载完成后调用
window.addEventListener('load', loadData);

第三步：启动服务

运行后端服务：

node server.js

然后在浏览器访问http://localhost:3000，就能看到前端页面从后端获取并展示数据库数据了。

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