In 5.2 I was using gulp and I just set this in app.js
window.$ = window.jQuery = require('jquery');require('jquery-ui-bundle');
This doesn't work anymore so I was able to load jquery from webpack.mix.js like this:
.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
});
But how do I load jquery-ui-bundle?
Simply put all your JS file and components in resources/assets/js/
and
webpack.mix.js
let mix = require('laravel-mix');
mix.js('resources/assets/js/.....js', 'public/js');
Compile and Run using npm
Related
I uploaded a file using command node test.js in google drive and it worked perfectly. But now I am trying to upload a file when user selects a file. For that I added
const {google} = require('googleapis');
in /resources/js/app.js and ran a command npm run dev. but node is not able to compile and giving this error.
resources/js/app.js
require('./bootstrap');
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
const {google} = require('googleapis');
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js', ).postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
In my laravel project I use nwidart.
Each module has its own node_module and webpack.mix.js file. When I run npm run dev on each module, other modules and main vue components does not work and shows this error:
example.js:31589 [Vue warn]: Failed to resolve async component: function () {
return webpack_require.e/* import() */(4).then(webpack_require.bind(null, 44));
}
Reason: TypeError: Cannot read property 'call' of undefined
Here is my Module webpack file:
let mix = require('laravel-mix');
mix.setPublicPath('../../public/');
mix.js(__dirname +'/Resources/assets/js/example.js', 'js/')
.sass(__dirname +'/Resources/assets/sass/example.scss', 'css/');
Main webpack file:
let mix = require('laravel-mix');
require('laravel-mix-merge-manifest');
mix.mergeManifest();
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
How can I fix this?
I try to install Bootstrap and Fontawesome to my Laravel (latest version) Project.
composer require laravel/ui --dev
php artisan ui bootstrap
npm install #fortawesome/fontawesome-free
npm install
npm run watch
I encountered this error:
ERROR in ./resources/js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module './src/data'
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
webpack.mix.js is the default file in Laravel release, I never changed it:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
This is my resources/js/app.js:
require('./bootstrap');
My bootstrap.js:
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
What am I missing?
What can I try?
I use Laravel 5.6, with Mix. I want to load a plugin which uses jQuery to my project.
I created a fileuploader.js file :
// see more at http://plugins.krajee.com/file-input#installation
import 'bootstrap-fileinput/js/fileinput';
import 'bootstrap-fileinput/js/locales/fr';
It loads a npm package. In my webpack.mix.js, I have :
mix.autoload({
jquery: ['$', 'window.jQuery']
});
mix
.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/fileuploader.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/plugins/fileuploader.scss', 'public/css')
;
mix.copyDirectory('resources/assets/img', 'public/img');
if (mix.inProduction()) {
mix.version();
}
In my app.js, I have :
import $ from 'jquery';
window.$ = window.jQuery = $;
import './bootstrap';
$(function() {
// some jQuery code
});
I removed this line from bootstrap.js file :
window.$ = window.jQuery = require('jquery');
But when I take a look to /js/fileuploader.js file generated with Webpack, it sill loads the full jQuery code.
The result in my template is :
<script src="http://localhost:8000/js/app.js"></script>
<script src="http://localhost:8000/js/fileupload.js"></script>
<script>
$(function () {
$('input[type="file"]').fileinput({
language: 'fr',
uploadUrl: '/upload',
});
})
</script>
And I got this error :
Uncaught TypeError: $(...).fileinput is not a function
I suppose it's because jQuery (version 3.3.1) is loaded 2 times in both JS files. How can I prevent this ? Thanks
try removing
mix.autoload({
jquery: ['$', 'window.jQuery']
});
I'm using Laravel facing a problem when compiling assets. By default laravel provides a wrapper around webpack which is laravel-mix, laravel-mix using file called webpack.mix.js, and by using npm run dev command, laravel-mixcompile all js files into one webpack bundle js file.
Code of webpack.mix.js:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have a Main.js file which has some jquery code.
Main.js:
;( function( $, window, document, undefined ) {
'use strict';
$(window).on('load', function() {
alert('ready');
});
}
)( jQuery, window, document );
My directory structure is something like this
resources\assets\js
app.js
bootstrap.js
Main.js
Code of app.js:
require('./bootstrap');
Code of bootstrap.js:
try {
window.$ = window.jQuery = require('jquery');// jquery
require('bootstrap');// bootstrap framework js
require('./Main'); // Main.js
} catch (e) {
}
When i type command npm run dev all assets are compile into one file then why my Main.js jquery code which is just an alert popup doesn't execute on the page.
But when i change order of the bootstrap.js file into something like this then my Main.js code is execute.
try {
window.$ = window.jQuery = require('jquery');// jquery
require('./Main'); // Main.js
require('bootstrap');// bootstrap framework js
} catch (e) {
}
Why this thing is happening. Does conflict happen between bootstrap framework js file and Main.js file.
Replying to the tldr in the comments:
There is not any error comes, but when i load my page my Main.js script is not executed
I had this same issue and including the manifest.js and vendor.js solved these issues:
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>