Having trouble importing map from jquery

Question

I am using a function to split words into syllables in Javascript within my ASP .NET MVC project, and am trying to implement the map function within my js file. When I type out the function, it recognizes it as a real function, and does an auto import from jquery that looks like this:

import { map } from "jquery";

When I run that, I get the error "Uncaught SyntaxError: Cannot use import statement outside a module". So I spent a while researching that, and read a post where it said you had to add type="module" to your script import within the view. So I ended up with this:

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

After I tried to run it with the type identified, I get the error: "Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../"."

When I researched that for a while, I found an article that said you had to import them like this:

import $ from './libs/jquery/dist/jquery.js' or

import $ from '/js/libs/jquery/dist/jquery.js'

and I get the error: "GET https://localhost:44352/js/libs/jquery/dist/jquery.js net::ERR_ABORTED 404"

Now I am kind of lost. I feel like it should not be this difficult to use a simple function like map(), but here I am. Can anyone give any advice or a path that I should follow to figure this out? Thanks!

Answer 1

The articles/documentation that tells you to import from a relative or absolute url are assuming you actually have your own copy of the library at that relative or absolute url. You can then solve your problem by including your own copy of jquery in your project. If you don't want to deal with managing the jquery dependency locally, you can always import the library from a cdn link:

import { map } from "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js";