Modules in JavaScript

Question

I'm really new to javaScript so I'm a bit stuck on implementing modules in JS.

I have designed a ToDoList page and I'm using it to practice modules. So far, I have been able to export and import all the code where I think it makes sense. However, when trying to use the "import('./).then() syntax the console throws me an error. Please see below:

The below code works well at the moment.

import { Task, allTasks } from './App/Tasks.js'; 

function createTask(userInputAccess) {
  if(userInputAccess.value.trim() === '') {
    alert('You need to add a task!'); 
    return; 
  };
  
  const newTask = new Task(userInputAccess.value, 'active-list'); 
  userInputAccess.value = ''; 
  allTasks.push(newTask); 
  document.getElementById(newTask.set).append(newTask.html); 
  toggleListVisibility(allTasks);   
}

const lists = new Lists()
lists.inIt()


addTaskBtn.addEventListener('click', createTask.bind(null, userInputAccess));

This is what I was trying to implement. Bear in mind that I'm fetching the input from the user to create the task and this function is called through an event listener.

import { allTasks } from './App/Tasks.js'; 

function createTask(userInputAccess) {
  if(userInputAccess.value.trim() === '') {
    alert('You need to add a task!'); 
    return; 
  };
  import('./App/Tasks.js').then(module => {
  const newTask = module.tasks(userInputAccess.value, 'active-list'); 
  userInputAccess.value = ''; 
  allTasks.push(newTask); 
  document.getElementById(newTask.set).append(newTask.html); 
  toggleListVisibility(allTasks);   
  });

}

addTaskBtn.addEventListener('click', createTask.bind(null, userInputAccess));

Is there any reason why this might not work? I thought that if I set it this way then the task module will only trigger once the user clicks on the addTaskBtn.

Thank you!

Since the module is imported statically on line 1, it will be loaded before the user clicks the button. You need to remove that import if you want to load it dynamically. — Alexey Lebedev
– Alexey Lebedev, Commented Sep 23, 2020 at 8:52
@AlexeyLebedev thank you! I tried doing it like this and it keep throwing the same error import('./App/Tasks').then(module => { const newTask = module.Task(userInputAccess.value, 'active-list'); userInputAccess.value = ''; module.allTasks.push(newTask); document.getElementById(newTask.set).append(newTask.html); toggleListVisibility(module.allTasks); }) } any ideas? Thanks in advance! — Carlos Escobar
– Carlos Escobar, Commented Sep 23, 2020 at 8:59
One issue is that in your original code you do const newTask = new Task(...), but in dynamic code in the comment: const newTask = module.Task(...) without new. It should be const newTask = new module.Task(...). — Alexey Lebedev
– Alexey Lebedev, Commented Sep 23, 2020 at 9:10
Yes! I think that fixed it! I was looking at this just now. Thank you Alexey! — Carlos Escobar
– Carlos Escobar, Commented Sep 23, 2020 at 13:31
Hi Alexey, interestingly enough it did not work. I keep getting the same error... Do you think it could be that this is working in conjunction with an event listener? very strange... I was very certain that this might do the trick. — Carlos Escobar
– Carlos Escobar, Commented Sep 24, 2020 at 10:19

nanobar · Accepted Answer · 2020-09-23 08:51:52Z

2

You need to wrap the import path in a string - import('./App/Tasks.js').then(... otherwise the browser thinks it's some javascript expression to execute (with invalid syntax)

I guess you're experimenting but it doesn't look necessary to make that a dynamic import, the surrounding code definitely needs it. Dynamic imports are good for loading code that isn't always necessary.

edited Sep 23, 2020 at 8:51

answered Sep 23, 2020 at 8:44

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carlos Escobar Over a year ago

Hi Dominic, thank you! Sorry, I made a mistake here and forgot to add the string. I will edit the main question now. I have tried and keeps sending the same error. Yes, my intention is to only load the code when the person clicks on the button, otherwise, it is unnecessary. Would this be a good scenario when to use dynamic syntax btw?

Collectives™ on Stack Overflow

Modules in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related