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?
Related
I'm using laravel and vue , but when i try to load the page, this error appear
app.js:1894 Uncaught ReferenceError: vur is not defined
at Module../resources/js/app.js
my webpack file is:
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
my route file is:
import Home from './components/Home';
import About from './components/About';
export default({
mode:'history',
routes:[
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
]
})
Check your app.js and index.js files.You may have spelled vue as vur.It's a typo I think.
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 haven't touched the webpack since the beginning of my project at all, suddenly I get this error.
I'm trying to load the login page and get this error and nothing loads
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (app.js:64)
at app.js:73038
No idea what this is about, this is my webpack.mis.js
const mix = require('laravel-mix');
const path = require('path');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.babelConfig({
plugins: ['#babel/plugin-syntax-dynamic-import'],
})
.version();
I haven't changed anything in my webpack, and it was working before as in showing me the page, all I did was move the User model from app to app/Models and change all the mentions of app/User to app/Models/User.
my web pack.mix.js codes are
mix.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
moment: 'moment'
});
mix.js('resources/js/app.js', 'public/js')
.mix.js('resources/js/theme.js', 'public/js')
.mix.js('resources/js/admin.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/theme.scss', 'public/css')
.sass('resources/sass/admin.scss', 'public/css');
I have this codes in resource/js/theme.js
require('./files/jquery3.3');
require('./files/functions');
require('./files/effect');
I declare some functions in files/functions.js
and use them in files/effect.js
but the browser console gives me this error
Uncaught ReferenceError: 'my_function' is not defined
note: my_function declared in files/functions.js and called in files/effect.js
You need to add file full name i.e. file name + extension
require('./files/jquery3.3.js');
require('./files/functions.js');
require('./files/effect.js');
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