importing one java script file to another file error

Question

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.

Remove the "." from your import statement, and add the extension. Try import {person} from "/customer.js"; You're relying on the browser, not a Javascript bundler. — TJBlackman
– TJBlackman, Commented Sep 16, 2021 at 17:34
Please share your directory structure and what server you are using. — Jacob
– Jacob, Commented Sep 16, 2021 at 17:34
@TJBlackman I just changed in that way and this new error pops up Uncaught SyntaxError: The requested module '/customer.js' does not provide an export named 'person' — Os Snehith Ab
– Os Snehith Ab, Commented Sep 16, 2021 at 17:37
Look at the difference in export and export default. Remove the curly braces if you want to keep using export default. import person from "/customer.js — TJBlackman
– TJBlackman, Commented Sep 16, 2021 at 17:39

Code Fingers · Accepted Answer · 2021-09-16 17:46:12Z

1

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:

Correct your import statement
Check if package.json is correct
Copy relative path using VSCode

Hope this helps to solve your query!

answered Sep 16, 2021 at 17:46

Code Fingers

3016 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexandra · Accepted Answer · 2023-02-25 13:36:36Z

-1

if you got a:

1) index.html:1 Access to script at 'file://$PATH'  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.

2) GET file://$PATH net::ERR_FAILED

You need to use local-web-server, for example Live Server in VS Code.

edited Feb 25, 2023 at 13:36

answered Feb 25, 2023 at 10:37

Alexandra

11 bronze badge

Collectives™ on Stack Overflow

importing one java script file to another file error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related