Home > Back-end >  How import fetch with VSCode?
How import fetch with VSCode?

Time:11-05

I am a total newbie to JS. I would like to use fetch with VSCode but totally unable to import it.

When I use: import fetch from "node-fetch";

I have the following error:

(node:19856) 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\myname\Documents\myproject\my_fetch_program.js:6
import fetch from "node-fetch";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:984:16)
    at Module._compile (internal/modules/cjs/loader.js:1032:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

[Done] exited with code=1 in 0.325 seconds

import fetch from "node_modules/node-fetch"; does not work either ...

I don't understand this error, because, in package.json, the type is already set to module...

node_modules/node-fetch/package.json

{
  "_from": "node-fetch",
  "_id": "[email protected]",
  "_inBundle": false,
  "_integrity": "sha512-bKMI C7/T/SPU1lKnbQbwxptpCrG9ashG VkytmXCPZyuM9jB6VU hY0oi4lC8LxTtAeWdckNCTa3nrGsAdA3Q==",
  "_location": "/node-fetch",
  "_phantomChildren": {},
  "_requested": {
    "type": "tag",
    "registry": true,
    "raw": "node-fetch",
    "name": "node-fetch",
    "escapedName": "node-fetch",
    "rawSpec": "",
    "saveSpec": null,
    "fetchSpec": "latest"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0.tgz",
  "_shasum": "79da7146a520036f2c5f644e4a26095f17e411ea",
  "_spec": "node-fetch",
  "_where": "C:\\Users\\myname\\Documents\\myproject",
  "author": {
    "name": "David Frank"
  },
  "bugs": {
    "url": "https://github.com/node-fetch/node-fetch/issues"
  },
  "bundleDependencies": false,
  "dependencies": {
    "data-uri-to-buffer": "^3.0.1",
    "fetch-blob": "^3.1.2"
  },
  "deprecated": false,
  "description": "A light-weight module that brings Fetch API to node.js",
  "devDependencies": {
    "abort-controller": "^3.0.0",
    "abortcontroller-polyfill": "^1.7.1",
    "busboy": "^0.3.1",
    "c8": "^7.7.2",
    "chai": "^4.3.4",
    "chai-as-promised": "^7.1.1",
    "chai-iterator": "^3.0.2",
    "chai-string": "^1.5.0",
    "coveralls": "^3.1.0",
    "delay": "^5.0.0",
    "form-data": "^4.0.0",
    "formdata-node": "^3.5.4",
    "mocha": "^8.3.2",
    "p-timeout": "^5.0.0",
    "tsd": "^0.14.0",
    "xo": "^0.39.1"
  },
  "engines": {
    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
  },
  "files": [
    "src",
    "@types/index.d.ts"
  ],
  "funding": {
    "type": "opencollective",
    "url": "https://opencollective.com/node-fetch"
  },
  "homepage": "https://github.com/node-fetch/node-fetch",
  "keywords": [
    "fetch",
    "http",
    "promise",
    "request",
    "curl",
    "wget",
    "xhr",
    "whatwg"
  ],
  "license": "MIT",
  "main": "./src/index.js",
  "name": "node-fetch",
  "repository": {
    "type": "git",
    "url": "git https://github.com/node-fetch/node-fetch.git"
  },
  "runkitExampleFilename": "example.js",
  "scripts": {
    "coverage": "c8 report --reporter=text-lcov | coveralls",
    "lint": "xo",
    "test": "mocha",
    "test-types": "tsd"
  },
  "sideEffects": false,
  "tsd": {
    "cwd": "@types",
    "compilerOptions": {
      "esModuleInterop": true
    }
  },
  "type": "module",
  "types": "./@types/index.d.ts",
  "version": "3.0.0",
  "xo": {
    "envs": [
      "node",
      "browser"
    ],
    "ignores": [
      "example.js"
    ],
    "rules": {
      "complexity": 0,
      "import/extensions": 0,
      "import/no-useless-path-segments": 0,
      "import/no-anonymous-default-export": 0,
      "import/no-named-as-default": 0,
      "unicorn/import-index": 0,
      "unicorn/no-array-reduce": 0,
      "unicorn/prefer-node-protocol": 0,
      "unicorn/numeric-separators-style": 0,
      "unicorn/explicit-length-check": 0,
      "capitalized-comments": 0,
      "@typescript-eslint/member-ordering": 0
    },
    "overrides": [
      {
        "files": "test/**/*.js",
        "envs": [
          "node",
          "mocha"
        ],
        "rules": {
          "max-nested-callbacks": 0,
          "no-unused-expressions": 0,
          "no-warning-comments": 0,
          "new-cap": 0,
          "guard-for-in": 0,
          "unicorn/no-array-for-each": 0,
          "unicorn/prevent-abbreviations": 0,
          "promise/prefer-await-to-then": 0,
          "ava/no-import-test-files": 0
        }
      }
    ]
  }
}

EDIT Version of Node: v14.17.0

CodePudding user response:

The advice the warning message is giving refers to the package.json of your code as opposed to the package.json for the fetch library. If you don't already have a package.json at the root of your project (that is ./package.json instead of ./node_modules/node-fetch/package.json) you will need to create one. If you already have a ./package.json file or once you have created one you just need to add the line:

"type": "module"

This will allow you to use the ES6 import statements. Full documentation is available if you would like to read further.

  • Related