libertey's avatar

npm run watch does not render well suddenly, $ is not defined

Hello guys, I have a problem with the web pack renderer of laravel. I was writing some functions to get some info via routes in ajax like 4 times it renders perfectly well and anything works. suddenly it does not work anymore and throws the error $ is not defined. I already deleted my node_modules folder, installed it again, updated my packages tried the newest version of npm and node, and tried older versions, but nothing helped. the command does not even throw errors or anything it is just stated in the console Uncaught Reference: $ is not defined. I also removed the code where it abruptly won't work again. But it always has the same error.

Here is some code of my environment

#package.json#

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.56.1",
        "sass-loader": "^8.0.0",
        "scrollmagic": "^2.0.8",
        "tinymce": "^6.3.0",
        "vue-template-compiler": "^2.7.14"
    },
    "dependencies": {
        "@fontsource/raleway": "^4.5.11",
        "@fortawesome/fontawesome-free": "^5.15.3",
        "@popperjs/core": "^2.11.6",
        "bootstrap": "^5.2.3",
        "gsap": "^3.11.3",
        "jquery": "^3.6.1",
        "jquery-ui": "1.13.1",
        "laravel-mix-scrollmagic-gsap": "^0.1.1",
        "multiple-select": "^1.5.2",
        "owl.carousel": "^2.3.4",
        "popper": "^1.0.1",
        "roboto-fontface": "^0.10.0"
    }
}

#And that`s the way im importing jquery

window.$ = window.jQuery = require('jquery');
window.sortable = require("jquery-ui"), require('jquery-ui/ui/widgets/sortable'), require('jquery-ui/ui/disable-selection'), require('jquery-ui/ui/widgets/accordion');
window.OE = new Oe()
window.gsap = require('gsap')
require('./bootstrap');
require('bootstrap/dist/js/bootstrap.min');
require('multiple-select/dist/multiple-select');

As said, it worked all pretty well until I wrote down some not-heavy code... there is not even jquery involved, but now it won't work for any site I created because every code is written in an $(document).ready() function I could change all the code to vanilla javascript but that would take a huge amount of time because I'm using it for many ajax calls and some animations.

#This is the code suddenly it stopped working#

pathTexts.forEach(p => {
            let context = data.filter(d => d.title === p.getAttribute('data-name')),
                x = p.getAttribute('transform').replace(/[^0-9.,]+/g, '')[0],
                y = p.getAttribute('transform').replace(/[^0-9.,]+/g, '')[1]

            console.log(x,y)
        })

So if u have any suggestions as to where the error can be, I would appreciate it.

EDIT:

Also my webpack.config.js

const mix = require('laravel-mix');
require('laravel-mix-scrollmagic-gsap');
mix.scrollmagicGSAP();

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.copyDirectory('node_modules/tinymce/themes', 'public/js/themes');
mix.copyDirectory('node_modules/tinymce/skins', 'public/js/skins');
mix.copyDirectory('node_modules/tinymce/icons', 'public/js/icons');
mix.copyDirectory('node_modules/tinymce/plugins', 'public/js/plugins');
mix.copyDirectory('node_modules/tinymce/models', 'public/js/models');

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/admin.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/admin.scss', 'public/css')
    .version();
0 likes
1 reply
libertey's avatar

Okay, I found a way to solve the problem, because I have 2 separate files admin.js and app.js... In both I use jQuery but it was only imported/required in app.js. So I also stated the window.$ = window.jQuery = require('jquery'); in admin.js and now anything works again. But I also put inside the bootstrap.js that it is globally usable but that didn't work as well so I don't think that there is an overall problem solved. Anyways now it worked and it does not throw any errors anymore.

Please or to participate in this conversation.