请求的模块“''”没有提供名为“default”的导出项。

Question

我是一名新手程序员，尝试复制一个关于创建CSV表格查看器的html程序的YouTube视频，但出现了以下错误：

SyntaxError: 请求的模块 './TableCsv.js' 没有提供 'default' 导出

我已经尝试在 main.js 中 TableCsv 周围添加花括号，但没有成功。当我尝试在 TableCsv.js 中添加自己的导出时，它会显示“一个模块不能有多个默认导出”（A module cannot have multiple default exports.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]);
      }
    });
  });

- aljames24

Answer 1

在文件TableCsv.js中，你没有将对象公开供外部文件使用。这可以通过export语句完成。你可以导出一个或多个命名导出项，这样你需要使用语句import { Thing } from 'module'导入它们，或者你可以进行默认导出（似乎是这种情况），在这种情况下，导入语句如下所示：import Thing from 'module'。

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

export default TableCsv

或者，你可以将定义变量的行更改为以下内容：

export default class TableCsv {

- Dakeyras

Answer 2

为解决 A module cannot have multiple default exports.ts(2528) 这个问题，你不能有多个默认导出项，因为一个模块最多只能有一个默认导出项。您正在使用默认导出项：

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

vs

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

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

- Mohan Cao

Answer 3

在使用import语句时，导出的模块应该被导出为。

export default className/functionName;

使用旧的require语句时，导出的模块应该被导出为。

module.exports = className/functionName;

- Shashaank Kota