How to import functions from "back-end" js file to "front-end" js file - javascript

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.

Related

How to tune babel loader to properly import a module named macro.js when using CRA

I'm using a library vtk.js. VTK has a special design of classes (https://kitware.github.io/vtk-js/docs/develop_class.html). When I write a class I need to import macro.js module which exposes several base methods such as getters/setters/newInstance etc (https://github.com/Kitware/vtk-js/blob/master/Sources/macro.js).
Looks like CRA uses some special loader for macro.js files. I get an error when trying to import such a file (SyntaxError: Cannot use import statement outside a module). If I copy an original file macro.js from #kitware/vtk.js to my local source folder I still get an error. Even if I remove all the contents of macro.js file I get an error (The macro imported from "../macro" must be wrapped in "createMacro" which you can get from "babel-plugin-macros". Please refer to the documentation to see how to do this properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#writing-a-macro). However, when I rename macro.js to macro2.js the error is gone.
Is there some way how can I disable this macro loader?

Cross browser extension background script import error

I get: Uncaught SyntaxError: Cannot use import statement outside a module
Whenever I try to use import x from y statements in the background script of my Cross browser extension TabMerger.
The reason I need to import is to separate functions & helpers from invocations as I want to test the background script.
My current file structure (differs from GitHub) is:
public/
background/
background_functions.js
background_helpers.js
background.js <--- error happens here when I import from ./background_functions.js & ../../src/components/App/App_functions.js
src/
components/
App/
App_functions.js
I've tried everything I could think of, such as using require instead of import but that causes an undefined error on require. I want to avoid adding libraries like require.js since they are pretty heavy compared to my extension. I also tried using an HTML page to call background.js as a module (explained here) with no luck.

Import js file into Vue.js project

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)

How to import typescript module from interactive console in intellij

I come from vanilla JavaScript, and I just don't get this. Usually I work directly from the interactive console in chrome or firefox and I can access all my resources to try them out manually.
Right now I have an Angular project with Intellij and I want to try out code inside a module. To be specific I'm busy implementing a queue pattern. So I made a Queue class.
When I type in the name of my class inside the javascript console, Intellij finds it as a suggestion. When I use their suggestion it inserts the import statement like import {Queue} from "./Queue";.
But when I try this it spews SyntaxError: Cannot use import statement outside a module. Which I understand, but how can I import the module from the console? (I figure that there is a compiled .js file somewhere, which I can import, right!?).

What is the Purpose of Import Modules Without Export or Consumption within File

I have seen this following pattern within index.js file and I am left scratching my head. What would be the purpose of the following code below, considering:
The imported module is not being consumed within this module/file
There is no export of the imported module
The following code is all there is within the index.js file (yes, just one line):
import '../modules/index.js';
To elaborate, the index.js file is importing from '../modules/index.js'. That is it, there is no other code within the file whatsoever.
The only reason I'm aware of where one might want to do an import without utilizing anything imported is when the imported file has some form of side effect that happens simply by evaluating the code, such as defining a global variable. In this case, simply importing the code will cause that code to be run. If you can indicate more about the contents of modules/index.js we might be able to get to a more defined answer of what's happening in this case.

Categories

Resources