Importing Objects from different files in JavaScript Project
Question
I am complete beginner in JavaScript and web-dev. Most of my programming experience comes from Python and so I am very comfortable with the way python files can be arranged in different folders as modules and can play sort of a plug and play role. So far I am unable to discover that flexibility in JS.
Here is my current project structure:
-root
|-index.html
|-app.js
|-modules
|-test.js
Here is my index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
My app.js :
let hello = Hello()
Finally my modules/test.js :
class Hello(){
constructor(){
console.log('Hello World');
}
}
When I run it I get the error message: Uncaught ReferenceError: Hello is not defined at app.js:1:1
What do I do to achieve my desired results? Regards.
4 answers
solution1
1 2022-05-21 15:23:24
Have you tried:
modules/test.js:
export class Hello(){
constructor(){
console.log('Hello World');
}
}
app.js:
import { Hello } from './modules'
let hello = new Hello()
Or, if you use the expor default, do not need the curly braces, as you do not need to secify what you are exporting. Like so:
modules/test.js:
export default class Hello(){
constructor(){
console.log('Hello World');
}
}
app.js:
import Hello from './modules'
let hello = new Hello()
solution2
1 2022-05-21 15:57:25
First of all, in your index.html, when you are working with modules, you should add the type of the script
<script type="module"></script>
In the modules, after you do some code and logic, you export your class with the export declaration at the end, like so:
export default Hello;
in your app.js, when you want to use some module, you import it like so:
import Hello from "./modules/test.js";
And then you would be able to use the imported data. You can use as many imports as you want. Here is a working example with the minor tweaks on your code: CodeSanbox demo
solution3
1 2022-05-21 20:29:54
So both the answers provided by rustyBucketBay and Yavor are correct but incomplete. The working solution is doing what each of the two suggested but together. Here is what eventually works:
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project</title>
</head>
<body>
<script type="module" src="app.js"></script>
</body>
</html>
modules/test.js :
export default class Hello{
constructor(){
console.log('Hello World');
}
}
app.js :
import Hello from 'modules/test.js'
let hello = new Hello()
solution4
0 2022-05-21 15:21:14
You need to export the function from test.js and import it in app.js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.