1

Estou tentando trabalhar com módulos no JavaScript e me deparei com um problema ao chamar uma função que está no arquivo main.js pelo index.html.

<!doctype html>
<html lang="en">
<head>
    <title>ES modules</title>
    <script type="module" src="./main.js"></script>
</head>
<body>

    <script>
        fnFuncionou()
    </script>

</body>
</html>

Esse main.js importa uma variável de texto de outro arquivo, o mods.js.

import texto from './mod.js'
console.log(`Fora da função ${texto}`)

function fnFuncionou() {
    console.log(`Dentro da função ${texto}`)
}

Abaixo o código do mods.js:

let texto = "funcionou!"

export default texto

Ao executar o index.html, recebo a mensagem do console.log(Fora da função ${texto}), que está fora da função no main.js. Porém, a função fnFuncionou() não é chamada, dando a seguinte mensagem de erro:

index.html:10 Uncaught ReferenceError: fnFuncionou is not defined

Alguém saberia me dizer o porquê disso acontecer? É possível chamar esta função fnFuncionou() sem alterar a estrutura de arquivos da pasta? Eu resumi o problema, pois os arquivos que estou trabalhando tem bem mais códigos.

1 Resposta 1

2

Quando você adiciona o atributo type="module" em um script, ele não é mais tratado do modo convencional. Por isso, as funções (globalmente) nele declaradas não ficam acessíveis ao HTML.

Por isso que você não pode chamar fnFuncionou no seu HTML, assumindo que ela faz parte do escopo global. Não é isso que acontece.

Ao trabalhar com módulos, você deve ser explícito. Portanto, você deve importar fnFuncionou. Assim:

Arquivo main.js:

import texto from './mod.js';

console.log(`Fora da função ${texto}`);

// Note que a função está sendo exportada:
export default function fnFuncionou() {
  console.log(`Dentro da função ${texto}`);
}

Arquivo index.html:

<!doctype html>
<html lang="en">
<head>
  <title>ES modules</title>
</head>
<body>
  <script type="module">
    import fnFuncionou from './main.js';

    fnFuncionou();
  </script>
</body>
</html>

Note que utilizei o atributo type="module" no <script> de index.html. Caso contrário, não poderia utilizar o import statement.

A saída será algo como:

Fora da função funcionou!
Dentro da função funcionou!
1
  • Muito obrigado! Commented 27/11/2020 às 0:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .