Unexpected identifier in using Export & Import in Javascript Modules

Hi @Jose Daniel Navarro Brito ,

The "Unexpected identifier" error you’re seeing is likely due to incorrect usage of JavaScript modules in your project. Let’s break down the issues and provide a clear solution to get your code working.

Issues in Your Code

1. Incorrect Import Syntax in child_file.js: Your child_file.js attempts to import the ShowAlert function inside $(document).ready, but import statements must be at the top level of a module, not inside a function. Additionally, since ShowAlert is a named export, you need curly braces ({}) in the import statement. The invalid syntax (import ShowAlert from './js/mother_file.js') causes the "Unexpected identifier" error.
2. Module Loading and Execution: Declaring both mother_file.js and child_file.js as modules (type="module") is correct, but child_file.js must explicitly import ShowAlert from mother_file.js to use it. Including both scripts in the .cshtml file doesn’t automatically connect them—explicit imports are required.
3. File Paths and Server Configuration: The file paths in your <script> tags and import statements must match the project’s file structure. Additionally, the server must serve JavaScript files with the Content-Type: text/javascript header to avoid MIME type errors.

Solution

Here’s how to resolve the issue:

1. Keep mother_file.js Unchanged

Your mother_file.js correctly exports the ShowAlert function, so no changes are needed:

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

2. Fix child_file.js

Move the import statement to the top of child_file.js and use the correct syntax for a named export. Then, call ShowAlert inside the $(document).ready callback:

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

• The import { ShowAlert } from './mother_file.js'; statement must be at the top level, importing the ShowAlert function.
• The ./ path assumes mother_file.js is in the same directory as child_file.js (e.g., ~/js/). If child_file.js is in a subdirectory, use ../mother_file.js instead.
• The ShowAlert call inside $(document).ready ensures the DOM is loaded before execution.

3. Update the .cshtml File

Ensure your .cshtml file correctly references both scripts as modules and includes jQuery before child_file.js. Here’s an example:

<base href="~/" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="module" src="~/js/mother_file.js"></script>
<script type="module" src="~/js/child_file.js"></script>

• The <base href="~/"> tag ensures ASP.NET resolves paths correctly.
• Use the latest jQuery version (e.g., 3.7.1 or newer) from https://code.jquery.com.
• Both scripts use type="module" to enable ES module functionality.

4. Verify Server Configuration

Ensure your ASP.NET server serves JavaScript files with the Content-Type: text/javascript header. To check this:

• Open your browser’s Developer Tools (F12), go to the Network tab, and click on mother_file.js or child_file.js.
• In the Headers tab, verify that Content-Type is text/javascript. If not, update your server configuration (ASP.NET typically handles this automatically).

5. Debugging Tips

• Verify File Paths: In Developer Tools (F12), check the Network tab to ensure mother_file.js and child_file.js load without 404 errors.
• Check Console Errors: Look for additional errors in the console that might indicate import or execution issues.
• Test Without jQuery: To isolate issues, try using native JavaScript instead of jQuery:

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

Final Notes

• Double-check that the file paths in <script> tags and the import statement match your project’s file structure (e.g., both files in ~/js/).
• If using a bundler (e.g., Webpack), ensure it’s configured for ES modules.
• If the issue persists, share any additional console errors or your exact file structure (e.g., where mother_file.js and child_file.js are located relative to each other).

This setup should resolve the "Unexpected identifier" error and allow child_file.js to call ShowAlert from mother_file.js. Let me know if you need further help!

Hope this helps! If you agree with my suggestion, feel free to interact with the system accordingly!

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.

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"));