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.
Related
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')
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?
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?
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,
}
});
});
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"
}
}