请求的模块“”不提供名为“默认”JavaScript 的导出

Question

新程序员来了。我正在尝试为在 html 上创建 CSV 表查看器的程序复制 youtube 视频，但收到此错误 SyntaxError: The requested module './TableCsv.js' does not Provide an Export Named 'default'

我尝试在 main.js 中的 TableCsv 周围添加大括号，但没有成功。当我尝试在 TableCsv.js 中添加自己的导出时，它显示模块不能有多个默认的导出.ts(2528)。

这是我的代码

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

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>
          `
      );
    }
  }
  
  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]);
      }
    });
  });

Answer 1

在该文件中，TableCsv.js您没有使对象可供外部文件使用。完成此操作的方式是通过export声明。您可以将某些内容（或多个内容）导出为命名导出，这样您就需要使用类似 的语句导入它们import { Thing } from 'module'，或者您可以进行默认导出（这里似乎就是这种情况），其中导入语句看起来像如下：import Thing from 'module'.

要导出对象，请将TableCsv.js以下行添加到文件底部：

export default TableCsv

或者，将定义变量的行更改为如下：

export default class TableCsv {

Answer 2

为了解决A module cannot have multiple default exports.ts(2528)，您不能有多个默认导出，因为 1 个模块最多可以有 1 个默认导出。您正在使用默认导出：

import TableCsv from "./TableCsv.js"; // import the default export as TableCsv

与

import { TableCsv } from "./TableCsv.js"; // import the specific exported symbol 'TableCsv'
                                          // from the file "./TableCsv.js"

尝试在TableCsv类前面添加export，即： export class TableCsv {