title: Uncaught ReferenceError: $ is not defined in Vuejs webpack project
body: <p>I got this error in browser console when running vuejs webpack project.
  <a href="https://i.stack.imgur.com/s2mEp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s2mEp.png" alt="enter image description here"></a></p>
  
  <p>I have js files minimized in core.min.js.</p>
  
  <p>jquery minimized js is added inside core.min.js.</p>
  
  <p>To view the code of core.min.js check 
  <a href="https://drive.google.com/open?id=1VVbjO1mlOIIuZ61moP0tUjs6E9G6kGtM" rel="nofollow noreferrer">https://drive.google.com/open?id=1VVbjO1mlOIIuZ61moP0tUjs6E9G6kGtM</a></p>
  
  <p>and script.js check 
  <a href="https://drive.google.com/open?id=1943_EkPsDP0-M0qI1KXkK81sru0yVvzl" rel="nofollow noreferrer">https://drive.google.com/open?id=1943_EkPsDP0-M0qI1KXkK81sru0yVvzl</a></p>
  
  <p>core.min.js</p>
  
  <pre><code>/**
   * @module       jQuery
   * @author       jQuery Foundation and other contributors
   * @see          https://code.jquery.com/jquery/
   * @license      MIT (jquery.org/license)
   * @version      3.2.1
   */
  
  
  /**
   * @module       jQuery Migrate
   * @author       jQuery Foundation and other contributors
   * @see          https://code.jquery.com/jquery/
   * @license      MIT
   * @version      3.0.0
   */
  
  
  /**
   * @module       jQuery Cookie Plugin
   * @see          https://github.com/carhartl/jquery-cookie
   * @license      MIT
   */
  
  
  /**
   * @module       Device.js
   * @see          https://github.com/matthewhudson/device.js
   * @license      MIT
   */
  
  
  /**
   * @module       jQuery resize event
   * @see          http://benalman.com/projects/jquery-resize-plugin/
   * @license      MIT
   */
  
  
  /**
   * @module       jQuery easing
   * @author       George McGinley Smith
   * @see          http://gsgd.co.uk/sandbox/jquery/easing/
   * @license      BSD
   * @version      1.4.0
   */
  
  /**
   * @module       TouchSwipe
   * @see          https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
   * @license      MIT
   * @version      1.6.18
   */
  
  
  /**
   * @module       Popper.js
   * @author       Federico Zivolo
   * @see          https://github.com/FezVrasta/popper.js
   * @license      MIT
   * @version      1.14.3
   */
  
  
  /**
   * @module       Bootstrap
   * @author       Twitter, Inc.
   * @see          http://getbootstrap.com
   * @license      MIT
   * @version      4.1.3
   */
  
  
  /**
   * @module       Regula
   * @description  An annotation-based form-validation framework in Javascript
   * @license      BSD
   * @version      1.3.4
   * @copyright    Robert Nyman, http://www.robertnyman.com
   */
  
  
  /**
   * @module       Form
   * @version      3.51
   * @author       M. Alsup
   * @see          {@link http://malsup.com/jquery/form}
   * @see          {@link https://github.com/jquery-form/form}
   * @license      MIT and GPL
   * @requires     module:jQuery
   */
  
  /**
   * @module       RDInputLabel
   * @author       Evgeniy Gusarov
   * @license      MIT
   */
  
  
  /**
   * @module       RD FilePicker
   * @author       Aleksey Patsurkovskiy
   * @version      1.0.2
   * @license      MIT
   * @link         http://cms.devoffice.com/coding-demo/mnemon1k/rd-filepicker/demo/
   */
  
  
  /**
   * @module       Owl carousel
   * @version      2.2.1
   * @author       Bartosz Wojciechowski
   * @license      MIT
   */
  
  
  /**
   * @module       Isotope PACKAGED
   * @license      GPLv3
   * @see          http://isotope.metafizzy.co
   * @version      2.2.2
   */
  
  
  /**
   * @module       RD Navbar
   * @author       Evgeniy Gusarov
   * @see          https://ua.linkedin.com/pub/evgeniy-gusarov/8a/a40/54a
   * @version      2.2.5
   */
  
  
  /**
   * @module       UIToTop
   * @author       Matt Varone
   * @see          http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
   * @license      MIT
   */
  
  
  /**
   * @module       Materianize Parallax
   * @see          http://materializecss.com/parallax-demo.html
   * @licesne      MIT
   */
  
  
  /**
   * @module       Swiper
   * @description  Most modern mobile touch slider and framework with hardware accelerated transitions
   * @author       Vladimir Kharlampidi
   * @see          http://www.idangero.us/swiper/
   * @licesne      MIT
   * @version      4.1.0
   */
  
  
  
  
  /**
   * @module       Lightgallery
   * @author       Sachin N
   * @see          http://sachinchoolur.github.io/lightGallery/
   * @license      GPLv3
   * @version      1.6.2 - 2017-10-03
   */
  
  
  /**
   * @module       WOW
   * @author       Matthieu Aussaguel
   * @license      MIT
   * @version      1.1.3
   */
  
  
  /**
   * @module       PageTransition
   * @author       Roman Kravchuk (JeremyLuis)
   * @license      MIT
   * @version      1.1.3
   * @description  Smooth transition between pages
   * @requires     module:jQuery
   */
  
  
  /**
   * @module       Select2
   * @see          https://github.com/select2/select2/blob/master/
   * @license      MIT
   * @version      3.5.4
   */
  
  
  /**
   * @module       Slick
   * @author       Ken Wheeler
   * @see          http://kenwheeler.github.io/slick
   * @version      1.6.0
   */
  
  
  /**
   * @module       Stepper
   * @version      3.0.8
   * @license      MIT
   * @link         http://classic.formstone.it/stepper/
   */
  
  
  /**
   * @module CustomEvent polyfill
   */
  
  
  /**
   * @module       MultiToggles
   * @author       ATOM
   * @license      MIT
   * @see          https://codepen.io/OXAYAZA/pen/eRbYjV
   * @version      2.0.0
   * @description  Allows you to use multiple toggles to switch class "active" on the target,
   *               itself and other toggles linked to the same target.
   */
  
  
  /**
   * @module       RD Range
   * @author       Roman Kholiavko
   * @see          http://cms.devoffice.com/coding-demo/marathoner/rd-range/documentation
   * @version      1.0
   */
  
  
  /**
   * @module       jQuery Mousewheel
   * @license      MIT
   * @version      3.1.13
   */
  
  /**
   * @module       jQuery Mousewheel
   * @author       2014 Kelvin Luck &amp; 2017-2018 Tuukka Pasanen
   * @see          http://jscrollpane.kelvinluck.com/
   * @license      Dual licensed under the MIT or GPL licenses.
   * @version      2.1.2-rc.1
   */
  
  
  /**
   * @module  αUtil
   * @version v1.0.1
   * @desc    Service functions for α-modules
   * @author  OXAYAZA {@link https://github.com/OXAYAZA}
   * @license CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
   * @see     {@link https://www.linkedin.com/in/%D1%8E%D1%80%D0%B8%D0%B9-%D0%B1%D0%B0%D0%B7%D0%B0%D0%B5%D0%B2-166479165/}
   */
  
  /**
   * @module   αCounter
   * @version  v0.1.1
   * @author   OXAYAZA {@link https://github.com/OXAYAZA}
   * @license  CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
   * @requires module:αUtil
   * @see      {@link https://oxayaza.page.link/gitHub_aCounters}
   */
  
  /**
   * @module   αProgressCircle
   * @version  v0.1.1
   * @author   OXAYAZA {@link https://github.com/OXAYAZA}
   * @license  CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
   * @requires module:αUtil
   * @see      {@link https://oxayaza.page.link/gitHub_aCounters}
   */
  
  /**
   * @module   αCountdown
   * @version  v0.1.1
   * @author   OXAYAZA {@link https://github.com/OXAYAZA}
   * @license  CC BY-SA 4.0 {@link https://creativecommons.org/licenses/by-sa/4.0/}
   * @requires module:αUtil
   * @requires module:αProgressCircle
   * @see      {@link https://oxayaza.page.link/gitHub_aCounters}
   */
  </code></pre>
  
  <p>App.vue</p>
  
  <pre><code>&lt;script&gt;
  
  import VueInjectJs from 'vue-inject-js'
  
  
  export default {
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    name: 'app',
    components: {
      VueInjectJs
    }
  }
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;div id="app"&gt;
  
  
      &lt;div class="page"&gt;
  
        &lt;app-header&gt;&lt;/app-header&gt;
        &lt;app-home&gt;&lt;/app-home&gt;
        &lt;app-footer&gt;&lt;/app-footer&gt;
  
      &lt;/div&gt;  
  
      &lt;VueInjectJs src="src/assets/js/core.min.js" /&gt;
      &lt;VueInjectJs src="src/assets/js/script.js" /&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style&gt;
    @import '//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900%7CRoboto:300,400,500,700,900';
  
  
    @import './assets/css/style.css';
    @import './assets/css/fonts.css';
  &lt;/style&gt;
  
  
  </code></pre>
  
  <p>Footer.vue</p>
  
  <pre><code>&lt;template&gt;
  
    &lt;div&gt;    
        &lt;section class="section section-md bg-gray-31 context-dark"&gt;
          &lt;div class="container"&gt;
            &lt;div class="row row-40 justify-content-lg-between"&gt;
              &lt;div class="col-md-6 col-lg-4 col-xl-3"&gt;
                &lt;h3 class="heading-square font-weight-sbold" data-item=".heading-square-item"&gt;&lt;span class="heading-square-item"&gt;&lt;/span&gt;Latest Properties&lt;/h3&gt;&lt;a class="post-minimal" href="single-property.html"&gt;
                  &lt;div class="post-minimal-image"&gt;&lt;img src="./assets/images/post-minimal-01-161x136.jpg" alt="" width="161" height="136"/&gt;
                  &lt;/div&gt;
                  &lt;div class="post-minimal-body"&gt;
                    &lt;div class="post-minimal-title"&gt;&lt;span&gt; Retail Store Southwest 186th Street&lt;/span&gt;&lt;/div&gt;
                    &lt;div class="post-minimal-text"&gt;&lt;span&gt;From $120/month&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;&lt;/a&gt;&lt;a class="post-minimal" href="single-property.html"&gt;
                  &lt;div class="post-minimal-image"&gt;&lt;img src="./assets/images/post-minimal-02-161x136.jpg" alt="" width="161" height="136"/&gt;
                  &lt;/div&gt;
                  &lt;div class="post-minimal-body"&gt;
                    &lt;div class="post-minimal-title"&gt;&lt;span&gt; Apartment Building with Subunits&lt;/span&gt;&lt;/div&gt;
                    &lt;div class="post-minimal-text"&gt;&lt;span&gt;From $120/month&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6 col-lg-4 col-xl-3 col-bordered"&gt;
                &lt;h3 class="heading-square font-weight-sbold" data-item=".heading-square-item"&gt;&lt;span class="heading-square-item"&gt;&lt;/span&gt;Contact    Us&lt;/h3&gt;
                &lt;div class="link-with-icon heading-4 text-spacing-150 font-sec" data-item=".icon"&gt;&lt;span class="icon icon-1 mdi mdi-phone"&gt;&lt;/span&gt;&lt;a href="tel:#"&gt;1-800-700-6200&lt;/a&gt;&lt;/div&gt;
                &lt;div class="link-with-icon text-spacing-100" data-item=".icon"&gt;&lt;span class="icon icon-2 mdi mdi-email-outline"&gt;&lt;/span&gt;&lt;a href="mailto:#"&gt;info@demolink.org&lt;/a&gt;&lt;/div&gt;
                &lt;div class="link-with-icon text-spacing-100" data-item=".icon"&gt;&lt;span class="icon icon-3 mdi mdi-map-marker"&gt;&lt;/span&gt;&lt;a href="#"&gt;3015 Grand Ave, Coconut&lt;br style="line-height: 0"&gt; Grove,Merrick Way, FL 12345&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                &lt;h3 class="heading-square font-weight-sbold" data-item=".heading-square-item"&gt;&lt;span class="heading-square-item"&gt;&lt;/span&gt;Newsletter Signup&lt;/h3&gt;
                &lt;p class="rd-mailform-label"&gt;Enter your e-mail to get the latest news of Real Estate&lt;/p&gt;
                &lt;form class="rd-form rd-mailform rd-form-inline-1" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="bat/rd-mailform.php"&gt;
                  &lt;div class="form-wrap"&gt;
                    &lt;input class="form-input" id="subscribe-form--email" type="email" name="email" data-constraints="@Email @Required"&gt;
                    &lt;label class="form-label" for="subscribe-form--email"&gt;Your e-mail&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="form-button"&gt;
                    &lt;button class="button button-primary button-square" type="submit"&gt;Subscribe&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
                &lt;ul class="list-inline-1"&gt;
                  &lt;li&gt;&lt;a class="icon fa-facebook" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="icon fa-twitter" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="icon fa-google-plus" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="icon fa-pinterest-p" href="#"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;!-- Page footer--&gt;
        &lt;footer class="section footer-classic context-dark bg-gray-21"&gt;
          &lt;div class="container"&gt;
            &lt;div class="row row-10 justify-content-sm-between"&gt;
              &lt;div class="col-sm-6"&gt;
                &lt;!-- Rights--&gt;
                &lt;p class="rights"&gt;&lt;span&gt;Real Estate&lt;/span&gt; &lt;span&gt;&amp;copy;&amp;nbsp;&lt;/span&gt;&lt;span class="copyright-year"&gt;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="privacy-policy.html"&gt;Privacy Policy&lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6 text-sm-right"&gt;
                &lt;div class="right-1"&gt;&lt;a href="submit-property.html"&gt;&lt;span class="icon mdi mdi-plus"&gt;&lt;/span&gt;Submit Property&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/footer&gt;
  
      &lt;!-- Global Mailform Output --&gt;
      &lt;div class="snackbars" id="form-output-global"&gt;&lt;/div&gt;
    &lt;/div&gt;  
  
  &lt;/template&gt;
  
  &lt;script &gt;
    //import "./assets/js/core.min.js";
    //import "./assets/js/script.js";
  
    /*export default {
      name: 'Footer'
    }*/
  
  &lt;/script&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>import Vue from 'vue';
  import App from './App.vue';
  import Header from './Header.vue';
  import Home from './Home.vue';
  import Footer from './Footer.vue';
  
  
  Vue.component('app-header',Header);
  Vue.component('app-home',Home);
  Vue.component('app-footer',Footer);
  
  
  
  new Vue({
    el: '#app',
    render: h =&gt; h(App)
  });
  
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>var path = require('path')
  var webpack = require('webpack')
  
  module.exports = {
    entry: './src/main.js',
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      filename: 'build.js'
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'vue-style-loader',
            'css-loader'
          ],
        },      {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
  
            }
            // other vue-loader options go here
          }
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          //exclude: ["/node_modules/","/src/assets/js/core.min.js"]
          exclude: /node_modules/
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        },
  
        {
          test: /\.(woff|woff2|ttf|eot)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                limit: 10000/*,
                mimetype: 'application/octet-stream'*/
              }
            }
          ]
        }
  
      ],
  
    },
    resolve: {
  
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      },
      extensions: ['*', '.js', '.vue', '.json']
  
    },
    devServer: {
      historyApiFallback: true,
      noInfo: true,
      overlay: true
    },
    performance: {
      hints: false
    },
  
    devtool: '#eval-source-map'
  }
  
  if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: false
        }
      }),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
  
  
    ])
  }
  
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "vue-webpack",
    "description": "IABC project",
    "version": "1.0.0",
    "author": "jaouni",
    "license": "",
    "private": true,
    "scripts": {
      "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
      "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
    },
    "dependencies": {
      "node-sass": "^4.13.0",
      "sass-loader": "^8.0.0",
      "vue": "^2.5.11",
      "vue-inject-js": "^1.0.0",
      "vue-style-loader": "^4.1.2"
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not ie &lt;= 8"
    ],
    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-preset-env": "^1.6.0",
      "babel-preset-stage-3": "^6.24.1",
      "cross-env": "^5.0.5",
      "css-loader": "^0.28.11",
      "file-loader": "^1.1.11",
      "popper.js": "^1.16.0",
      "url-loader": "^2.2.0",
      "vue-loader": "^13.0.5",
      "vue-style-loader": "^4.1.2",
      "vue-template-compiler": "^2.4.4",
      "webpack": "^3.12.0",
      "webpack-dev-server": "^2.9.1"
    }
  }
  </code></pre>
  
  <p>Image of project directory
  <a href="https://i.stack.imgur.com/GKAuI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GKAuI.png" alt="enter image description here"></a></p>