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

Question

新程序员来了。我正在尝试为在 html 上创建 CSV 表查看器的程序复制 YouTube 视频，但收到此错误 SyntaxError：请求的模块“./TableCsv.js”不提供名为“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 语句然后看起来如下：

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

Answer 3

使用导入语句时，导出的模块应导出为

export default className/functionName;

当使用旧的 require 语句时，导出的模块应导出为

module.exports = className/functionName;