How to import a js file module in ASP.NET CORE MVC?

Question

I just created a js module file on wwwroot/js/base.js:

export const elements = {
...somthing
};

When I try to import it from wwwroot/js/site.js, such as

import {elements} from './base';

I geth this error:

Uncaught SyntaxError: Cannot use import statement outside a module

What am I missing?

Answer 1

If you want to import a js file module,you need to add like this(You must use type="module" in script tag):

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

site.js is imported in Views/Shared/_Layout.cshtml by default.You can check Views/Shared/_Layout.cshtml and change

<script src="~/js/site.js" asp-append-version="true"></script>

to

<script type="module" src="~/js/site.js" asp-append-version="true"></script>