I want to add (https://selectize.github.io/selectize.js/ to my Rails Webpack application.
I have done the following:
Run: npm install selectize --save from terminal.
Gone to my pack's index.js and imported it with: import 'selectize/dist/js/selectize';
And When I open the compiled application.js I can search for "selectize" - but when I try this in my javascript (or via console):
$('#list').selectize({
delimiter: ','
});
It tells me Uncaught TypeError: $(...).selectize is not a function.
I know that I had to add some stuff to config/webpack/environment.js to get jQuery working, do I have to do something to get this library working? If so, what have I missed?
use jquery as plugin in webpack to automatically.Here you will find the documentation.
you have to make some changes in webpack.config.js file.
plugins: [
new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery'})]
npm i jquery and you can import and try with this hope this help for u.
import jquery from "jquery";
new webpack.ProvidePlugin({
$: jquery,
jQuery: jquery
});
The following Github issue addresses your question: https://github.com/selectize/selectize.js/issues/1421. This is a problem with the selectize library breaking when imported through webpack. A temporary solution for this is to just manually import the library.
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 have a project based on Rails 6.0.0.rc2 including webpack. I am trying to include simply the library particles.js
I am following the GitHub readme:
- Install the library with yarn
- Add a container with a specific id
- Try to initialize the function using particlesJS.load
Obviously, it is not working: particleJS is not defined
particle_js__webpack_imported_module_0___default.a.load is not a
function
After reading a lot of questions on this topic but nothing is really clear. here are some leads but I did not succeed:
https://stackoverflow.com/a/42457020/11027833
https://github.com/vigetlabs/blendid/issues/287
https://github.com/VincentGarreau/particles.js/issues/114
I understood that particleJS is linked to the window object. And indeed, when I try in the console particleJS, it works.
So could you tell me simply how to use particleJS with webpack? Or how to use a window function into webpack?
Thank you in advance for your efforts!
Welcome to the Rails+webpacker mayhem. In theory you would do something like:
let particlejs = require("particlejs");
That goes in your pack file. Then you have particlejs available in your window object.
You can also do:
// config/webpack/custom.js
module.exports = {
resolve: {
alias: {
jquery: 'jquery/src/jquery',
particle_js: 'particlejs'
}
}
}
Also try this:
import 'particles.js/particles';
const particlesJS = window.particlesJS;
particlesJS.load('particles-js', 'particles.json', null);
I ran into this exact same issue, here is what I did to get it working.
If you're using yarn to install/add packages then run the following command from the root of your application to add the particles.js to the node_modules folder:
yarn add particles.js
Now open up app/javascript/packs/application.js and add the following:
require("particles.js")
Now restart your rails server and it should work.
How to compile Simditor with Webpack?
I'm trying to compile Simditor using Laravel Mix, But I'm getting the following error:
Uncaught TypeError: Simditor.connect is not a function
Here is my js file:
window.$ = window.jQuery = require('jquery');
import 'simple-module';
import 'simditor';
$(document).ready(function () {
$('.input.text-editor').each(function () {
var editor = new Simditor({
textarea: $(this).find('textarea')
});
});
});
Any ideia why I'm getting this error?
Editor website: simditor.tower.im
I tried several versions of simditor with webpack installation, one of it worked, after version 2.3.22, JS library directories of simditor and all dependencies become different than previous versions.
Here are my steps:
Install simditor at the version 2.3.22 with webpack(Run yarn add simditor#2.3.22 in Rails 6)
import 'simple-module';
import 'simple-hotkeys';
import 'simple-uploader';
import Simditor from 'simditor';
It works!
I just found it out, that you cannot build that library with webpack, you need to download the library and include the files separately to html.
Tried all, and btw You need to include
mobilecheck.js
jquery.min.js
module.js
hotkeys.js
simditor.js
For this library to work!
I was using Symfony webpack encore.
I'm using webpack as my bundler/loader and I can load materialize css in fine (js/css), but when I try to use the toast, it says
Uncaught TypeError: Vel is not a function
I am including the library in the main index.js file by:
import 'materialize-css/bin/materialize.css'
import 'materialize-css/bin/materialize.js'
Does anyone know why this could be happening? Looking at the bundled source, the js for materialize is there.
Had a same problem & came up with somewhat simpler solution:
Only 2 things are needed to be done:
First: Import following in you root module like app.js
//given you have installed materialize-css with npm/yarn
import "materialize-css";
import 'materialize-css/js/toasts';
Second: if webpack, set following Plugin or get the velocity.min.js as global variable just like you would use jquery:
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery': "jquery",
"Vel": "materialize-css/js/velocity.min.js"
}),
I'm also trying to use materialize-css with webpack and have also run into this issue (albeit not for the same reason). Materialize isn't really built with a module loader in mind, and use global variables. They also bundle dependencies into their script directly in a way you might not want in a webpack-workflow.
I have a setup not exactly the same as you but I'll share it anyways, hoping it will help, my webpack+materialize works like this in a file i've created;
/**
* custom-materialize.js
*/
// a scss file where we include the parts I use.
require('./custom-materialize.scss');
/**
* materialize script includes
* we don't use all the plugins so no need to
* include them in our package.
*/
require('materialize-css/js/initial');
require('materialize-css/js/jquery.easing.1.3');
require('materialize-css/js/animation');
// note: we take these from npm instead.
//require('materialize-css/js/velocity.min');
//require('materialize-css/js/hammer.min');
//require('materialize-css/js/jquery.hammer');
require('materialize-css/js/global');
//require('materialize-css/js/collapsible');
require('materialize-css/js/dropdown');
Then just install Velocity from npm npm install velocity-animate
and point the global Vel materialize use to that package instead in webpack.
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'Vel': 'velocity-animate'
}),
you have to import css and js Files separately in your index.html
you must not import css file in index.js
Make sure that the uglifyJsPlugin is like this.
new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: false})
mangle property should be false so that the variable names of your source file doesn't change when you minify.
I have an Angular 2 app using Typescript. I want to use jQuery's $ for a variety of tasks such as
$(document).ready(function(){ // throwing error: "[ts] Cannot find '$'. any"
console.log("loaded up!");
$("#main_div").niceScroll();
})
I have imported the jQuery.min.js file into my app via index.html like so:
<script src="app/libs/jquery.min.js"></script>
However, I have not imported anything into the app.component.ts file in regards to the jQuery code. Is it necessary, and if so, how do I import it?
import { GenericService } from './services/Generic.service'; // did not do this
import $ from './libs/jquery.min.js'; // tried this but does not work
Surprisingly, my code worked yesterday as I was developing, but not today when I ran npm start. Could anyone help me out with this import process?
Simply do a
typings install jquery --ambient --save
to install the type definition file. Remove the import $ from './libs/jquery.min.js'; and add a reference to the d.ts file at the top of your app.component.ts like so:
/// <reference path="../typings/jquery.d.ts"/>
Since you're already loading the Javascript file in your index you only need the typings for it, so TypeScript knows, that those names and methods of jQuery exist.
Just add Jquery with typings :
typings install jquery --ambient --save
Then in your index :
<script src="bower_components/jquery/dist/jquery.min.js"></script>
And normally typescript will do the job :)