I'm working on a Symfony 3 project and trying to build a skeleton fỏ frontend development. I decided to use webpack encore.
This is my webpack entry file:
// assets/js/app.js
// loads the jquery package from node_modules
var $ = require('jquery');
require('node-waves');
require('popper.js');
require('bootstrap');
require('mdbootstrap');
require('slick-carousel');
require('jquery-validation');
require('jquery-validation-unobtrusive');
require('multi-step-form-js');
$(document).ready(function() {});
The things seem okay if I don't use the "multi-step-form-js". If I require it into the entry file. I will get an error like this in console of Google Chrome "Uncaught TypeError: Cannot read property 'prototype' of undefined". It locates me to this snippet of code inside the libary:
$.validator.prototype.subset = function(container) {
var ok = true;
var self = this;
$(container).find(':input').each(function() {
if (!self.element($(this))) ok = false;
});
return ok;
};
I think the problem is missing of dependence (the "jquery-validation"). I tried to require it with this line of code "require('jquery-validation');". The problem isn't be solved. I guess that webpack use requirejs by by default so I have to find a special way to require it. Unluckily, I'm still finding.
Are there any ideas about how to solve it?
Thanks in advance!
For missing dependencies, you can try installing it manually into your devDependencies with the following.
npm install -D jquery-validation or yarn add -D jquery-validation
Please ensure that the package name is correct. I am just using what you have spelt.
Related
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.
I'm trying to use lit-html to save my self some time, but I'm having trouble getting everything set up correctly.
Electron 4.1.1
Node 11.15
As of 5 minutes before posting this, I've run npm install and electron-rebuild, no luck.
I use require() as one would with any other NPM package
var render = require('lit-html').render
var html = require('lit-html').html
console.log(require("lit-html"))
Unfortunately, I'm greeted with this error
In reference to the three lines of code above.
I don't see any problems with my code.
I've tried reinstalling lit-html through NPM to no avail. I would really love to use this library, but first I have to get over this hurdle. If I'm being honest, I don't know if this error is reproducible, but nothing I do seems to fix it. The problem seems to lie with node and the way that imports are handled.
Am I missing something here? Is this a common issue? If so, what can I do to fix it?
You need to transpile lit-html before you can require it
I tested require('lit-html') and I was greeted with this error:
/home/chbphone55/Workspace/test/node_modules/lit-html/lit-html.js:31
import { defaultTemplateProcessor } from './lib/default-template-processor.js';
It clearly states that the error is coming from lit-html/lit-html.js:31 where the line uses ES Module import syntax.
You can transpile it using tools like Babel or similar ones. However, you may want to try using ES Module syntax so you can import lit-html without transpiling it.
Example:
<!-- HTML File -->
<script type="module" src="index.js"></script>
// index.js
import { html } from 'lit-html';
What if you can't use type="module"
If you are unable to use the type="module" method above, you can also use the ESM package.
ESM is a brilliantly simple, babel-less, bundle-less ECMAScript module loader.
Here are a few examples of how to use it:
Using the node require flag (-r) to load esm before everything else
node -r esm index.js
Loading esm in your main file then loading the rest of your code.
// Set options as a parameter, environment variable, or rc file.
require = require('esm')(module/*, options*/)
module.exports = require('./main.js')
I have project using gulp.
I am trying to get jquery, jquery ui and bootstrap into one file called vendor.js.
This works fine however when I run "gulp serve" to run the project fromthe dist folder of the project i get the error
ReferenceError: require is not defined
http://localhost:3000/assets/toolkit/scripts/vendor.js
Line 6
var jQuery = require('jquery');
gulp.task('vendor-js', function() {
return gulp.src(['src/assets/toolkit/scripts/vendor/jquery.min.js',
'src/assets/toolkit/scripts/vendor/jquery-ui.js',
'src/assets/toolkit/scripts/bootstrap/bootstrap.min.js' ])
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/assets/toolkit/scripts/'));
});
Folder Structure
dist\assets\toolkit\scripts
dist\assets\toolkit\styles
dist\assets\toolkit\images
dist\pages
index.html
Why is this the case? I have looked all over with no luck! I have seen similar issues but all relating to react?
Can anyone help?
Thanks
NIck
Managed to get this working eventually so I thought i would post my solution.
I reverted to using the built in toolkit.js file to require each dependency. In this case Jquery, Jquery Ui, Bootstrap Sass and Chart Js.
In my toolkit.js file i included
window.$ = window.jQuery = require('jquery');
require('jquery-ui');
require('bootstrap-sass');
require('chart.js');
This is then concatenated by my Gulp task.
The key is window.$ = window.jQuery = require('jquery');
rather than
require('jquery');
I have setup browserify with Gulp.
When I require jQuery, everything works:
var $ = require('jquery');
When I try to require jquery load template module
var loadTemplate = require('jquery.loadtemplate')
I get an error
module "jquery.loadtemplate " not found
I installed loadtemplate using npm like this
npm install --save jquery.loadtemplate
I think there is an error in the package.json of the jquery.loadtemplate module. It should define the source of the plugin somewhere and it's missing. In other modules the source is defined in the "main" property. It should say something like
"main": "jquery-loadTemplate/jquery.loadTemplate-1.5.0.js",
depending on the location of the script file. You can change it manually, but then it'll be deleted the next time you update/reinstall your npm package.
I had a small Ember-App in just one single HTML File and everything was working fine, but since it was getting quite big I started to port it to Ember-CLI. Most things worked fine to port but I'm still struggling to add JStorage:
https://github.com/andris9/jStorage
I'm not really sure how to start as its a plain JS Lib, that I normally would just drop into the code somewhere before I use it. Now with all the modules I'm totally lost where to even start looking for how to do it.
Can anyone point me in the right direction how to use such JS Libs?
I found a few Topics around it but did not get to any working path.
Here is how I used it previously:
App.Something = Ember.Object.extend({
init: function() {
var stored = $.jStorage.get('something');
...
}
});
Well, after a lot of smoke out of my ears i got it to work:
add json2
$ bower install --save json2
This does not work out of box because there is no tags in the repo.
Edit the bower.js File to set the version to "master". Then it works.
add jStorage
$ bower install --save jstorage
Install the dependencies (not sure if necessary but i did it)
$ ember install:bower
Then the files are available in the folder bower_components, which is ignored by git and apparently my editor (atom.io) too.
Import the files in the Brockfile.js like this
...
app.import('bower_components/json2/json2.js');
app.import('bower_components/jstorage/jstorage.js');
module.exports = app.toTree();
Use it, prefixing $ with Ember not to upset JSHint (would work without)
...
var stored = Ember.$.jStorage.get(id);
...