We Keep Coding

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?

Must use import to load ES Module

I am trying to create a service to convert an SVG to a PNG using the svg2img package. I have it working locally using vercel dev, however when I try to deploy to vercel I always get this error:
2021-09-27T01:11:56.532Z e3a35069-8a51-4e1d-81b9-110e1b17e2be ERROR Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /var/task/api/node_modules/canvg/lib/index.js
require() of ES modules is not supported.
require() of /var/task/api/node_modules/canvg/lib/index.js from /var/task/api/node_modules/svg2img/index.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 /var/task/api/node_modules/canvg/lib/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /var/task/api/node_modules/canvg/package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (/var/task/api/node_modules/svg2img/index.js:1:13)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12) {
code: 'ERR_REQUIRE_ESM'
}
RequestId: e3a35069-8a51-4e1d-81b9-110e1b17e2be Error: Runtime exited with error: exit status 1
Runtime.ExitError
Here is what my code looks like:
import svg2img from 'svg2img';
export default function(req, res) {
const url = req.query.url;
const width = req.query.width;
const height = req.query.height;
const size = Math.min(width, height);
svg2img(url, {width: size, height: size, preserveAspectRatio: true},
function(error, buffer) {
if (buffer) {
res.send(buffer);
}
});
};
Here is the package.json
{
"name": "svg2png",
"version": "1.0.0",
"description": "convert svgs to pngs",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "me",
"license": "ISC",
"dependencies": {
"svg2img": "^0.9.3"
},
"type": "module"
}

You can try lowering the version of svg2img to one that doesn't use 3.0.8 of canvg which uses "type": "module" in their package.json. svg2img uses require('canvg') which causes the error because it is trying to use commonjs in an esm context.
See this issue.

how to require constants which is exported in ES6 module?

The original variables are exported in ES6 module like this:
export const url = 'https://example.com/api'
I know I can use this variable using
import {url} from 'src/api'
But the thing is I can't use import in gatsby-config.js file and only can use ES5 syntax.
I tried like this:
const {url} = require('src/api')
but it doesn't work and get errors while gatsby develop
The error is following:
export const url = 'https://example.com/api'
^^^^^^
SyntaxError: Unexpected token 'export'
- v8-compile-cache.js:226 NativeCompileCache._moduleCompile
[project]/[v8-compile-cache]/v8-compile-cache.js:226:18
- v8-compile-cache.js:172 Module._compile
[project]/[v8-compile-cache]/v8-compile-cache.js:172:36
- loader.js:995 Object.Module._extensions..js
internal/modules/cjs/loader.js:995:10
- loader.js:815 Module.load
internal/modules/cjs/loader.js:815:32
- loader.js:727 Function.Module._load
internal/modules/cjs/loader.js:727:14
- loader.js:852 Module.require
internal/modules/cjs/loader.js:852:19
- v8-compile-cache.js:159 require
[project]/[v8-compile-cache]/v8-compile-cache.js:159:20
- gatsby-config.js:4 Object.<anonymous>
C:/project/gatsby-config.js:4:26
- v8-compile-cache.js:178 Module._compile
[project]/[v8-compile-cache]/v8-compile-cache.js:178:30
- loader.js:995 Object.Module._extensions..js
internal/modules/cjs/loader.js:995:10
- loader.js:815 Module.load
internal/modules/cjs/loader.js:815:32
- loader.js:727 Function.Module._load
internal/modules/cjs/loader.js:727:14
- loader.js:852 Module.require
internal/modules/cjs/loader.js:852:19
- v8-compile-cache.js:159 require
[project]/[v8-compile-cache]/v8-compile-cache.js:159:20
- get-config-file.js:33 getConfigFile
[project]/[gatsby]/dist/bootstrap/get-config-file.js:33:20

When you exporting your constant if you use module.exports it should not give this error. Do it like this:
const yourUrl = 'https://example.com/api'
module.exports = { url: yourUrl }

Hope you know what you are trying to achieve because the result produces anti pattern against gatsbyjs specification as it already converts code internally from es6 to es5 after reading and validating gatsby-config.js.
So, try this way to require constants in gatsby-config.js which were exported in es6 module
From es6 to es5 conversion, install #babel/cli and #babel/core package i.e npm install #babel/cli #babel/core --save-dev
Add new npm/yarn script in package.json -> scripts -> "prepare_config" : "NODE_ENV=test babel ./gatsby-config.js <LIST_OF_FILES_TO_CONVERT> --out-dir ./"
Make sure babel-preset-gatsby directory is present under node_modules if not then install it i.e. npm install babel-preset-gatsby --save-dev
Either add .babelrc in project root directory having below code for babel preset and conversion.
{
"presets": [
[
"babel-preset-gatsby",
{
"forceAllTransforms": true,
"useBuiltIns": "usage"
}
]
]
}
OR if you don't want to add .babelrc then specify babel configuration in package.json.
"babel": {
"presets": [
[
"babel-preset-gatsby",
{
"forceAllTransforms": true,
"useBuiltIns": "usage"
}
]
]
}
Now run npm run prepare_config script first for conversion which will import required constants which were exported in ES6 module.
Then you can run gatsby develop successfully.

Change the type:"module" or set in package.json.
{
"name": "server",
"version": "1.0.0",
"type": "module",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo "Error: notestspecified" && exit 1",
"start": "nodemon server.js"
},
"keywords": [
],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.16.5",
"body-parser": "^1.19.1",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.2",
"mongoose": "^6.1.3",
"nodemon": "^2.0.15"
}
}

Unexpected token in jsdom when used with babel and npx

I want to do some tests on canvas purely in node.js.
This is my package.json
{
"name": "test",
"description": "Test",
"version": "0.1.0",
"author": "anthony#work",
"dependencies": {
"canvas": "^1.6.7",
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"jsdom": "^11.3.0"
}
}
This is my .babelrc
{
"presets": ["env", "stage-0"]
}
This is my test javascript (a.js)
const { jsdom } = require('jsdom');
// main
jsdom();
console.log('done')
When I run the script, however,
npx babel a.js | nodejs -- -
I get this error:
/work/node_modules/jsdom/lib/api.js:10
const { URL } = require("whatwg-url");
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at [stdin]:3:16
at Object.exports.runInThisContext (vm.js:54:17)
at Object.<anonymous> ([stdin]-wrapper:6:22)
What causes this error? How can I fix this error?
Version information:
Node.js: v4.2.6
OS: Ubuntu 16.04

You are running an incompatible node version with jsdom.
jsdom#10 requires nodejs v6. So either upgrade Node or downgrade jsdom.
Found info about that here: https://github.com/tmpvar/jsdom#jsdom