Dado que desea una exportación predeterminada, puede poner todo después de un export default . Dado que también desea poder hacer referencia a la función y llamarla, además de exportarla, si realmente desea seguir la ruta IIFE, defínala dentro de IIFE, llámela y devuélvala.

 export default (() => { const renderTask = (task) => { if (task) { const li = `<div class="li"><span><input type="checkbox">${task.description}</span><svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /> </svg></div>`; ul.innerHTML += li; } }; renderTask(); return renderTask; })();

Pero no hay necesidad de un IIFE en los módulos ES6; de todos modos, el nivel superior de los módulos tiene como alcance solo el módulo. No se está filtrando nada en el alcance global en su primer fragmento, y está más claro lo que está sucediendo, por lo que es posible que lo prefiera.

Los IIFE son útiles fuera de los módulos, cuando definir algo en el nivel superior contaminará el alcance global, pero no es algo de lo que deba preocuparse en los módulos. Las únicas variables que son globales dentro de los módulos son aquellas que asignas explícitamente a la window (o cualquiera que sea el objeto global), lo cual no se hace aquí.