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');
}

Quentin · Accepted Answer · 2019-01-30 08:33:23Z

1

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 }

answered Jan 30, 2019 at 8:33

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Piotr Mirosz · Accepted Answer · 2019-01-30 09:12:26Z

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, 2019 at 9:12

answered Jan 30, 2019 at 8:02

Piotr Mirosz

86610 silver badges20 bronze badges

4 Comments

Piotr Mirosz Over a year ago

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 Over a year ago

ouch... your js files are in 1 folder?

Saurabh Over a year ago

yes , they are in same folder and check update 1 , but still it give error

Saurabh Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Importing an external js file into another external js file

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related