Develop Reference

How do I import and export files in javascript?

I created a separate file for a function and exported it to my main file to use by "import Header from "./Header.js";" but it is throwing error that "require is not defined" and "Module name "Header" has not been loaded yet for context".importingexportinghtml docconsole error
I expected the html code to run smoothly and display my web page but its all blank at the moment.

I think you should use
const Header = "./Header.js";
instead of import Header from "./Header.js"

.NET 5 CORE MVC: Trying to import a module from a JavaScript file, always results in a console error. The file is never found under the wwwroot folder

I'm trying to implement the Bootstrap 5 version of the Table Editor plugin of MDBootstrap, but the error that I get, has nothing to do with them, at least, not directly. This is my first time working with modules so bear with me. What I'm trying to achieve, is simple. This is the header of my importer js file:
import FocusTrap from './mdb/util/focusTrap';
import PerfectScrollbar from './mdb/perfect-scrollbar';
import { getjQuery, typeCheckConfig, onDOMContentLoaded } from './mdb/util/index';
import Data from './mdb/dom/data';
import EventHandler from './mdb/dom/event-handler';
import Manipulator from './mdb/dom/manipulator';
import SelectorEngine from './mdb/dom/selector-engine';
import tableTemplate from './table/html/table'; //eslint-disable-line
import { getModalContent, getModal } from './table/html/modal';
import {
search,
sort,
paginate,
getCSSValue,
formatRows,
formatColumns,
getRowIndex,
} from './table/util';
Great. Well, this code produces the browser error:
So of course, my JS plugin doesn't work because the browser doesn't find the imports. I suspects is because I'm not using the ~ at the start of the path to indicate that they resides under the wwwroot folder. However writing the ~ in front of the path, causes yet another error by the browser, saying, that's incorrect syntax.
So I'm stuck!!!
In case you are wondering, this is how my wwwroot looks right now:
And the Table Editor js file, which is the one that does the import, is right there alongside those folders:
What should I do in this situation?
Help :(

How to get rid of React Select Import Error?

I'm trying to use the select input tool for ReactJS (https://react-select.com/home#getting-started) so I can have a filter/search bar on my website. I copied and pasted the code from the link above into a new file in my src folder. At this point I had no errors, but when I import this filter file into my App.js file and run it, I get the following error:
Module not found: You attempted to import ../data which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Here are the imports for the filter file:
import React, { Component, Fragment } from 'react';
import Select from 'react-select';
import { colourOptions } from '../data';
import { Note } from '../styled-components';
The rest of the code is in the link above (I used the Single search, the first one that comes up). I've looked up several things and can't seem to figure out how to get rid of this error!
[EDIT] I don't even know where this data file is in my project or my computer. I've searched for it and I have a million data files, so I'm unsure of what to bring into my src folder. I'm also having the same problem with the styled-components import. When I search for that on my computer, nothing comes up.

import { colourOptions } from '../data';
The above import seems to be incorrect. You might have want to import the from the data.js which is in the same directory as of your App.js.
import { colourOptions } from './data';
This can help you solve the error. Also make sure the data.js file is in the same directory as of App.js.

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 a plugin using ES6? (Getting ReferenceError: Plugin is not defined)

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();