2

Estou tentando importar uma classe, mas estou cometendo um ou vários erros. Alguém pode me esclarecer sobre?

Arquivo js/calendar:

export default class Calendar {
  constructor(date) {
    console.log(date);
  }
}

Arquivo index.html (note que estou tentando importar a classe Calendar):

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Calendar</title>
</head>

<body>
  <div id="calendar"></div>
  <script>
    import { Calendar } from './js/calendar';

    var calendar = new Calendar('2020-02-01');
  </script>
</body>

</html>

No entanto, estou recebendo este erro:

SyntaxError: import declarations may only appear at top level of a module
3
  • import { Calendar } from './js/calendar'
    – bfavaretto
    13/02/2020 às 18:26
  • Eu já tentei isso, ele me retorna esse erro: "SyntaxError: import declarations may only appear at top level of a module" 13/02/2020 às 18:29
  • 2
    No HTML <script type="module"> 13/02/2020 às 18:47

1 Resposta 1

4

Você precisa executar o seu código como sendo um módulo.

Um módulo em JavaScript é um arquivo ou simples script que contém o código JS.

Não existe uma palavra-chave em JavaScript para definir um módulo.

Mas em HTML5 existe um atributo na tag <script> que indica qual o tipo de script representado. É o atributo type, cujo o valor:

  • Quando omitido ou informado o Mime Type JavaScript indica que o código deva ser tratado com um script JavaScript padrão.

  • Quando seu valor é module indica que o código será tratado em modo estrito e as palavras-chave import e export estarão disponíveis.

  • Qualquer outro valor será ignorado pelo browser.

Em HTML5 apenas adicione o atributo type com o valor module:

<script type="module">

Diferenças entre módulos e scripts padrão

  • Você precisa prestar atenção nos testes locais - se você tentar carregar o arquivo HTML localmente (por exemplo, com uma file://URL), ocorrerá erros do CORS devido a requisitos de segurança do módulo JavaScript. Você precisa fazer seus testes através de um servidor.

  • Observe que você pode obter um comportamento diferente das seções de script definidas dentro dos módulos e não nos scripts padrão. Isso ocorre porque os módulos usam o modo estrito automaticamente.

  • Não há necessidade de usar o atributo deferao carregar um script de módulo, módulos são adiados automaticamente.

  • Os recursos do módulo são importados para o escopo individual de cada script, eles não estão disponíveis no escopo global. Portanto, você poderá acessar apenas os recursos importados no script para o qual eles foram importados.

  • Você receberá erros de sintaxe mostrados no DevTools, mas algumas das técnicas de depuração estarão restritas.

Leia mais em https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules.

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 .