VS Code中引入fs模块的两类错误及日志读取需求求助

问题 #

遇到两个错误：

• 不使用import fs from "fs";时，报错Uncaught ReferenceError: require is not defined
• 使用import fs from "fs";时，报错Uncaught SyntaxError: Identifier 'fs' has already been declared

需求是读取fail_drive.log文件并转为数组，文件内容：

1
3
4
7
8

相关HTML代码：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

.main {
  text-align: center;
}

.div1 {
  width: 20%;
  height: auto;

}

.row {
  display: flex;
  align-items: center;
  column-gap: 2px;
}

.slot {
  display: flex;
  flex-basis: 20%;
  height: 70px;
  align-items: center;
  justify-content: center;
}
.failed::after {
  content: '';
  position: absolute;
  background-color: red;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: 1s blink ease infinite;
}
@keyframes blink {
  from,
  to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
</style>
</head>

<body>
  <h1 class="main">Phy Link Test</h2>


<div class="div1" >
  <h2>Front Chassis</h2>
    <div class="row">
      <div class="slot" id='slot-17'><img src="Downloads\cut_images_archive_ZMcuieGmjsPU\cut_images_4sW7CkxiWzf1Ya/23.png" alt="17"></div>
      <div class="slot" id='slot-14'><img src="\Downloads\cut_images_archive_ZMcuieGmjsPU\cut_images_4sW7CkxiWzf1Ya/20.png" alt="14"></div>
      <div class="slot" id='slot-5'><img src="\Downloads\cut_images_archive_ZMcuieGmjsPU\cut_images_4sW7CkxiWzf1Ya/5.png" alt="5"></div>
      <div class="slot" id='slot-2'><img src="\Downloads\cut_images_archive_ZMcuieGmjsPU\cut_images_4sW7CkxiWzf1Ya/2.png" alt="2"></div>
      <div>top slot</div>
    </div>
    
</div>
<script type="module">

import fs from "fs";

  
const fs = require('fs');
const fileContent = fs.readFileSync('C:\Users\john_ma\Downloads\cut_images_archive_ZMcuieGmjsPU\cut_images_4sW7CkxiWzf1Ya\fail_drive.log', 'utf8');
const lines = fileContent.split('\n');
console.log(lines);
  
  
  function toggleFailed(slotId) {
    const slot = document.getElementById('slot-' + slotId);
    slot.classList.toggle('failed');
  }
  
  for (const slotId of slotIds) {
    const slot = document.getElementById('slot-' + slotId);
    slot.addEventListener('click', () => toggleFailed(slotId));
  }
  </script>
  </body>
</html>

解决方案 #

核心问题：浏览器不支持Node.js的fs模块 #

fs是Node.js专属的文件系统模块，只能在Node.js环境（后端）中使用，浏览器作为前端运行环境，完全不识别这个模块，所以不管用import还是require都会报错。要在浏览器里读取文件，得用浏览器原生的API或者静态资源请求方式。

错误修正与可行方案 #

1. 先解决代码里的语法错误

你同时用import fs from "fs"和const fs = require('fs')，重复声明了fs变量，这是第二个报错的直接原因。但即使删掉其中一个，浏览器也不认识fs，所以这个方向完全错误，直接放弃使用fs。

2. 两种读取文件的可行方法

方法一：用File API让用户手动选择文件

在页面里添加文件选择控件，让用户选择本地的fail_drive.log：

<!-- 在body末尾添加文件选择框 -->
<input type="file" id="fileInput" accept=".log">

<script type="module">
let slotIds = [];

function toggleFailed(slotId) {
  const slot = document.getElementById('slot-' + slotId);
  if (slot) slot.classList.toggle('failed');
}

// 监听文件选择事件
document.getElementById('fileInput').addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    // 读取文件内容并处理成数组
    const fileContent = event.target.result;
    slotIds = fileContent.split('\n').filter(line => line.trim() !== '');
    console.log(slotIds);

    // 给对应slot绑定点击事件并标记失败状态
    slotIds.forEach(slotId => {
      const slot = document.getElementById('slot-' + slotId);
      if (slot) {
        slot.addEventListener('click', () => toggleFailed(slotId));
        slot.classList.add('failed');
      }
    });
  };
  reader.readAsText(selectedFile);
});
</script>

方法二：将log文件作为静态资源，用Fetch请求读取

把fail_drive.log放到HTML文件的同级目录（或网站静态资源目录），然后通过Fetch请求获取内容：

<script type="module">
let slotIds = [];

function toggleFailed(slotId) {
  const slot = document.getElementById('slot-' + slotId);
  if (slot) slot.classList.toggle('failed');
}

// 页面加载时读取log文件
async function loadFailedSlots() {
  try {
    const response = await fetch('fail_drive.log');
    const fileContent = await response.text();
    slotIds = fileContent.split('\n').filter(line => line.trim() !== '');
    console.log(slotIds);

    // 绑定事件并标记失败slot
    slotIds.forEach(slotId => {
      const slot = document.getElementById('slot-' + slotId);
      if (slot) {
        slot.addEventListener('click', () => toggleFailed(slotId));
        slot.classList.add('failed');
      }
    });
  } catch (error) {
    console.error('读取文件失败:', error);
  }
}

loadFailedSlots();
</script>

3. 其他需要修正的小问题

• 原HTML中<h1 class="main">Phy Link Test</h2>标签不匹配，改成</h1>
• 原JS里slotIds变量未定义，会导致循环报错，要提前声明并赋值
• 图片路径混用了反斜杠\和正斜杠/，浏览器里统一用正斜杠，比如src="Downloads/cut_images_archive_ZMcuieGmjsPU/cut_images_4sW7CkxiWzf1Ya/23.png"

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