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";
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-namein import statements.