CODEWITHSUNDEEP
javascript
Can
Can

Reputation: 21

JavaScript import error - Uncaught SyntaxError: Cannot use import statement outside a module

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

enter image description here

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"
}

Upvotes: 1

Views: 225

Answers (1)

Quentin
Quentin

Reputation: 944443

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.

Upvotes: 1

Related Questions