Moduły ES6 - nie działają zaimportowane klasy

Question

Hej,

ogólnie wprowadzam do projektu moduły z ES6. Problem polega na tym, że jak chce zaimportować klasy z innego pliku 

import { Person, UI } from './classes';

to wyskakuje mi błąd 

Parse errors in imported module './classes': Unexpected token = (70:21)eslint(import/named)

Plik classes:

class Person {
  constructor(name, surname, age) {
    this.name = name;
    this.surname = surname;
    this.age = age;
  }
}

class UI {
  static addRowData(person) {
    const documentFragment = document.createDocumentFragment();
    const containerPerson = document.querySelector('#container-person');
    const rowDataContainer = document.createElement('DIV'); //creating divs
    const rowName = document.createElement('DIV');
    const rowSurename = document.createElement('DIV');
    const rowAge = document.createElement('DIV');
    const removeButton = document.createElement('BUTTON');
    const checkButton = document.createElement('BUTTON');
    const timesButton = document.createElement('BUTTON');

    const imageReBtn = document.createElement('i');
    const imageCheBtn = document.createElement('i');
    const imageTimBtn = document.createElement('i');

    const clearBoth = document.createElement('DIV');

    clearBoth.setAttribute('style', 'clear:both;'); // remove float: left from rowDataContainer's childrens

    rowDataContainer.className = 'row-data-container'; // giving class to every new divs
    rowName.className = 'row-data';
    rowSurename.className = 'row-data';
    rowAge.className = 'row-data';

    removeButton.className = 'remove-button';
    checkButton.className = 'check-button';
    timesButton.className = 'times-button';

    imageReBtn.className = 'fa fa-trash';
    imageCheBtn.className = 'fas fa-check';
    imageTimBtn.className = 'fas fa-times';

    const textName = document.createTextNode(person.name); // collection data from the inputs
    const textSurename = document.createTextNode(person.surname);
    const textAge = document.createTextNode(person.age);

    rowName.appendChild(textName);
    rowSurename.appendChild(textSurename);
    rowAge.appendChild(textAge);
    removeButton.appendChild(imageReBtn);
    checkButton.appendChild(imageCheBtn);
    timesButton.appendChild(imageTimBtn);

    // -----------documentFragment---------------
    documentFragment.appendChild(rowDataContainer);
    const tab = [
      rowName,
      rowSurename,
      rowAge,
      removeButton,
      checkButton,
      timesButton,
      clearBoth
    ];
    tab.map(item => {
      rowDataContainer.appendChild(item);
    });
    containerPerson.appendChild(documentFragment);
  }

  static clearInput = (inputname, inputsurname, inputage) => {
    inputname.value = '';
    inputsurname.value = '';
    inputage.value = '';
  };
}

export { Person, UI };

Wszystko jest chyba prawidłowo wyeksportowane, ale mimo to nie działa. Ktoś dostrzega jakiś błąd?

Answer 1

Problem masz przy metodzie clearInput, zadeklaruj ją tak jak metodę addRowData.

 

static clearInput(inputname, inputsurname, inputage) {
    inputname.value = '';
    inputsurname.value = '';
    inputage.value = '';
}

 

Comments

Zrobiłem tak jak napisałeś. Błąd zniknął, ale potem pojawił się kolejny że dwie klasy nie mogą występować w jednym pliku. Rozdzieliłem klasy na dwa pliki i nadal nie działa kod

import Person from './classes/Person';
import UI from './classes/UI';

Dobrze używam tych modułów?

---

import Person from './classes/Person';

Ten import zadziała, jeśli w pliku /classes/Person.js exportujesz klasę defaultowo:

export default class Person {...}

W innym razie musisz użyć klamerek
 

// classes/Person.js
export class Person { ... }

//
import { Person } from '......Person'

 

---

Zrobiłem tak jak napisałeś ale w konsoli w przegladarce wyskakuje mi błąd w pierwszej linii

Uncaught SyntaxError: Unexpected identifier

Nie wstawiłem jakiegoś symbolu, czy przecinku?

import Person from './classes/Person';
import UI from './classes/UI';