新手开发HTML CSV表格查看器遇模块导出错误求助

问题分析 #

你遇到的两个报错本质是模块导出逻辑错误：

• SyntaxError: The requested module './TableCsv.js' does not provide an export named 'default'：TableCsv.js未导出TableCsv类
• A module cannot have multiple default exports.ts(2528)：你尝试添加导出时可能重复定义了默认导出，且TableCsv.js里还冗余了main.js的初始化逻辑

修正代码 #

1. 修复TableCsv.js #

保留TableCsv类，删除文件末尾重复的页面初始化和监听代码，添加默认导出：

class TableCsv {
    /**
     * @param {HTMLTableElement} root The table element which will display the CSV data.
     */
    constructor(root) {
      this.root = root;
    }

    /**
     * Clears existing data in the table and replaces it with new data.
     *
     * @param {string[][]} data A 2D array of data to be used as the table body
     * @param {string[]} headerColumns List of headings to be used
     */
    update(data, headerColumns = []) {
      this.clear();
      this.setHeader(headerColumns);
      this.setBody(data);
    }
  
    /**
     * Clears all contents of the table (incl. the header).
     */
    clear() {
      this.root.innerHTML = "";
    }
  
    /**
     * Sets the table header.
     *
     * @param {string[]} headerColumns List of headings to be used
     */
    setHeader(headerColumns) {
      this.root.insertAdjacentHTML(
        "afterbegin",
        `
              <thead>
                  <tr>
                      ${headerColumns.map((text) => `<th>${text}</th>`).join("")}
                  </tr>
              </thead>
          `
      );
    }
  
    /**
     * Sets the table body.
     *
     * @param {string[][]} data A 2D array of data to be used as the table body
     */
    setBody(data) {
      const rowsHtml = data.map((row) => {
        return `
                  <tr>
                      ${row.map((text) => `<td>${text}</td>`).join("")}
                  </tr>
              `;
      });
  
      this.root.insertAdjacentHTML(
        "beforeend",
        `
              <tbody>
                  ${rowsHtml.join("")}
              </tbody>
          `
      );
    }
}

// 添加默认导出
export default TableCsv;

2. 保持main.js不变 #

你的main.js导入语法正确，无需修改：

import TableCsv from "./TableCsv.js";

const tableRoot = document.querySelector("#csvRoot");
const csvFileInput = document.querySelector("#csvFileInput");
const tableCsv = new TableCsv(tableRoot);

csvFileInput.addEventListener("change", e => {
    Papa.parse(csvFileInput.files[0], {
        delimiter: ",",
        skipEmptyLines: true,
        complete: results => {
            tableCsv.update(results.data.slice(1), results.data[0]);
        }
    });
}); 

改动原因 #

• TableCsv.js仅需封装表格操作类，页面初始化和文件监听逻辑交给main.js处理，职责更清晰
• 添加export default TableCsv;后，main.js的默认导入能正确识别类，解决第一个报错
• 删除冗余代码后，不会出现多默认导出的冲突问题

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