We Keep Coding

Why am I getting the 'SyntaxError: Cannot use import statement outside a module' error while using the cloudinary module?

I am trying to call the cloudinary module to resize an image. This is my code:
import cloudinary from 'cloudinary';
var cl = new cloudinary.Cloudinary({ cloud_name: "username", secure: true });
new CloudinaryImage("pingu.jpg").resize(scale().width(70).height(53));
Here's the error I'm getting:
(node:29424) 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\...\perspective\cloud.js:1
import cloudinary from 'cloudinary';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (node:internal/modules/cjs/loader:1018:16)
at Module._compile (node:internal/modules/cjs/loader:1066:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
at Module.load (node:internal/modules/cjs/loader:967:32)
at Function.Module._load (node:internal/modules/cjs/loader:807:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
at node:internal/main/run_main_module:17:47
[Done] exited with code=1 in 0.183 seconds
Can anyone tell me why I'm getting this specific error?

Use commonJs:
const cloudinary = require('cloudinary');

'Import' can only be used when the Node.JS file is ran as a module. Go to your package.json, and add in a key 'type' and the value 'module'.
{
"name": "test",
"version": "1.0.0",
"dependencies": {
...
}
}
to
{
"name": "test",
"version": "1.0.0",
"dependencies": {
...
},
"type": "module"
}
Alternatively, you could change your code from and then you don't need to edit your 'package.json' file
import something from Something
to
const something = require('Something')

getting a import statement error in node js

I started learning node.js recently.
I was using vs code and going through url module and got this error.
PS G:\node js> node "g:\node js\urlmodule.js"
(node:1964) 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)
g:\node js\urlmodule.js:1
import url from 'url';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159: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
the code was-
import url from 'url';
const myURL = new URL('https://example.org');
myURL.pathname = '/a/b/c';
myURL.search = '?d=e';
myURL.hash = '#fgh';
console.log(myURL)
console.log(myURL.href)

Try to set:
"type": "module"
In your package.json file.

You have to include "type": "module" in package.json file.

Looks like you don't have setup to support es6 imports. Try using commonJS imports:
Eg: const url = require('url');
If you wanna use es6 import please follow this.

remark-cli "Cannot use import statement outside a module"

I'm creating a documentation project which I npm init'd. This is the relevant part of my package.json
"scripts": {
"lint": "remark --quiet --frail ."
},
"type": "module",
"dependencies": {
"remark-cli": "^10.0.0",
"remark-preset-lint-markdown-style-guide": "^5.0.0"
},
I would now like to lint the Markdown files with remark-cli:
`remark --quiet --frail .`
This is the error I'm getting:
<...>/node_modules/remark-cli/cli.js:2
import {createRequire} from 'node:module'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:895:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
at internal/main/run_main_module.js:17:11
I thought adding "type": "module" to package.json would solve this but no luck.
What am I doing wrong here?

Error: (node:17060) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension

I just started learning JavaScript by using Atom in order to create an online chart. Hence, I am quite unfamiliar with NPM, package.json and all that sort of things.
I want to import two modules by using the following code:
import * as am4core from "#amcharts/amcharts4/core";
import * as am4charts from "#amcharts/amcharts4/charts";
Which gives the following error message:
(node:17060) 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\PF1VMKH9_ADM\Documents\herverkaveling\test:4
import * as am4core from "#amcharts/amcharts4/core";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1001:16)
at Module._compile (internal/modules/cjs/loader.js:1049:27)
at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Object.newLoader [as .js] (C:\Users\PF1VMKH9_ADM\.atom\packages\script\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
at Object.<anonymous> (C:\Users\PF1VMKH9_ADM\.atom\packages\script\node_modules\#babel\node\lib\_babel-node.js:176:21)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
[Finished in 0.522s]
I added "type": "module" to the package.json file but it did not solve the issue:
{
"name": "packages",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type":"module",
"dependencies": {
"typescript": "^4.4.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
What am I doing wrong?

Uncaught ReferenceError: require is not defined at Object.url Electron-React-Typescrypt

How to properly use import statement?
This is my very basic electron-react starter :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
Using node Chrome and Electron
</body>
</html>
package.json :
{
"name": "react-ggc",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"devDependencies": {
"electron": "^10.1.2",
"typescript": "^4.0.3"
},
"scripts": {
"start": "electron ."
},
"dependencies": {
"react": "^16.13.1"
}
}
main.js :
const {app, BrowserWindow} = require('electron')
//import { app, BrowserWindow } from 'electron'
async function createWindow () {
// Create the browser window
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL ('http://localhost:3000/')
win.webContents.openDevTools()
}
app.on('ready', createWindow)
Running yarn electron . I have no problems at all :
(base) marco#pc01:~/webMatters/electronMatters/react-ggc$ yarn electron .
yarn run v1.22.5
$ /home/marco/webMatters/electronMatters/react-ggc/node_modules/.bin/electron .
But when I add "type": "module" to package.json which, based on what I read around, should indicate that every .js files are considered modules, and modify in main.js the way of importing :
package.json :
{
"type": "module",
"name": "react-ggc",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"devDependencies": {
"electron": "^10.1.2",
"typescript": "^4.0.3"
},
"scripts": {
"start": "electron ."
},
"dependencies": {
"react": "^16.13.1"
}
}
main.js :
//const {app, BrowserWindow} = require('electron')
import { app, BrowserWindow } from 'electron'
I get this error:
(base) marco#pc01:~/webMatters/electronMatters/react-ggc$ yarn electron .
yarn run v1.22.5
$ /home/marco/webMatters/electronMatters/react-ggc/node_modules/.bin/electron .
App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/marco/webMatters
/electronMatters/react-ggc/main.js
require() of ES modules is not supported.
require() of /home/marco/webMatters/electronMatters/react-ggc/main.js from /home/marco
/webMatters/electronMatters/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js is an ES module file as it is a .js file whose nearest parent
package.json contains "type": "module" which defines all .js files in
that package scope as ES modules.
Instead rename /home/marco/webMatters/electronMatters/react-
ggc/main.js to end in .cjs, change the requiring code to use import(),
or remove "type": "module" from /home/marco/webMatters/electronMatters
/react-ggc/package.json.
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1162:13)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
at Function.Module._load (electron/js2c/asar.js:769:28)
at loadApplicationPackage (/home/marco/webMatters/electronMatters
/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js:109:16)
at Object.<anonymous> (/home/marco/webMatters/electronMatters
/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js:155:9)
at Module._compile (internal/modules/cjs/loader.js:1145:30)
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1166:10)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
A JavaScript error occurred in the main process
Uncaught Exception:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:
/home/marco/webMatters/electronMatters/react-ggc/main.js
require() of ES modules is not supported.
require() of /home/marco/webMatters/electronMatters/react-ggc/main.js
from /home/marco/webMatters/electronMatters/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js is an ES module file
as it is a .js file whose nearest parent package.json contains "type":
"module" which defines all .js files in that package scope as ES
modules.
Instead rename /home/marco/webMatters/electronMatters/react-
ggc/main.js to end in .cjs,
change the requiring code to use import(), or remove "type":
"module" from /home/marco
/webMatters/electronMatters/react-ggc/package.json.
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1162:13)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
at Function.Module._load (electron/js2c/asar.js:769:28)
at loadApplicationPackage (/home/marco/webMatters
/electronMatters/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js:109:16)
at Object.<anonymous> (/home/marco/webMatters/electronMatters
/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js:155:9)
at Module._compile (internal/modules/cjs/loader.js:1145:30)
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1166:10)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
node version: v14.5.0
How to solve the problem?

for this you need to add webPreferences for creating window.
app.on('ready', () => {
window = new BrowserWindow({
width: 900,
height: 680,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
}
});
});