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.
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()
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
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()