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

Question

New programmer here. I am trying to replicate a youtube video for a program that creates a CSV table viewer on html and am getting this error SyntaxError: The requested module './TableCsv.js' does not provide an export named 'default'

I have tried adding curly braces around TableCsv in main.js but no luck. When I try adding my own export in TableCsv.js it says A module cannot have multiple default exports.ts(2528).

Here is my code

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

Grammalogue

Answer 1

In the file TableCsv.js you are not making your object available for external files to use. The way that this is done is via the export statement. You can either export something (or several somethings) as named exports, so that you would need to import them with a statement like import { Thing } from 'module', or you can make a default export (which seems to be the case here) where the import statement then looks as follows: import Thing from 'module'.

To export your object in TableCsv.js add the following line to the bottom of the file:

export default TableCsv

Alternatively, change the line where you define the variable to be as follows:

export default class TableCsv {

Reno

Answer 2

To address A module cannot have multiple default exports.ts(2528), you cannot have multiple default exports, since 1 module can have at most 1 default export. You are using the default export in:

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"

Try adding export in front of the TableCsv class, i.e: export class TableCsv {

Thiazole

Answer 3

While using the import statement the exported modules should be exported as

export default className/functionName;

Where as while using the old require statements the exported modules should be exported as

module.exports = className/functionName;

Allerus

Answer 4

From the file TableCsv.js

// TableCSV.js

import express from 'express';

const router = express.Router();
/*    
    your code
*/
export default router;

Then for it to work in the main.js

// main.js

import express from 'express';
import bodyParser from 'body-parser';

import tableCsv from './TableCsv.js';

/*    
    your code
*/

Brann

Answer 5

import {TableCsv} from "./TableCsv.js" you forgot '{}'

Approver

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Usury