search

devjin0617 / vue2-admin-lte

:bar_chart: adminLTE to vuejs v2.x converting project
https://devjin0617.github.io/vue2-admin-lte
MIT License
1.07k stars 323 forks source link

jquery plugins not loading correctly #60

Open adrielwerlich opened 5 years ago

adrielwerlich commented 5 years ago

Hello there. Awesome dashboard. I´m getting some error messages like:


found in

---> <TodoList> at c:\Users\adrie\Downloads\vuejsadmin_31a5e23be455ba232\vue2-admin-lte-master\src\widgets\VATodoList.vue
       <Row> at c:\Users\adrie\Downloads\vuejsadmin_31a5e23be455ba232\vue2-admin-lte-master\src\grid\Row.vue
         <Dashboard> at c:\Users\adrie\Downloads\vuejsadmin_31a5e23be455ba232\vue2-admin-lte-master\src\examples\Dashboard.v1.vue
           <VaContentWrap> at c:\Users\adrie\Downloads\vuejsadmin_31a5e23be455ba232\vue2-admin-lte-master\src\ContentWrap.vue
             <App> at c:\Users\adrie\Downloads\vuejsadmin_31a5e23be455ba232\vue2-admin-lte-master\src\MainContent.vue
               <App> at c:\Users\adrie\Downloads\vuejsadmin_31a5e23be455ba232\vue2-admin-lte-master\src\App.vue
                 <Root>```

AND

```TypeError: $(...).find(...).todolist is not a function
    at VueComponent.mounted (VATodoList.vue?68eb:130)
    at callHook (vue.common.js?e881:3036)
    at Object.insert (vue.common.js?e881:4258)
    at invokeInsertHook (vue.common.js?e881:6076)
    at Vue.patch [as __patch__] (vue.common.js?e881:6295)
    at Vue._update (vue.common.js?e881:2776)
    at Vue.updateComponent (vue.common.js?e881:2897)
    at Watcher.get (vue.common.js?e881:3267)
    at new Watcher (vue.common.js?e881:3256)
    at mountComponent (vue.common.js?e881:2904)

a print

image

Of course, this is happenning in my local server... Ive tried to search in stackoverflow, but nothing yet.. I´m guessing something related with webpack not finding jquery plugins..

adrielwerlich commented 5 years ago

I was tryin to solve like following through these steps: Option #1: Use ProvidePlugin

Add the ProvidePlugin to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js so that jQuery becomes globally available to all your modules:

plugins: [

// ...

new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery', jQuery: 'jquery' }) ] Option #2: Use Expose Loader module for webpack

As @TremendusApps suggests in his answer, add the Expose Loader package:

npm install expose-loader --save-dev

Use in your entry point main.js like this:

require("expose-loader?$!jquery");

But somethings the error message show´s up again.... I dont know whats the problem with webpack