Import functions from another js file. Javascript

Question 1

I have a question about including a file in javascript. I have a very simple example:

--> index.html
--> models
 --> course.js
 --> student.js

course.js:

function Course() {
 this.id = '';
 this.name = '';
}

A student has a course property. like this:

import './course';
function Student() {
 this.firstName = '';
 this.lastName = '';
 this.course = new Course();
}

and the index.html is like:

<html>
 <head>
 <script src="./models/student.js" type="text/javascript"></script>
 </head>
 <body>
 <div id="myDiv">
 </div>
 <script>
 window.onload= function() {
 var x = new Student();
 x.course.id = 1;
 document.getElementById('myDiv').innerHTML = x.course.id;
 }
 </script>
 </body>
</html>

But I am getting an error on the line "var x = new Student();":

Student is not defined

When I remove the import from Student, I don't receive the error anymore. I have tried to use (require, import, include, create a custom function, export) and none has worked for me.

Anybody knows why? and how to fix that?

P.S. the path is correct, it comes from the autocomplete in VS Code

Question 2

May I link to the docs for now: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Question 3

I don't think he has an issue with imports, he has an issue with the environment he's trying to run it in. Browsers don't handle import by default.

Question 4

Did you watch it in browser's F12 dev tools window?

Question 5

Browsers doesn't support them yet. May be in future. Check this link for more info oreilly.com/learning/…

Question 6

himm, I will investigate it.

Question 7

The following works for me in Firefox and Chrome. In Firefox it even works from file:///

models/course.js

export function Course() {
 this.id = '';
 this.name = '';
};

models/student.js

import { Course } from './course.js';
export function Student() {
 this.firstName = '';
 this.lastName = '';
 this.course = new Course();
};

index.html

<div id="myDiv">
</div>
<script type="module">
 import { Student } from './models/student.js';
 window.onload = function () {
 var x = new Student();
 x.course.id = 1;
 document.getElementById('myDiv').innerHTML = x.course.id;
 }
</script>

Question 8

did not work unfortunately, throughs: Access to Script at 'file:///........./models/student.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

Question 9

@SamySammour That's what I get in Chrome, it does work in Firefox though. Doesn't matter; in production you'll be serving the files anyway (which makes that error disappear). This is how to implement the current state of module support for browsers, so it's the answer to your question, whether it works for you or not ;)

Question 10

It did not work on Firefox as well. It throughs an exception "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol." and no output on the screen

Question 11

If you see a 1, it worked. The exception is unrelated and caused by your not having <meta charset="utf-8"> in your <head>.

Question 12

I have mentioned that there was no Output, the screen was empty. Why javascript has to be so complicated

Question 13

You can try as follows:

//------ js/functions.js ------
export function square(x) {
 return x * x;
}
export function diag(x, y) {
 return sqrt(square(x) + square(y));
}
//------ js/main.js ------
import { square, diag } from './functions.js';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

You can also import completely:

//------ js/main.js ------
import * as lib from './functions.js';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Normally we use ./fileName.js for importing own js file/module and fileName.js is used for importing package/library module

When you will include the main.js file to your webpage you must set the type="module" attribute as follows:

<script type="module" src="js/main.js"></script>

For more details please check ES6 modules

Question 14

Adding type="module" is important in case of Qunit's html.

Question 15

By default, scripts can't handle imports like that directly. You're probably getting another error about not being able to get Course or not doing the import.

If you add type="module" to your <script> tag, and change the import to ./course.js (because browsers won't auto-append the .js portion), then the browser will pull down course for you and it'll probably work.

import './course.js';
function Student() {
 this.firstName = '';
 this.lastName = '';
 this.course = new Course();
}

<html>
 <head>
 <script src="./models/student.js" type="module"></script>
 </head>
 <body>
 <div id="myDiv">
 </div>
 <script>
 window.onload= function() {
 var x = new Student();
 x.course.id = 1;
 document.getElementById('myDiv').innerHTML = x.course.id;
 }
 </script>
 </body>
</html>

If you're serving files over file://, it likely won't work. Some IDEs have a way to run a quick sever.

You can also write a quick express server to serve your files (install Node if you don't have it):

//package.json
{
 "scripts": { "start": "node server" },
 "dependencies": { "express": "latest" }
}
// server/index.js
const express = require('express');
const app = express();
app.use('/', express.static('PATH_TO_YOUR_FILES_HERE');
app.listen(8000);

With those two files, run npm install, then npm start and you'll have a server running over http://localhost:8000 which should point to your files.

Question 16

Unfortunately, it did not work and now it throws an extra exception. " Invalid response. Origin 'null' is therefore not allowed access."

Question 17

If you're seeing that, that's a cross-origin exception. Are you running it from the file:// protocol or http://? If you're running it from file://, you're going to have a tough time.

Question 18

file:// . What to do then? how to fix that?

Question 19

The best way is to use some sort of server to serve them over localhost. Some IDEs have them built-in. You can also write a quick express server in just a few lines. I'll give you an example in my answer.

Question 20

I cannot use any server.

Question 21

//In module.js add below code
export function multiply() {
 return 2 * 3;
}

// Consume the module in calc.js

import { multiply } from './modules.js';
const result = multiply();
console.log(`Result: ${result}`);

// Module.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Module</title>
</head>
<body>
 <script type="module" src="./calc.js"></script>
</body>
</html>

Its a design pattern same code can be found below, please use a live server to test it else you will get CORS error

https://github.com/rohan12patil/JSDesignPatterns/tree/master/Structural%20Patterns/module

user5734311 · Accepted Answer · 2018-01-11 17:14:33Z

82

The following works for me in Firefox and Chrome. In Firefox it even works from file:///

models/course.js

export function Course() {
 this.id = '';
 this.name = '';
};

models/student.js

import { Course } from './course.js';
export function Student() {
 this.firstName = '';
 this.lastName = '';
 this.course = new Course();
};

index.html

<div id="myDiv">
</div>
<script type="module">
 import { Student } from './models/student.js';
 window.onload = function () {
 var x = new Student();
 x.course.id = 1;
 document.getElementById('myDiv').innerHTML = x.course.id;
 }
</script>

Share

Improve this answer

edited Jan 11, 2018 at 17:47

answered Jan 11, 2018 at 17:14

user5734311

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

13 Comments

Samy Sammour

Samy Sammour Over a year ago

did not work unfortunately, throughs: Access to Script at 'file:///........./models/student.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

2018年01月12日T09:38:51.86Z+00:00

user5734311

user5734311 Over a year ago

@SamySammour That's what I get in Chrome, it does work in Firefox though. Doesn't matter; in production you'll be serving the files anyway (which makes that error disappear). This is how to implement the current state of module support for browsers, so it's the answer to your question, whether it works for you or not ;)

2018年01月12日T10:28:30.143Z+00:00

Samy Sammour

Samy Sammour Over a year ago

It did not work on Firefox as well. It throughs an exception "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol." and no output on the screen

2018年01月12日T10:36:04.513Z+00:00

user5734311

user5734311 Over a year ago

If you see a 1, it worked. The exception is unrelated and caused by your not having <meta charset="utf-8"> in your <head>.

2018年01月12日T10:43:46.053Z+00:00

Samy Sammour

Samy Sammour Over a year ago

I have mentioned that there was no Output, the screen was empty. Why javascript has to be so complicated

2018年01月12日T10:48:36.727Z+00:00

|

CollectivesTM on Stack Overflow

Import functions from another js file. Javascript

4 Answers 4

13 Comments

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

4 Answers 4

13 Comments

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related