giviz
2 years ago
2357
7
Mix

ReferenceError: $ is not defined using Mix

Posted 2 years ago by giviz

Hi guys,

I've spend a couple of hours trying to figure out why I get this error when I'm trying to use jQuery:

Uncaught ReferenceError: $ is not defined at home:203

For some really basic code :

<input type="text" id="test" value="test"/>
<script>
alert($('#test').value);
</script>

Some files :

package.json

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.5.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "datatables.net": "^1.10.13",
    "datatables.net-dt": "^1.10.13"
  }
}

bootstrap.js

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        'jquery',
        'vue'
    ])
   .sass('resources/assets/sass/app.scss', 'public/css');

Loaded in head

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>

Loaded before body close

<script src="/js/app.js"></script>

Any idea of what and I can be missing here ?

Please sign in or create an account to participate in this conversation.