I have 3 files one HTML, 2 javascript files named app.js and customer .js
I have an HTML page on which I have written this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello
<script src="app.js" type="module"></script>
</body>
</html>
I just loaded app.js into this page
app.js contains this
import {person} from "./customer";
console.log("helllo");
and in customer.js i have this
const person={
name:"hello"
}
export default person;
I am getting an import error the error shows
GET http://127.0.0.1:5500/customer net::ERR_ABORTED 404 (Not Found)
I am new to web development, please help me.
Here, the way you are importing it is wrong.
Let me explain. First of all, I can see that you are default exporting the module or whatever. In that case, you don't need those curly brackets.
import person from "./customer.js";
Second, just make sure that in your package.json you have "type" set to "module" just like this
"type": "module",
Third, if you are using VSCode, then you can right-click on your customer.js file and click on copy relative path to get its relative path from your project.
Summary:
Hope this helps to solve your query!