I've spent several hours trying to resolve this issue without any luck so perhaps someone could help.
I've set up my webpack.mix.js in the following way:
let mix = require('laravel-mix');
mix
.sass('./resources/assets/sass/admin/app.scss', './public/css/admin/app.css')
.sass('./resources/assets/sass/admin/login.scss', './public/css/admin/login.css')
.sass('./resources/assets/sass/front/app.scss', './public/css/app.css')
.js(
[
'./node_modules/cascading-dropdown/src/jquery.cascading-drop-down.js',
'./node_modules/ssd-form/src/jquery.ssd-form.js',
'./node_modules/ssd-confirm/src/jquery.ssd-confirm.js',
'./node_modules/simple-ajax-uploader/SimpleAjaxUploader.js',
'./node_modules/sortablejs/Sortable.js',
'./node_modules/swiper/dist/js/swiper.jquery.js',
'./node_modules/lightgallery/dist/js/lightgallery.js'
],
'./public/js/vendor.js'
)
.js(
[
'./resources/assets/js/app.js'
],
'./public/js/app.js'
)
.version();
My app.js file looks like so:
require('./bootstrap');
Vue.component('basket', require('./components/Basket.vue'));
Vue.component('pagination', require('./components/Pagination.vue'));
import Form from './core/Form';
import Focus from './core/Focus';
import Editor from './core/Editor';
import Sorter from './core/Sorter';
import Trigger from './core/Trigger';
import Gallery from './core/Gallery';
import SlideShow from './core/SlideShow';
import Navigation from './core/Navigation';
import Confirmation from './core/Confirmation';
import UploadManager from './core/Upload/UploadManager';
const app = new Vue({
el: '#app',
mounted() {
new Form();
new Focus();
new Editor();
new Sorter();
new Trigger();
new Gallery();
new SlideShow();
new Navigation();
new Confirmation();
new UploadManager();
}
});
When I run mix I get everything compiled without any errors, but when I preview the project in the browser it doesn't seem to be able to find the plugins which are included in the vendor.js file from within any of the classes i.e. Form.js:
class Form {
constructor() {
$('form[data-ajax-form]').ssdForm({
extendBehaviours: {
clickCallReload: function() {
window.location.reload(true);
}
}
});
}
}
export default Form;
I get
Uncaught TypeError: $(...).ssdForm is not a function
pointing to $('form[data-ajax-form]').ssdForm({}); call.
Also - my app.js contains jQuery and Sizzle multiple times - can't figure out where it comes from?
I am no expert on webpack but I believe the default config excludes node_modules in *.js. That may be why. I usually copy any files I need from node-modules using the copy command before running other functions. It does add time but I get better results.
The plugins are actually compiled into vendor.js so it adds them just fine, but they don't seem to be accessible from within app.js
why dont you put all your js file in app.js file by require('node_module_name') ?
and for scss files, you can import them into app.scss.
Not really as they go into different templates. I cannot require these plugins as they are not modules - just simple old school jQuery plugins.
Try removing the node_modules exclusion from *.js in the default config. I am guessing that webpack is not referencing the plugins correctly because of the exclusion. In other words, it compiles them but doesn't know where to find them for the class files. Just a guess.
It's line 93 in webpack.config.js
Thanks @ejdelmonico, but I'm afraid it wasn't that. I've updated the jQuery plugins by adding modular functionality and it seem to be working fine.
I've also removed all these plugins from mix.js([]) call and added them to mix.extract([]) together with vue and jquery.
Can you show your final webpack.mix.js?
It's pretty much the same - it's just plugins now export module, which can be bundled - before, some of them didn't since the problem.
I have the same problem, but i can't get it to work. All libs are added in the package.json I am using this mix file:
mix
.js([
'resources/assets/js/app.js'
], 'public/js/app.js')
.extract([
'jquery',
'bootstrap',
'slidebars',
'slick-carousel',
'nouislider'
])
.sass('resources/assets/sass/app.scss', 'public/css/app.css')
.version();
If I type $('body').hide() in the console, I get $(...).hide is not a function.
What's within your app.js file? Did you import jQuery?
This is my app.js: http://pastebin.com/suZCgTX8 It throws an error saying Uncaught ReferenceError: slidebars is not defined.
What do you mean with import jQuery? It is added in the compiled vendor.js since the mix.extract() along with the rest of the packs in that call.
Sorry - yes, didn't notice you extracted it. Check if the sidebars plugin is exported as module.
Also, plugin's package.json file should have a main entry pointing to the plugin's file i.e.
"main": "src/jquery.sidebars.js"
Here's some read: http://blog.npmjs.org/post/112712169830/making-your-jquery-plugin-work-better-with-npm
The plugin does have a main pointing to its js-file. And the plugin is - as far as I understand - a module.
This is some of the code generated by Laravel Mix: http://pastebin.com/6VhAMjut
It doesn't look like this plugin is modular: https://github.com/adchsm/Slidebars/blob/master/dist/slidebars.js
What is it that distinguishes a modular plugin from a non-modular one?
Please read that article on npmjs.org I posted above - it explains it.
You can compare this plugin with this one for instance - see the block at the top https://github.com/sebastiansulinski/ssd-confirm/blob/master/src/jquery.ssd-confirm.js
Please or to participate in this conversation.