CODEWITHSUNDEEP
javascripthtmlimportjavascript-import
Ahmed Mustafa
Ahmed Mustafa

Reputation: 139

Importing Objects from different files in JavaScript Project

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.

Upvotes: 0

Views: 169

Answers (4)

Ahmed Mustafa
Ahmed Mustafa

Reputation: 139

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

Upvotes: 1

Yavor
Yavor

Reputation: 39

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

Upvotes: 1

rustyBucketBay
rustyBucketBay

Reputation: 4551

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

Upvotes: 1

TechX
TechX

Reputation: 77

You need to export the function from test.js and import it in app.js

Upvotes: 0

Related Questions