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)
Related
I have a Pinata IPFS js file with a "PinFileToIPFS" function inside; I'm wanting to call this function from another js file. The problem is that the Pinata js file uses "require()" to import its libraries, but my other "front-end" js file doesn't support node.js functions, and thus throws an error when loaded in the browser.
I need a way to import the PinFileToIPFS function into my other js file so it can be called upon completion of a certain front-end event. As stated before, I can't use require() to bring in the function, and if I try to use "import nameOfFunction from module;" to import the function I get the error:
Uncaught SyntaxError: Cannot use import statement outside a module.
I've seen similar questions asked, but none pertaining to my specific problem. I'm also new to programming, so any and all feedback is appreciated.
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";
I am completely new to working with JavaScript libraries, but I can't seem to figure out what I am doing wrong here. I am building a browser extension using JavaScript, and I need to be able to parse through a .csv file that I am using as a database. I am trying to work with PapaParse, a JS library for parsing through CSV files, although I can't figure out how to get it into a .js file (my content script, in this case). I'm working in NetBeans. I've added the PapaParse folder to the extension's folder, and I'm trying this to get it into my js file:
var pp = document.createElement("script");
pp.src = "PapaParse/papaparse.js";
pp.onload = function(e){
console.log("papa parse works here!");
};
and then I am calling it using:
Papa.parse("data.csv", {
header: true,
complete: function(results) {
console.log("Finished:", results.data);
}
});
But I am getting an error here saying "Uncaught Reference Error: Papa is not defined". I know there is something wrong with how I am importing the library, but I can't figure out what it is. I'm sure it's something simple that I am missing, so any guidance would be greatly appreciated!
Try to import it with the import keyword
import Papa from './PapaParse/papaparse';
If there are multiple methods you can import the entire library
import * as myModule from './PapaParse/papaparse';
And from this the calling should work if it's in the same file as the import.
I have a Vue.js project that is using Typescript and it is working well but I have an old piece of javascript with a lot of logic in it that I need to use and I would like to import it but I seem to have tried every combination of Import syntax to the .vue file and am unable to load the javascript.
I've tried
import * as revpubeditor from '../modules/revpubeditor'
import revpubeditor from '../modules/revpubeditor'
import { revpubeditor } from '../modules/revpubeditor'
and have also altered the .js file and added a .d.ts file so that it will compile and not give any errors but at runtime in the browser the revpubeditor that I have imported is not found by webpack.
How should this be setup and consumed? I am not worried about it being strongly typed I just want the webpack loader to find the module.
I am trying to figure out how to import JavaScript files ONLY to a specific component.
I put the following code directly into my component:
import "../../vendor/datatables/js/jquery.dataTables.min.js";
import "../../vendor/datatables-plugins/dataTables.bootstrap.min.js";
import "../../vendor/datatables-responsive/dataTables.responsive.js";
But it fires an error saying:
Module not found: Error: Can't resolve 'jquery' in...
Which makes me suspect that the files that depend on jQuery cannot find the jQuery library in this scope.
jQuery itself is put in the angular-cli.json file:
"scripts": [
"./vendor/jquery/jquery.min.js"
],
An alternative is to put all of those 3 external JS files into the angular-cli.json file as well, and it will work, showing the expected result from the user perspective.
But I would like to figure out how to avoid setting the JS globally for those that are used only in a few specific components.
Thanks, please advise.
For example, to import jQuery to your component, you should write:
import * as $ from 'jquery';
Which means "Import all and use as "$" from "jQuery"".
If you downloaded the library by yourself, without npm install, you can try the following (but I'm not sure that it will work):
import * as $ from 'path/to/jquery';