A nova sintaxe de ECMAScript Modules (ESM) foi estabilizada em versões recentes do Node.js para substituir o CommonJS, não padronizado pela especificação da linguagem.

Apesar do "objetivo" de ESM e CJS serem os mesmos, existem algumas diferenças. Entre elas, pode-se citar, no caso desta pergunta, o fato de que, até o momento, a sintaxe de ES Modules não suportar a importação de JSON.

Portanto, uma forma (recomendada pela própria documentação do Node.js) de se importar JSON é utilizar a API de file system. Assim:

import { readFile } from 'fs/promises';
const json = JSON.parse(await readFile('./test.json', 'utf8'));

Um outro modo é "recriar" o require para uso no contexto de ECMAScript Modules. No entanto, eu questionaria o uso dessa alternativa.

Recriar o require, utilizando o referido createRequire, parece-me um overhead muito grande para uma simples leitura de arquivo e subsequente parse. O require é extremamente complexo e vai muito além de simples importações de JSON. Não vale a pena.

Só para garantir a completude desta resposta, até daria para fazer assim:

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

const json = require('./test.json');

Mas insisto em reiterar: o createRequire não deve ser utilizado para isso, uma vez que é um overhead extremamente grande para uma simples leitura de arquivo. Idealmente o createRequire deve ser utilizado apenas em casos em que uma codebase faz uso tanto de ESM e CJS, sendo necessário criar uma "ponte" para interligá-los. Utilizar createRequire para ler JSON é, na maioria dos casos, um absurdo.

Futuramente, quando a proposta de import assertions for estabilizada, suponho que será possível importar JSON com os ES Modules. Até então, é possível utilizar a flag --experimental-json-modules – não estabilizada, uma vez que é experimental.

Caso você não queria utilizar JQuery pode acessar o arquivo utilizando XMLHttpRequest():

var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onreadystatechange = function() {
      var status = xhr.status;
      if (status === 200) { 
        //Callback caso de tudo certo
        callback(null, xhr.response);
      } else {
        //Callback caso de algum erro
        callback(status, xhr.response);
      }
    };
    xhr.send();
};

//Utilizando o método
getJSON('SeuArquivo.json', function(err, data) {
  if (err !== null) {
    console.log('Ocorreu um erro' + err);
  } else {
    //Aqui você manipula os dados e pode percorrer e jogar no HTML 
    //da forma que achar mais adequada.
    console.log(data);
  }
});

Caso queria utilizar a biblioteca jquery você deve incluir a biblioteca:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

E após o carregamento da página você pode acessar o arquivo através do método getJSON():

//OnLoad
$(function(){

  $.getJSON("SeuArquivo.json", function(data) {
    //Aqui você manipula os dados e pode percorrer e jogar no HTML 
    //da forma que achar mais adequada.
      console.log(data); 
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>