Importing an external js file into another external js file

Question

In my ASP.Net Core MVC Application I have separate .js files for few pages, They contain normal validation and client side logic.

I have to put few method in a common util.js file and this file methods will be shared among another js files.

but I am not able to add the reference of this util.js into other external js files.

I have tried few approaches as

For example My util.js

export function ShowAlert(val) {
alert(val);
}

And than in another js file (MyApp.js) with import statement

import { ShowAlert } from './util'

function Info() {
    var F = document.getElementsByName('txtFName')[0].value
    var L = document.getElementsByName('txtLName')[0].value
    if (F.length > 0 && L.length > 0)
        ShowAlert(F + ' ' + L)
    else
        ShowAlert('Fields Required');
}

But it give error in import statement line

Unexpected token {

Than I tried babel tool to get browser compatible js, which is

//import { ShowAlert } from './util'
var _util = require('./util');

function Info() {
    var F = document.getElementsByName('txtFName')[0].value
    var L = document.getElementsByName('txtLName')[0].value
    if (F.length > 0 && L.length > 0)
        _util.ShowAlert(F + ' ' + L)
    else
        _util.ShowAlert('Fields Required');
}

Now it says require is not defined , so after searching few post on internet I found a solution and included require.js before MyApp.js

<script src="./require.js" type="text/javascript"></script>
<script src="./MyApp.js" type="text/javascript"></script>

But still the error is

Module name "util" has not been loaded yet for context: _. Use require([])

How can I have reference of one js file into another and why import is giving error here?

Update 1

Util.js

export default function ShowAlert(val) {
alert(val);}

MyApp.js

import { ShowAlert } from './util';
//var _util = require('./util');
function Info() {
    var F = document.getElementsByName('txtFName')[0].value
    var L = document.getElementsByName('txtLName')[0].value
    if (F.length > 0 && L.length > 0)
        ShowAlert(F + ' ' + L)
    else
        ShowAlert('Fields Required');
}

score 1 · Answer 1 · answered Jan 30 '19 at 08:33

To use JavaScript modules on the client-side you need:

A browser which supports them
To declare that you are using them with type="module"

For example:

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<h1>Test</h1>
<script type="module" src="main.js"></script>

main.js

import {sum} from './module.js';

const value = sum(1,2);
const node = document.createTextNode(value);
document.body.appendChild(node);

module.js

function sum(a,b) {
    return a + b;
}

export { sum }

Piotr Mirosz · Accepted Answer · 2019-01-30T09:12:26.640

0

add type="module" to your app.ja ( main script)

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

seperate function and export do it like that (more readable):

function ShowAlert(val) { alert(val); } export { ShowAlert }

If you would lieke to export more functions do it liek that:

 export { ShowAlert ,  ShowAlert1 , ShowAlert2 , ShowAlert2}

Run your script on HTTP serwer

edited Jan 30 '19 at 09:12

answered Jan 30 '19 at 08:02

Piotr Mirosz

846
9
20

if you need to do it in 1 line add default just after export but you will have to change import state also. if you will separate export file, import wont change and it should work if not. let me know – Piotr Mirosz Jan 30 '19 at 08:14
ouch... your js files are in 1 folder? – Piotr Mirosz Jan 30 '19 at 08:16
yes , they are in same folder and check update 1 , but still it give error – Saurabh Jan 30 '19 at 08:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187548/discussion-between-saurabh-and-piotr-mirosz). – Saurabh Jan 30 '19 at 08:19

Importing an external js file into another external js file

2 Answers2

Linked