{"action":"created","issue":{"url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/1730","repository_url":"https://api.github.com/repos/JeffreyWay/laravel-mix","labels_url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/1730/labels{/name}","comments_url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/1730/comments","events_url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/1730/events","html_url":"https://github.com/JeffreyWay/laravel-mix/issues/1730","id":347860948,"node_id":"MDU6SXNzdWUzNDc4NjA5NDg=","number":1730,"title":"Problems with JS/jQuery imports","user":{"login":"moso","id":9088286,"node_id":"MDQ6VXNlcjkwODgyODY=","avatar_url":"https://avatars3.githubusercontent.com/u/9088286?v=4","gravatar_id":"","url":"https://api.github.com/users/moso","html_url":"https://github.com/moso","followers_url":"https://api.github.com/users/moso/followers","following_url":"https://api.github.com/users/moso/following{/other_user}","gists_url":"https://api.github.com/users/moso/gists{/gist_id}","starred_url":"https://api.github.com/users/moso/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/moso/subscriptions","organizations_url":"https://api.github.com/users/moso/orgs","repos_url":"https://api.github.com/users/moso/repos","events_url":"https://api.github.com/users/moso/events{/privacy}","received_events_url":"https://api.github.com/users/moso/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-08-06T10:09:44Z","updated_at":"2018-08-09T08:38:52Z","closed_at":null,"author_association":"NONE","body":"- Laravel Mix Version: 2.1.11\r\n- Node Version: 8.10.0\r\n- NPM Version (`npm -v`): 6.1.0\r\n- OS: Ubuntu 18.04.1\r\n\r\n### Description:\r\n\r\nI have a lot of JS imports in my main JS-file. Many of them are modules that essentially are just split-up jQuery functions for specific things. Such as init of this and that slider, etc. It's split up so it's easier to maintain.\r\n\r\nEven though jQuery is added to my `mix.config` like so:\r\n```javascript\r\nmix.js('src/js/main.js', 'js/')\r\n   .sass('src/sass/main.scss', 'css/', {\r\n       outputStyle: 'nested'\r\n   })\r\n   .autoload({\r\n       jquery: ['$', 'jQuery', 'jquery', 'window.jQuery'],\r\n       'popper.js/dist/umd/popper.js': ['Popper'],\r\n   })\r\n   .extract(['jquery', 'popper.js', 'bootstrap']);\r\n```\r\n\r\n...I still have to import jQuery manually in `main.js`, like so:\r\n```javascript\r\n// jQuery\r\nwindow.$ = $;\r\nwindow.jQuery = window.$ = require('jquery');\r\n```\r\n\r\nMost of my modules work fine. But I get the odd `$(...)<import> is not defined`, where `<import>` being an imported npm package, eg, owl.Carousel. These modules are set up the exact same way. However, the only fix to these specific owl.Carousel-errors is to have jQuery in my `<head>`-tag, which isn't optimal.\r\n\r\nI know I can import npm packages in two ways:\r\n- Regular ol' school: `var Package = require('package');`\r\n- And ES6: `import * as Package from 'package';`\r\n\r\nBut again, I get the odd `Module is not defined` errors.\r\n\r\nIs there anything I'm doing wrong here, or am I stretching Mix too far?\r\n\r\nThanks!"},"comment":{"url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/comments/411682337","html_url":"https://github.com/JeffreyWay/laravel-mix/issues/1730#issuecomment-411682337","issue_url":"https://api.github.com/repos/JeffreyWay/laravel-mix/issues/1730","id":411682337,"node_id":"MDEyOklzc3VlQ29tbWVudDQxMTY4MjMzNw==","user":{"login":"ankurk91","id":6111524,"node_id":"MDQ6VXNlcjYxMTE1MjQ=","avatar_url":"https://avatars3.githubusercontent.com/u/6111524?v=4","gravatar_id":"","url":"https://api.github.com/users/ankurk91","html_url":"https://github.com/ankurk91","followers_url":"https://api.github.com/users/ankurk91/followers","following_url":"https://api.github.com/users/ankurk91/following{/other_user}","gists_url":"https://api.github.com/users/ankurk91/gists{/gist_id}","starred_url":"https://api.github.com/users/ankurk91/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ankurk91/subscriptions","organizations_url":"https://api.github.com/users/ankurk91/orgs","repos_url":"https://api.github.com/users/ankurk91/repos","events_url":"https://api.github.com/users/ankurk91/events{/privacy}","received_events_url":"https://api.github.com/users/ankurk91/received_events","type":"User","site_admin":false},"created_at":"2018-08-09T08:38:52Z","updated_at":"2018-08-09T08:38:52Z","author_association":"CONTRIBUTOR","body":"Laravel mix uses webpack under the hood.\r\n\r\nSeveral issue has been reported for this before. see\r\nhttps://github.com/OwlCarousel2/OwlCarousel2/issues/1866\r\n\r\nCan you try to update your main.js code with\r\n```\r\n// main.js\r\n// use ES6 import for jQuery too\r\nimport jQuery from 'jquery';\r\nwindow.$ = window.jQuery = jQuery;\r\n```\r\nI believe you have these lines in your blade already\r\n```blade\r\n<script src=\"{{ mix('js/manifest.js') }}\"></script>\r\n<script src=\"{{ mix('js/vendor.js') }}\"></script>\r\n<script src=\"{{ mix('js/app.js') }}\"></script>\r\n```"}}
{"actor":{"display_login":"ankurk91"}}