The requested module '' does not provide an export named 'default' JavaScript

我是新的程序员。我试图复制一个youtube视频，用于在html上创建一个CSV表格查看器的程序，但得到了这个错误SyntaxError：The requested module './TableCsv.js' does not provide an export named 'default'

我试着在main.js中的TableCsv周围添加大括号，但没有成功。当我尝试在TableCsv.js中添加我自己的export时，它说A module cannot have multiple default exports.ts(2528)。

以下是我的代码

主程序

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

在文件TableCsv.js中，你没有让你的对象供外部文件使用。这样做的方式是通过export语句。你可以把某个东西（或几个东西）作为命名的出口，这样你就需要用import { Thing } from 'module'这样的语句来导入它们，或者你可以做一个默认的出口（这里似乎就是这种情况），然后导入语句看起来如下。import Thing from 'module'.

要在TableCsv.js中导出你的对象，请在文件的底部添加以下一行。

export default TableCsv

或者，把定义变量的那一行改成如下内容。

export default class TableCsv {

为了解决A module cannot have multiple default exports.ts(2528)，你不能有多个默认出口，因为一个模块最多只能有一个默认出口。你在使用默认出口，在。

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 class TableCsv { 。