Importar um arquivo JSON que está em .js

Front-end JavaScript
#1

Estou realizando uma atividade de JavaScript, na qual preciso fazer o seguinte exercício:

image
image.png1360×768 100 KB

Porém acredito que não estou conseguindo importar o arquivo corretamente, já que o resultado está sendo:

exercicio4.js:5 Uncaught SyntaxError: Cannot use import statement outside a module]

No caso, meu js está assim:

let div = document.querySelector("#cards");

document.querySelector("#btn1").addEventListener("click", function(){

    import detran from "/detran.js";

    pesquisa(detran);

});

function montaCard(detran){

    div.innerHTML += `<div class="cards">

                      <img src="${detran.foto}">

                      <h3>${detran.proprietario}</h3>

                      <p><strong>Placa: </strong> ${detran.placa}</p>

                      <p><strong>CNH: </strong> ${detran.cnh}</p>

                      <p><strong>Gravidade: </strong> ${detran.gravidade}</p>

                      <p><strong>Pontos</strong> ${detran.pontos}</p>

                      <p><strong>Data: </strong> ${detran.data}</p>

                      <p id="valor"><strong>Valor: </strong> ${detran.valor}</p>

                      </div>`;

}

function pesquisa(detran){

    div.innerHTML = "";

    for (let id of detran){

        if(id.proprietario.toLowerCase().indexOf(detran) == id.proprietario){

            montaCard(id);

        }

    }

}

E o html assim:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="estilo4.css">

</head>

<body>

    Nome: <input type="text" id="pesq">

    <input type="button" value="pesquisar" id="btn1"><br>

    <div id="cards">

    </div>

    <script src="jquery.min.js"></script>

    <script type="module" src="detran.js"></script>

    <script src="exercicio4.js"></script>

    

</body>

</html>

Alguém saberia me ajudar? É pra uma prova pra ser entregue amanhã lol

#2

acredito que o problema seja nesse import detran from "/detran" , certo?

Se sim, mostra como está o detran.js

#3

@Samy,

Não sei se tem alguma relação com o problema, mas já recebi esse tipo de erro ao tentar utilizar o import/export, e fiz o seguinte:

Importei todos os arquivos.js com as tags <script>, retirei o type="module" delas, e não dei import nem export nos arquivos.

Aparentemente, você não precisa ficar importando e exportando o que você quer entre os scripts, basta declarar todos os arquivos no HTML, que a comunicação entre eles já está feita.

Atente-se à ordem das tags <script>, caso uma dependa da outra, declare-a antes. Por exemplo:

<script src="/scriptPai.js"></script>
<script src="/scriptFilho.js></script>

Repito, não sei se tem alguma relação com o problema em questão, ou se realizar os procedimentos é uma má prática, mas funcionou para mim.

#4

Então, depois que eu joguei o type=“module” pro script do javascript do exercício msm, o erro mudou pra:

Uncaught SyntaxError: The requested module ‘/detran.js’ does not provide an export named ‘default’ ahahah

#5

tenta

import {detran} from "/detran.js";