JavaScript - how can i import frappe chart correctly without using link?

Question

I want to import frappe by using the following code

import { Chart } from "frappe-charts/dist/frappe-charts.min.esm";

I already downloaded frappe-charts package and put it into my project package.

But it always shows: "Uncaught SyntaxError: Cannot use import statement outside a module"

Now I just solved this problem but a new problem appeared.

The problems are:

index.html:1 Access to script at 'file:///Users/dizitong/Downloads/2yp7jv/js/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
index.html:7 GET file:///Users/dizitong/Downloads/2yp7jv/js/index.js net::ERR_FAILED

Here is index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Data Chart</title>
    <script type="module" src="js/index.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <form id="municipality-form">
      <input type="text" id="input-area" placeholder="Type municipality name" />
      <button type="button" id="submit-data">Fetch Data</button>
</form>

And in my index.js

import { Chart } from "frappe-charts/dist/frappe-charts.min.esm";

Do any of these help? [1](https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import) [2](https://stackoverflow.com/questions/58384179/syntaxerror-cannot-use-import-statement-outside-a-module) [3](https://stackoverflow.com/questions/62488898/node-js-syntaxerror-cannot-use-import-statement-outside-a-module) [4](https://stackoverflow.com/questions/74500818/syntaxerror-cannot-use-import-statement-outside-a-module-javascript-in-pyth) — Zac Anger, Jul 27 '23 at 00:48
Please show us more context. Also, revise your title to ask a clear, specific question. See [ask]. — isherwood, Jul 27 '23 at 01:01

MWY · Answer 1 · 2023-07-27T01:08:18.467

If you use node.js set "type": "module" in package.json for use import { Chart } from "frappe-charts";, or set <script type="module" src="your-file.js"></script> in browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="module" src="./five.js"></script>

</head>
<body>

<h3>Hello World</h3>
</body>
</html>

// five.js
import { Chart } from 'https://unpkg.com/frappe-charts@latest/dist/frappe-charts.esm.js';

//package.json
  "version": "0.0.0",
  "private": true,
  "type": "module", //set this

score 0 · Answer 2 · answered Jul 27 '23 at 05:11

Implementation of ECMAScript modules in HTML does not support the file:// protocol.

If a web page is loaded from the net it generally can't access files on the client device, using the file protocol, because such access is blocked to prevent web pages accessing the file system on front-end devices.
If a page is loaded from local storage, attempts to implicitly load a module from local storage, by executing an import statement with a file URL as the module-name in the from clause, are blocked by CORS because it doesn't support file:// URLs. The "Reason: CORS request not HTTP" text in error messages (issued by Firefox) is explained further on MDM.

The second reason accounts for both errors in the post: importing from file URLs is not implemented in HTML for reason of requiring a net based URL as the module-name in import statements.

JavaScript - how can i import frappe chart correctly without using link?

2 Answers2