hello my code works in the console, but it gives an import error via html. I searched for the problem but couldn't find it.
here is my code and error:
Uncaught SyntaxError: Cannot use import statement outside a module
cloudinary.js
import { Cloudinary } from "@cloudinary/url-gen";
import { fill } from "@cloudinary/url-gen/actions/resize";
const cld = new Cloudinary({
cloud: {
cloudName: 'demo'
}
});
const myImage = cld.image('docs/models');
myImage.resize(fill().width(250).height(250));
console.log(myImage.toURL());
cloudinary.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script src="cloudinary.js"></script>
</body>
</html>
package.json
{
"dependencies": {
"@cloudinary/url-gen": "^1.8.0"
},
"name": "cloudinary",
"description": "",
"version": "1.0.0",
"main": "cloudinary.js",
"devDependencies": {},
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
You are trying to import your modules using Node.js-style module resolution.
While browsers support modules, they don't support Node.js-style module resolution.
You need to make use of a tool like Webpack, Parcel, or Rollup to bundle your modules in a format suitable for browsers.
Alternatively, you could look for versions of the modules designed for use directly in a web browser without any kind of toolchain.