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!
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";
Related
Everytime I try to import a module I get this error Failed to resolve module specifier "mongodb". Relative references must start with either "/", "./", or "../". and I cant seem to find the answer anywhere. Im just trying to import mongodb import { mongoClient } from "mongodb";. Is there any solution to this?
I tried doing what the error says or tried using require keyword but nothing works. I cant use any module
Not sure if this will help, I was having the same exact problem and I was just trying to run this all from JS files getting loaded into a static html page. Needed to setup an Express.JS server run with NodeJS and managed by PM2 that creates the connection and makes all the calls when certain endpoints are reached.
I am creating a simple node.js app that uses chart.js for some visualisations but when trying to import and use Chart I am getting errors.
I used npm to install chart.js and served it to the client with:
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/chart.js/dist')))
I am using pug as a rendering engine and have imported the scripts:
script(type="module" src="./scripts/chart.js")
script(src="/scripts/index.js")
Then in the index.js file when I try and import the chart module using:
import { Chart } from './chart.js/auto';
I get an error:
SyntaxError: Unexpected token '{'. import call expects exactly one argument.
Removing the curly braces doesn't work either.
I can see the chart.js scripts are included in the sources of the page but it will not load into the script I have tried omitting the import as I saw that inline scripts do not need this however that produces another error saying that it cannot find the variable Chart
Unsure what I am doing wrong, whether it be with serving the files or with the client-side import.
Solved
I used a different link in the script tag. Instead of /chart.js I used /chart.umd.js.
script(src="/scripts/chart.umd.js")
Then I was not required to use any-side import statement in the client side index.js file
Please pardon my lack of knowledge on js bundling but I would like to import this javascript file into my Vue.js project and use its function and I just can't see to get it to work.
https://github.com/omnisci/Charting-Sample/blob/master/main.js
Maybe this is just something fundamental about how the file was bundled but I am trying to import it like this
import * as omni from "../main";
and then trying to use a function from the file like this
omni.crossfilter.crossfilter(con, tableName)
But I am getting this error
Uncaught TypeError: _omni__WEBPACK_IMPORTED_MODULE_1__.crossfilter is not a function
When I just include the file in regular html file using a src and script tag it works just fine calling the function. If anyone could give me some guidance on what I am doing wrong here, or how to import this properly I would really appreciate it.
Just write:
import '../main'
and call functions after import:
/ ...
crossfilter(con, tableName)
Trying to wrap my head around Webpack. I was able to set it up and get it working (combines my scripts and styles just fine), but I'm having trouble with a lazy loading plugin called bLazy, which I installed via npm. Here's the code in the file that I've defined as the entry point:
// Stylesheets
import './style.scss';
// Scripts
import 'salvattore';
import 'blazy';
var bLazy = new Blazy(); // This is the documented way to initialize bLazy.
I am getting the error: Uncaught ReferenceError: Blazy is not defined. The Salvattore plugin, which is self-initializing, works fine. I'm also using jQuery, but bLazy is written in Javascript, so there shouldn't be any conflicting issues.
What am I doing wrong?
+++ UPDATE +++
I've changed the way I posed my question because apparently it's about ES6 and not Webpack, like I thought it was.
Like this
import Blazy from 'blazy'
In the script you want to import you should "export" a value, like this:
class Blazy {...}
export default Blazy;
Then in script where you want to use it, you need to "import" this value:
import Blazy from './blazy'; // Note the path in quotes is relative to your current script file
let blazy = new Blazy();
I'm very sorry for asking such a beginner question, but I just learned the basics of JS without and do not completely understand the new ES6-features.
I just want to use rangy within my project and initialize the rangy object within <script></script>-Tags in my html-file (Blade-template) with the following method
rangy.init();
The rangy-library consists of six files, all of whom I included into my footer.
Chrome console tells me that rangy is undefined. What do I need to do?
I tried thousands of syntactical variants of import but the console tells me unexpected token import
I tried compiling the files down to one file with Laravel mix (mix.babel, mix.js, mix.scripts), nothing worked.
I'm pretty sure I just need to grasp the concept of how to work with ES6-Modules but not tutorial really helped. Maybe one of you can help me to figure out how to use rangy in this particular case?
Thanks in advance!
You should use the import syntax to import modules with JavaScript as this is the supported syntax which will eventually work in browsers. However, because browsers are not yet supporting this feature it means you need to enable webpack to use babel-loader.
Once that configuration is setup and working you can simply import your module like this...
import rangy from 'rangy'
Of course you also need rangy to be available either locally in your node_modules folder or installed globally so webpack and babel will know where to find it.
Thanks for your answers. I tried a few things and didn't really succeed...
So I did the following: In my webpack.mix.js (Laravel Mix) I have the files that I need:
mix.babel([
'node_modules/rangy/lib/rangy-core.js',
'node_modules/rangy/lib/rangy-classapplier.js',
], 'public/js/rangy.js');
I embed the compiled rangy.js in my footer element
<script type="text/javascript" src="{{ URL::asset('js/rangy.js')}}"></script>
Below I import and initialize rangy
<script>
import rangy from 'rangy';
rangy.init();
</script>
And chrome console gives me Uncaught SyntaxError: Unexpected token import.
Was that the wrong approach?