This question already has answers here:
How do I include a JavaScript file in another JavaScript file?
(70 answers)
Closed 1 year ago.
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": "node-fetch#3.0.0",
"_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
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
I'm trying to debug vuejs with vscode, I've tried a lot of tutorials/answers and could not make it work.
So I decided to ask a question here, maybe nowadays there's a right way to make it work.
I've created a project that it's identical with the one I want to debug, so I can post prints here.
The project structure is:
Here is the unbound breakpoint:
Sources Tab in chrome looks like:
More detailed chrome sources tab:
vue.config.js:
/**
* #type {import('#vue/cli-service').ProjectOptions}
*/
module.exports = {
configureWebpack: {
devtool: "source-map"
},
transpileDependencies: true
}
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"**/src/*": "${webRoot}/src/*",
},
"preLaunchTask": "vuejs: start"
}
]
}
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "vuejs: start",
"type": "npm",
"script": "serve",
"isBackground": true,
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
UPDATE
#A.D asked if I've tried to use keyword
debugger;
Here is the results:
Ps: I don't want to start writing debugger in my code...
But with that i could see that the debugger file is pointing to:
C:\Users\vinic\Desktop\test\test\js\webpack:\test\src\components\HelloWorld.vue
But the component src is actualy located in
C:\Users\vinic\Desktop\test\test\src\components\HelloWorld.vue
Why my breakpoints are not bounding?
Try to change webRoot param and leave as in the documentation, you need to include src after ${workspaceFolder}.
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
UPDATE:
After some research, i found this issue.
There is a change in this version that you used.
They changed the compiler and this affected the way to debugger.
You can use the "2.6.11" works in this version.
Note: This change affected later versions.
Appearently there are some problems with the webpack of vue versions above 2.6.11
Git hub Thread
Reddit Thread
After some discussions with #Tonielton Mota i noticed that, if I fully remove the property name from package.json and package-lock.json it works.
Here are the files that are working:
launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
},
"preLaunchTask": "vuejs: start"
}
]
}
package.json
{
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I am new to Jest and Stackoverflow posting.
I have been trying to add unit test cases for knockoutJS application but getting ReferenceError: ko is not defined error when running the test. Any help would be appreciated.
below is the package.json file.
{
"name": "jstesting",
"version": "1.0.0",
"description": "",
"main": "eVIPs.js",
"type": "module",
"scripts": {
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/preset-react": "^7.17.12",
"jest": "^28.1.0",
"jest-html-reporters": "^3.0.8",
"typescript": "^2.9.2"
},
"dependencies": {
"#babel/preset-env": "^7.18.2",
"#babel/preset-typescript": "^7.17.12",
"babel-jest": "^28.1.0",
"jquery": "^3.6.0",
"knockout": "^3.5.1"
},
"jest": {
"reporters": [
"default",
[
"jest-html-reporters",
{
"publicPath": "./html-report",
"filename": "report.html",
"openReport": false
}
]
],
"collectCoverage": true
}
}
and this is the test file.
import testLogin from '../loginPage';
import homeJS, { HomeViewModel } from '../Home';
The following error (abbreviated from original and taken from the title) occurs upon invocation of npm start on my React Server.
How do I resolve this, by adding what it is asking in package.json, or even reinstalling all dependencies?
Error: Package path react-dom.development not exported from package node_modules\react-dom see exports field in \node_modules\react-dom\package.json
Exact error:
ERROR in ./src/components/editrisk/EditRisk.js 5:0-61
Module not found: Error: Package path ./cjs/react-dom.development is
not exported from package
C:\wamp64\www\RiskAIM\app\node_modules\react-dom (see exports field in
C:\wamp64\www\RiskAIM\app\node_modules\react-dom\package.json)
EditRisk.js First 5 Lines (import declarations)
import React from 'react';
import { render } from 'react-dom/cjs/react-dom.development';
import { ThemeProvider } from 'styled-jss';
import { formatDateMDY } from '../../common/Functions';
import { EditRiskNavigationButtons, EditRiskSummary } from './SubComponents';
//import './EditRisk.jss';
Package.json
{
"name": "react-dom",
"version": "18.0.0",
"description": "React package for working with the DOM.",
"main": "index.js",
"repository": {
"type": "git",
"url": "https://github.com/facebook/react.git",
"directory": "packages/react-dom"
},
"keywords": [
"react"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/facebook/react/issues"
},
"homepage": "https://reactjs.org/",
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.21.0"
},
"peerDependencies": {
"react": "^18.0.0"
},
"files": [
"LICENSE",
"README.md",
"index.js",
"client.js",
"profiling.js",
"server.js",
"server.browser.js",
"server.node.js",
"test-utils.js",
"cjs/",
"umd/"
],
"exports": {
".": "./index.js",
"./client": "./client.js",
"./server": {
"deno": "./server.browser.js",
"worker": "./server.browser.js",
"browser": "./server.browser.js",
"default": "./server.node.js"
},
"./server.browser": "./server.browser.js",
"./server.node": "./server.node.js",
"./profiling": "./profiling.js",
"./test-utils": "./test-utils.js",
"./package.json": "./package.json"
},
"browser": {
"./server.js": "./server.browser.js"
},
"browserify": {
"transform": [
"loose-envify"
]
}
}
Addition of
"./reactdom-development": "./cjs/react-dom.development",
Under Exports, did not remedy the error.
How do I proceed?
I am a newbie in NativeScript, I am trying to import/open an existing NatriveScript project on Visual Studio code, I have installed, Node, NativeScript 3.0.3, when I try to build or run the project I get this from debug console
[NativeScriptCli] execute: tns --analyticsClient VSCode --version
[NSDebugAdapter] Using tns CLI v3.0.3 on path 'tns'
[NSDebugAdapter] Running tns command...
[NativeScriptCli] execute: tns --analyticsClient VSCode debug android --no-client --watch
[NSDebugAdapter] Watching the tns CLI output to receive a connection token
Searching for devices...
Executing before-prepare hook from c:\Dev\QAP\Mobile app\hooks\before-prepare\nativescript-dev-android-snapshot.js
[31;1mPath must be a string. Received undefined
[NSDebugAdapter] The tns command finished its execution with code 127.
Error: Unknown signal: SIGQUIT
Here is my package.json
{
"name": "tns-template-hello-world-ts",
"main": "app.js",
"version": "2.4.0",
"author": "Telerik <support#telerik.com>",
"description": "Nativescript hello-world-ts project template",
"license": "Apache-2.0",
"keywords": [
"telerik",
"mobile",
"nativescript",
"{N}",
"tns",
"appbuilder",
"template"
],
"repository": {
"type": "git",
"url": "git#github.com:NativeScript/template-hello-world-ts.git"
},
"bugs": {
"url": "https://github.com/NativeScript/template-hello-world-ts/issues"
},
"homepage": "https://github.com/NativeScript/template-hello-world-ts",
"android": {
"v8Flags": "--expose_gc"
},
"dependencies": {
"moment": "^2.11.2",
"nativescript-background-http": "^2.5.1",
"nativescript-camera": "0.0.8",
"nativescript-checkbox": "^1.2.2",
"nativescript-drop-down": "^1.4.0",
"nativescript-floatingactionbutton": "^2.1.3",
"nativescript-fresco": "^1.0.13",
"nativescript-imagepicker": "^2.4.1",
"nativescript-permissions": "^1.2.1",
"nativescript-pulltorefresh": "^1.1.9",
"nativescript-social-share": "^1.3.1",
"nativescript-telerik-ui": "^0.2.4",
"nativescript-theme-core": "^0.2.1",
"nativescript-toast": "^1.4.5",
"nativescript-videoplayer": "^1.1.4",
"nativescript-videorecorder": "^1.3.4",
"tns-core-modules": "^2.5.2"
},
"devDependencies": {
"nativescript-dev-typescript": "^0.3.2",
"nativescript-dev-android-snapshot": "^0.*.*"
}
}
and my launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch on Android",
"type": "nativescript",
"request": "launch",
"platform": "android",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": true
},
{
"name": "Attach on Android",
"type": "nativescript",
"request": "attach",
"platform": "android",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": false
}
]
}
I'm using Webpack with Polymer, importing a component like so:
import '#polymer/polymer/polymer-element.html';
class AppShell extends Polymer.Element {
static get is() { return 'app-shell'; }
}
I left out the rest of the component here. The import is working as expected in my app, but when I am running ESLint, I get the following error message:
50:27 error 'Polymer' is not defined no-undef
This is my package.json, where I'm defining my ESLint settings. Anyone have an idea why ESLint is not picking up the import properly?
{
"name": "client-meeting-tracker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"start": "node utils/webserver.js",
"lint": "eslint --ext .html,.js */**",
"build": "node utils/build.js"
},
"dependencies": {
"#startup-boilerplate/inkling": "*",
"auth0-lock": "^10.7.3",
"lodash": "^4.6.1",
"moment": "^2.17.1"
},
"devDependencies": {
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"eslint": "^3.16.0",
"eslint-plugin-html": "^2.0.1",
"eslint-plugin-import": "^2.2.0",
"file-loader": "^0.8.4",
"fs-extra": "^0.30.0",
"polymer-cli": "^0.17.0",
"wc-loader": "*",
"webpack": "2.2.0",
"webpack-dev-server": "2.2.0"
},
"eslintConfig": {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": [
"error",
"tab",
{
"SwitchCase": 1
}
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
},
"plugins": [
"html"
]
}
}
Polymer is defined as a global, so I would configure Polymer as a global in your package.json:
"eslintConfig": {
"globals": {
"Polymer": true
}
}