Unexpected identifier in using Export & Import in Javascript Modules

Question

Unexpected identifier in using Export & Import in Javascript Modules

Jose Daniel Navarro Brito 61

Hi there:

It seems a trivial issue but I'm stuck and don't know why:

I'm using Import/Export in two my JavaScript files. For simplicity sake ...the "mother"js.file has a function

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

There isa razor view ( cshtml file) that refers to the "mother" js file above as follows:

<script type="module" src="~/js/mother_file.js"></script>

Now...this cshtml file which is a view in my project, refers also to an external script that for simplicity sake I name child.js file. Up to this point, my script section of my cshtml file reads

<script type="module" src="~/js/mother_file.js"></script>
<script type="module" src="~/js/child_file.js"></script>

My understanding is that when I render the view ( open the cstml file) the mother and child js files talk to each other ...am I correct?

So in the child_file.js I refer to the ShowAlert function that is in the mother_file as follows:

$(document).ready(
     function () {
        import ShowAlert from './js/mother_file.js
})

When I run the project, the browser complains that the function isn't there with an Unexpected identifier error.

What I'm doing wrong?

Thanks

2 answers

Your answer

Answer 1

SurferOnWww 4,391

Please confirm if the Content-Type included in the response header is text/javascript.

For details please read the MDN Document JavaScript modules.

To get modules to work correctly in a browser, you need to make sure that your server is serving them with a Content-Type header that contains a JavaScript MIME type such as text/javascript. If you don't, you'll get a strict MIME type checking error along the lines of "The server responded with a non-JavaScript MIME type" and the browser won't run your JavaScript.

Jose Daniel Navarro Brito 61

Hi SurferOnWww:

I'm getting text/plain; charset=utf-8 in the response header. My application is fed by a web api

builder.Services.AddHttpClient("HousingWebAPI", config =>
{
    config.BaseAddress = new Uri("https://localhost:7120/");
    config.Timeout = new TimeSpan(0, 0, 30);
    config.DefaultRequestHeaders.Clear();
    config.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", HttpContext.Session.GetString("JWToken"));
    config.DefaultRequestHeaders.Add("Authorization", "Bearer " + "JWToken");
}).AddHttpMessageHandler<LoginHandler>();

I guess that I have to configure the Request Headers to accommodate text/javascript ?

Furthermore, if I run the script inside the cstml file then everything works fine

<script type="module" src="/ES Modules/B.js"></script>
    <script type="module">
             import ShowAlert from './js/mother_file.js
    </script>

As per my earlier comment, the issue is only when I want to import the function from another javascript file .

Thanks very much for your assistance

SurferOnWww 4,391 Reputation points

2025-04-30T07:47:28.9066667+00:00

I'm getting text/plain; charset=utf-8 in the response header.

Please check the Console tab on the developer tool of your browser to see if it shows the error like blow:

I guess that I have to configure the Request Headers to accommodate text/javascript ?

Yes, if you see the error as shown above.
Jose Daniel Navarro Brito 61 Reputation points

2025-04-30T14:13:08.3533333+00:00

Hi Surfer:

No, the console never has flagged that error being this the reason why I haven't actioned on that.
SurferOnWww 4,391 Reputation points

2025-05-01T00:39:40.3133333+00:00

No, the console never has flagged that error being this the reason why I haven't actioned on that.

If so, I guess that "I'm getting text/plain; charset=utf-8 in the response header." is a sort of oversight. How did you confirm the Content-Type header?

If you could confirm that the server returned proper Content-Type header and javascript file has been loaded by the browser, I suggest that you proceed with Bruce's answer.

Answer 2

modules are external code. to use the code in a module it must be imported. in your sample both mother and child are modules. to execute any code in them you need script running in the browser to import from the module(s), and call the code.

you child.js probably should not be a module and it uses import incorrectly. it should be:

<base href="~/">
<script type="module" src="./js/mother_file.js"></script>
<script src="./js/child_file.js"></script>

child.js

import { ShowAlert} from "./js/mother_file.js";
document.addEventListener("DOMContentLoaded", event => ShowAlert("Page Loaded"));

or with jQuery (be sure its loaded before the script call)

import { ShowAlert} from "./js/mother_file.js";
$(() => ShowAlert("Page Loaded"));

Share via

Unexpected identifier in using Export & Import in Javascript Modules

2 answers

Your answer