0

estoy haciendo un mini trabajo con js y node js y estoy teniendo problemas al hacer la peticion a la API de StartWars, cuando ejecuto npm run start me aparece el siguiente error:

> [email protected] start
> node app

(node:240) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
C:\Users\HUGO BUSTAMANTE\AppData\Local\Programs\xampp\htdocs\Curso de angular\Reto MachEight\reto js\app.js:1
import fetch from "node-fetch";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

Esto es lo que tengo en el packjage.json:

{
  "name": "reto-js",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "type":"commonjs",
  "scripts": {
    "start": "node app"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "node-fetch": "^3.2.3"
  }
}

Y esto eslo que hasta ahora tengo en el archivo app.js:

import fetch from "node-fetch";

fetch('https://swapi.co/api/people/1')
.then(response => response.json())
.then(response => console.log(response));

Solo tengo eso, ya trate de agregar en el package.json el "type": "module" pero al correr el código me sale otro error aun más largo:

undefined:1
<!DOCTYPE html><html lang="en-US"><head><meta charset="UTF-8"><link rel="apple-touch-icon-precomposed" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACbVBMVEX///800os00os00os00os00os00os00os00os00os00os00os00os00os00os00os00os00otO2Jph3KVz4K+E5LmV6MKn682479fH89+/8duv7dGe6ciO5r594rVt36xd26JM15k4040+1JFZ2qBn3ah04K+B47dA1ZJ24bGw7tLq+vP////3/frF8t5W2p9C1ZN34bGS58Gf6sis7dC68NfV9ufi+e/w/Pb9/v7g+O03041a2qGU58LO9OP8/v2z7tR84rRG1pWI5bts3qvQ9eSp7M5E1pTt+/XS9ebz/PiR58A6046d6cdw363U9ebm+fB54bNJ15fC8txR2Juy7tNe26NT2Z39//6J5bz6/vzs+/RV2Z7G8t8+1JC579dX2p/p+vLv+/bx/Pfi+O481JCr7M/k+fCF5LmL5b3a9+pS2ZyX6MPb9+v5/vu/8dqc6cdd26Nl3ady4K6Q5sDC8dxU2Z3J8+CA47c/1JE10otY2p+k68uY6MS07tRI1pb+///d9+uj68HinFRusMuiMpktlht3D5lptmsFrMpMfF/XO8SNBa37b4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDQtMThUMDA6NTY6MzErMDI6MDA3d1w4AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA0LTE4VDAwOjU2OjMxKzAyOjAwRirkhAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAZdEVYdFRpdGxlAExvZ28vUGlwZWRyZWFtLVBAMnggboouAAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC"><meta name="viewport" content="width=device-width,initial-scale=1"><script nonce="8829959165488992">__sha__='29d03089d1a5f2a0d20f6eab3c93b4aa57aac385'</script><script nonce="8829959165488992" type="module" crossorigin src="/_static/index.6abe9c1b.js"></script><link rel="modulepreload" href="/_static/npm.vue.56f01b86.js"><link rel="modulepreload" href="/_static/npm.lodash-es.a07c8556.js"><link rel="modulepreload" href="/_static/npm.datadog.4ca9dacc.js"><link rel="modulepreload" href="/_static/npm.lazysizes.146b7000.js"><link rel="modulepreload" href="/_static/npm.cronstrue.98333cf6.js"><link rel="modulepreload" href="/_static/npm.native-url.10416fcc.js"><link rel="modulepreload" href="/_static/npm.jsonschema.fd2071ca.js"><link rel="modulepreload" href="/_static/npm.lru_map.0df9bc14.js"><link rel="modulepreload" href="/_static/plugin-vue.export-helper.52b66894.js"><link rel="modulepreload" href="/_static/npm.vue-router.4ab5ceb5.js"><link rel="modulepreload" href="/_static/npm.luxon.2387ed90.js"><link rel="modulepreload" href="/_static/npm.vuex.693de30b.js"><link rel="modulepreload" href="/_static/npm.wonka.f029ea76.js"><link rel="modulepreload" href="/_static/npm.graphql.691dee57.js"><link rel="modulepreload" href="/_static/npm.urql.295355e6.js"><link rel="modulepreload" href="/_static/npm.cookie-esm.f8e233d5.js"><link rel="modulepreload" href="/_static/npm.protobufjs.c1d89018.js"><link rel="modulepreload" href="/_static/npm.uuid.889a4971.js"><link rel="modulepreload" href="/_static/npm.floating-ui.2ed50b09.js"><link rel="modulepreload" href="/_static/npm.floating-vue.72995462.js"><link rel="modulepreload" href="/_static/npm.web-vitals.362ad0cf.js"><link rel="modulepreload" href="/_static/npm.soerenmartius.57b44e53.js"><link rel="modulepreload" href="/_static/npm.rails.da6fb7ea.js"><link rel="modulepreload" href="/_static/npm.fast-deep-equal.366332f2.js">  <script nonce="8829959165488992" type="module">var __vite_is_dynamic_import_support=false;</script>
^

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Response.json (file:///C:/Users/HUGO%20BUSTAMANTE/AppData/Local/Programs/xampp/htdocs/Curso%20de%20angular/Reto%20MachEight/reto%20js/node_modules/node-fetch/src/body.js:149:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

El proyecto apenas lo he creado y tengo solo estos archivos: introducir la descripción de la imagen aquí

Agradezco de antemano cualquier ayuda, no se que puede estar pasando, tal vez sea un error mio de principiante

Edit: esta es la estructura del Json que me devuelve el API en el endpoint /people/1:

HTTP/1.0 200 OK
Content-Type: application/json
{
    "birth_year": "19 BBY",
    "eye_color": "Blue",
    "films": [
        "https://swapi.dev/api/films/1/",
        ...
    ],
    "gender": "Male",
    "hair_color": "Blond",
    "height": "172",
    "homeworld": "https://swapi.dev/api/planets/1/",
    "mass": "77",
    "name": "Luke Skywalker",
    "skin_color": "Fair",
    "created": "2014-12-09T13:50:51.644000Z",
    "edited": "2014-12-10T13:52:43.172000Z",
    "species": [
        "https://swapi.dev/api/species/1/"
    ],
    "starships": [
        "https://swapi.dev/api/starships/12/",
        ...
    ],
    "url": "https://swapi.dev/api/people/1/",
    "vehicles": [
        "https://swapi.dev/api/vehicles/14/"
        ...
    ]
}
5
  • 1
    perfectamente se puede hacer con import. OP, cuál es la estructura del json que el api te devuelve? Parece que tienes un problema con el parser
    – Arriel
    Commented el 16 abr. 2022 a las 21:05
  • @Arriel no habia leido bien, ya veo el error del tipo que es. Mala mia. Hugo, Si entras a swapi.co/api/people/1 o lees el error de la consola verás que la api te devuelve un HTML no un json.
    – Jaime
    Commented el 16 abr. 2022 a las 21:08
  • No problemo, Jaime. Más bien me alegra que estés dispuesto a ayudar, y rectificarte cuando haya algo que rectificar.
    – Arriel
    Commented el 16 abr. 2022 a las 21:11
  • 1
    @Arriel gracias, es que leí solo el título de la pregunta y el primer error, pero luego lo arregló y más abajo describe su otro error. Hugo para que te devuelva un json, debes hacer la petición a esta url swapi.dev/api/people/1/?format=json especificando como parámetro format=json. Si no especificas format=json entonces te va a redireccionar a la interfaz web.
    – Jaime
    Commented el 16 abr. 2022 a las 21:17
  • Funciono, gracias muchachos. esta es la url que use swapi.dev/api/people/1 y por alguna razón me funciono la url que ya tenia y que había colocado en el post. El "type": module lo agregue al package.json de nuevo e importe el node-fetch. No use required porque habia leido que despues de la version 3 de "node-fetch" estaba obsoleta y que ahora se usa el import
    – Hugo
    Commented el 16 abr. 2022 a las 21:27

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.