this is the first project I’ve been working on.. First I built it with ES5 but then I started to learn ES6 and tried to transform the code into ES6 but I ran into some issues I can’t solve.

The error occurs because I need to call a method from App module inside my UI module to delete data but App only exists after everything is imported and UI is executed because App receives an UI as an argument.

The problem occurs on line 40 in ui.js. How can I make it better? Is there another way to organize everything? Every tip will be really helpful!

app.js

import $   from './dom'; import Helpers from './helpers'; import UI from './ui';  export default function AppFactory(UI) {   const getCompanyInfo = function getCompanyInfo() {     fetch('js/company.json')       .then(res => res.json()         .then((data) => {           UI.fillCompanyInfo(data);         })       )       .catch((err) => {         throw new Error(`Aconteceu um probleminha: $  {err}`);       });   };    const getCars = function getCars() {     fetch('http://localhost:3000/car')       .then(res => res.json()         .then((data) => {           UI.populateTable(data);         })       )       .catch(err => {         throw new Error(`Aconteceu um probleminha: $  {err}`);       });   };    const init = function initApp() {     getCompanyInfo();     getCars();   };    const addCar = function addCar(data) {     fetch('http://localhost:3000/car', {       method: 'POST',       headers: new Headers({         'Content-Type': 'application/x-www-form-urlencoded'       }),       body: `image=$  {data.img}&brandModel=$  {data.modelo}&year=$  {data.ano}&plate=$  {data.placa}&color=$  {data.cor}`     })     .then(res => res.json()       .then((data) => {         getCars();       })     )     .catch((err) => {       throw new Error(`Aconteceu um probleminha: $  {err}`);     });   };    const removeCar = function removeCar(plate) {     fetch('http://localhost:3000/car', {       method: 'DELETE',       headers: new Headers({         'Content-Type': 'application/x-www-form-urlencoded'       }),       body: `plate=$  {plate}`     })     .then(res => res.json()       .then((data) => {         getCars();       })     )     .catch((err) => {       throw new Error(`Aconteceu um probleminha: $  {err}`);     });   };    const publicAPI = {     init,     getCompanyInfo,     addCar,     getCars,     removeCar   };    return publicAPI; }; 

ui.js

import $   from './dom'; import Helpers from './helpers';  export default function UIFactory() {   const $  btnRemoveTemplate = '<a href="#" class="button button-accent" data-js="btnRemove">Remover</a>';   const $  title = $  ('title');   const $  companyName = $  ('[data-js="companyName"]');   const $  companyDescription = $  ('[data-js="companyDescription"]');   const $  companyPhone = $  ('[data-js="companyPhone"]');   const $  formRegisterCar = $  ('[data-js="formRegisterCar"]');   const $  tableRecords = $  ('[data-js="recordsTable"]');   const $  imgInput = $  ('[data-js="imgInput"]');   const $  modeloInput = $  ('[data-js="modeloInput"]');   const $  anoInput = $  ('[data-js="anoInput"]');   const $  placaInput = $  ('[data-js="placaInput"]');   const $  corInput = $  ('[data-js="corInput"]');    const clearForm = function clearForm() {     $  imgInput.get().value = '';     $  modeloInput.get().value = '';     $  anoInput.get().value = '';     $  placaInput.get().value = '';     $  corInput.get().value = '';   };    const handleSubmitForm = function handleSubmitForm(e) {     e.preventDefault();      const data = {       img: $  imgInput.get().value,       modelo: $  modeloInput.get().value,       ano: $  anoInput.get().value,       placa: $  placaInput.get().value,       cor: $  corInput.get().value,     };      if (!Helpers.validateFormEntries(data)) return false;      clearForm();     App.addCar(data);   };    const initEvents = function initUIEvents() {     $  formRegisterCar.on('submit', handleSubmitForm, false);   };    const init = function initUI() {     initEvents();   };    const fillCompanyInfo = function fillCompanyInfo(data) {     $  title.get().textContent = data.title;     $  companyDescription.get().textContent = data.description;     $  companyPhone.get().textContent = data.phone;      $  companyName.forEach((item) => {       const $  nameEl = item;       $  nameEl.textContent = data.name;     });   };    const handleRemoveCarFromTable = function handleRemoveCarFromTable(e) {     e.preventDefault();      if (!Helpers.isTagEqual(e.target.tagName, 'a')) return;     App.removeCar(this.lastElementChild.getAttribute('data-js'));   };    const renderCarColumns = function renderCarColumns(data) {     const { image, brandModel, year, plate, color } = data;      return `       <td>         <img src="$  {image}" alt="$  {brandModel}">       </td>       <td>$  {brandModel}</td>       <td>$  {year}</td>       <td>$  {plate}</td>       <td>$  {color}</td>       <td data-js="$  {plate}">         $  {$  btnRemoveTemplate}       </td>     `;   };    const addCarToTable = function addCarToTable(data) {     const document = document;     const $  docFragment = document.createDocumentFragment();     const $  newRow = document.createElement('tr');     $  newRow.innerHTML = renderCarColumns(data);     $  docFragment.appendChild($  newRow);     $  tableRecords.get().children[1].appendChild($  docFragment);      $  newRow.addEventListener('click', handleRemoveCarFromTable, false);   };    const clearRecordsTable = function clearRecordsTable() {     const $  tableBody = $  tableRecords.get().children[1];     while ($  tableBody.firstChild) {       $  tableBody.removeChild($  tableBody.firstChild);     }   };    const populateTable = function populateTable(arr) {     clearRecordsTable();      arr.forEach((car) => {       addCarToTable(car);     });   };    const publicAPI = {     init,     addCarToTable,     fillCompanyInfo,     populateTable   };    return publicAPI; }; 

index.js

import setupUI from './ui'; import setupApp from './app';  const UI = setupUI(); UI.init();  const App = setupApp(UI); App.init();