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();
Related
This is a non-jQuery version of IonRangeSlider (https://github.com/IonDen/ion.rangeSlider):
https://github.com/keisto/vanilla-rangeslider
I have used this before by trying to stick to pure JS and avoid adding another layer with JQ.
I installed this via yarn and it's in my node_modules folder.
I added this to my app/javascript/application.js file:
import IonRangeSlider from 'vanilla-rangeslider/js/rangeslider'
after also trying just:
import IonRangeSlider from 'vanilla-rangeslider'
In my compiled JS file in dev all it has is this:
// ../../node_modules/vanilla-rangeslider/js/rangeslider.js
var require_rangeslider = __commonJS({
"../../node_modules/vanilla-rangeslider/js/rangeslider.js"() {
}
});
and if I try and initialize a slider all I get is:
Uncaught ReferenceError: ionRangeSlider is not defined
Any ideas here as to what I am missing? I have added some other yarn based JS package with no issues.
The range slider has no exported functions, meaning you won't be able to import anything from it.
The only way to use its functions would be to add it in a script tag unfortunately.
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 writing an angular component and got a open source module working with npm install. Now I made some some changes and want to import the javascript file like so
import { ModuleName } from './../../ModuleFolder/ModuleName';
When I place the cursor above the ModuleName inside the bracket, I see the highlighted red error saying Module has not export member 'ModuleName';
In my ts code, I have referenced the Module like so
object: ModuleName; which is also complaining.
I google and the post says using npm install but I don't want to add this module to my node_module list. I am moving the folder out to make my customization.
I also tried the following but it is not working
import './../../ModuleName.bundle.min.js';
I am wondering does the name of the Module needs to be registered somewhere to be able to reference it in my component?
Thanks for any help.
Use 'declare' after the import statements
declare const _moduleName;
For example:
I am using Swiper.js library using cdn. In my angular component, I refer it using a declare keyword.
declare const Swiper;
var mySwiper = new Swiper('.swiper-container', { /* ... */ });
I got external libraries working in Angular by following the following links
https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af
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';
I'm trying to use an ES5 module in a new ReactJS application and I'm struggling to understand how to correctly import that module, such that the main function within it can be found and executed.
I'm loading the module;
import 'air-datepicker';
I know I'm doing something wrong here and that it's not as simple as this, for an old library that doesn't have proper exports!
Anyway, then I should be able to manually initialise a date picker using an existing div like this;
$('#myDiv').datepicker();
I've tried multiple variations of the import and require, but I'm always getting the same error - 'datepicker is not a function'.
The library I'm experimenting with is air-datepicker. I've installed the module using npm without problems and I know the library works perfectly without React on a simple page loading the script manually in a script tag. My ReactJS app is a basic template created using 'create-react-app', from the FB tutorial pages.
If you're using create-react-app, you should be able to import it like
import 'air-datepicker/dist/css/datepicker.min.css';
import 'air-datepicker';
If you added your jQuery using <script> tag in your HTML, you need to add this line before the air-datepicker imports
const $ = window.jQuery;
const jQuery = window.jQuery;
If you added jQuery using npm install, you'll have to add these following lines
import $ from 'jquery';
import jQuery from 'jquery';
window.$ = $;
window.jQuery = jQuery;
//... air-datepicker imports
Make sure to initialize it inside your componentDidMount or somewhere you're sure that the element has been mounted already.
componentDidMount() {
$('#my-element').datepicker();
}
render() {
return <div>
<input
id="my-element"
type='text'
className="datepicker-here"
data-position="right top" />
</div>
}
Well, that's a day of my life that I'm never getting back!
The problem was caused by Babel import ordering. Import statements are hoisted - meaning they are evaluated first, before any other code (i.e. my window. assignments) are executed. This is 'by design' in babel.
The only way to avoid Babel hoisting, from what I can tell, is to avoid 'import' altogether and use require instead.
So, in the following order the global $ will have been set when you come to require air-datepicker. If you try to 'import' air-datepicker it won't work because Babel will evaluate all of your import statements before executing the window. assignment.
import $ from 'jquery';
window.$ = $;
require('air-datepicker');
There are one or two other approaches that also would have worked, but they are all less desirable because they need you to manually configure webpack - i.e. 'ejecting' the create-react-app config and going it alone...
Use the imports-loader;
// only works if you disable no-webpack-loader-syntax
require("imports?$=jquery!air-datepicker");
or, use the ProvidePlugin, making the module available for all modules.
You have to give it an identifier:
import datepicker from 'air-datepicker';