Olá Gustavo, tudo bem?
O import from
é uma forma mais moderna de importar módulos em JavaScript, porém ele só pode ser utilizado em módulos ES6, enquanto o require é utilizado em módulos CommonJS.
O JavaScript não reconhece a sintaxe import
como padrão do ES6 para importar módulos. Para resolver esse problema, você precisa especificar no seu projeto que deseja usar a sintaxe de importação de módulo do ES6. Para isso, primeiramente precisamos criar um arquivo chamado package.json, nada mais é o que um arquivo responsável por guardar informações, scripts e controle de versionamento de bibliotecas dos projetos em JavaScript.
Para criar um arquivo package.json para o seu projeto, siga os seguintes passos:
Abra o terminal ou prompt de comando na pasta raiz do seu projeto.
Digite o comando npm init e pressione Enter.
O npm irá solicitar que você preencha algumas informações básicas sobre o seu projeto, como nome, descrição, versão, autor, etc. Você pode preencher essas informações ou simplesmente pressionar Enter para aceitar os valores padrão.
Quando o npm terminar de coletar as informações, ele exibirá um resumo do package.json que será criado. Verifique se as informações estão corretas e, se estiverem, digite "yes" (sem aspas) e pressione Enter para criar o arquivo package.json.
Ao concluir os passos, acesse o aquivo é Adicione "type": "module" ao mesmo, como mostrado na imagem abaixo:
Após isso tudo você conseguirá importar sem mais problemas!
Espero ter ajudado. Caso tenha mais dúvidas ou problemas, estarei a disposição.
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.