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.
Related
I have searched and searched and can't seem to find a solution to my problem.
I have taken the following steps:
\\Webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
},
},
});
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
mix.browserSync('127.0.0.1:8008');
And then in my app.js I have
\\app.js
require('./bootstrap');
import Vue from 'vue'
// Ziggy start here
import route from 'ziggy';
import { Ziggy } from './ziggy';
Vue.mixin({
methods: {
route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, config),
},
});
// ziggy end here
import VendorLoginForm from './vue/components/vendors/auth/VendorLoginForm'
import VendorRegisterForm from './vue/components/vendors/auth/VendorRegisterForm'
import EditVendorProfile from './vue/components/vendors/profile/EditVendorProfile'
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate/dist/vee-validate.full.esm';
extend("password", {
message: "{_field_} must be at least 10 characters long, contain one uppercase, one lowercase, and one number.",
validate: value => {
const strong_password = new RegExp(
"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{10,})"
); // regex to check our strong password
return strong_password.test(value); //Test the regex. Test function returns a true or false value.
}
});
import './scripts/validators'
Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('extend', extend);
const app = new Vue({
el: '#vue-app',
components: { VendorLoginForm, VendorRegisterForm, EditVendorProfile }
});
I have ran the php artisan command to generate the ziggy.js and it seems to be working fine when I Ctrl+click it.
However when I got into my component to try to use route as below
mounted() {
console.log(this.route('home.page'))
},
I get the error:
app.js:51783 TypeError: Cannot call a class as a function
at _classCallCheck (app.js:3612)
at Route (app.js:3630)
at VueComponent.route (app.js:3345)
at VueComponent.mounted (app.cbfbd1ac1b8410f1ce58.hot-update.js:172)
at invokeWithErrorHandling (app.js:51749)
at callHook (app.js:54109)
at Object.insert (app.js:53032)
at invokeInsertHook (app.js:56234)
at VueComponent.patch [as __patch__] (app.js:56453)
at VueComponent.Vue._update (app.js:53838)
this was a nightmare when I was working with Ziggy at first time but I resolved my issue by
after creating ziggy.js in resources folder php artisan ziggy:generate
edit my webpack.mix.js file
const mix = require('laravel-mix');
const path = require('path');
/*
|--------------------------------------------------------------------------
| 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.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
resolve: {
alias: {
ziggy: path.resolve('vendor/tightenco/ziggy/dist'),//Note we point to dist folder
},
},
});
then in App.js
import route from 'ziggy';
import {
Ziggy
} from './ziggy';
Vue.mixin({
methods: {
route: (name, params, absolute) => route(name, params, absolute, Ziggy)
}
});
then you can use route in your components
console.log(route("home"));
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.
In a new Laravel project created by the installer with the Jetstream option resources/js/app.js has a line that reads:
Vue.mixin({ methods: { route } });
PHPStorm reports that route is an unresolved variable or type. This happens, PHPStorm can be wrong. In a newly created application this does not cause an error.
However, when I upgraded an existing project to Laravel 8.10.0 and installed Jetstream via composer this does cause and issue. When running this npm run dev does not error, but the browser will report app.js:44258 Uncaught ReferenceError: route is not defined.
I can find no difference in app.js or bootstrap.js that would cause this. Where does this get imported or included so that I can check if it was done correctly in my upgrade?
The newly created app and the update both create a Blade template that includes the #routes directive. As I was comparing existing files I did not notice this difference.
This can be corrected by including the #routes directive in your blade template prior to the main scripts being loaded, as documented in the installation guide for ziggy.
With the suggestion of ToothlessRebel, this is how I solved my error :
Step 1 command line :
composer require tightenco/ziggy
npm install ziggy-js
php artisan ziggy:generate "resources/js/ziggy.js"
step 2 : modify webpack.mix.js :
mix.js('resources/js/app.js', 'public/js')
...
.webpackConfig(require('./webpack.config'));
And in ./webpack.config :
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
},
},
};
Step 3 : app.js :
import route from 'ziggy';
import {
Ziggy
} from './ziggy';
...
Vue.mixin({
methods: {
route: (name, params, absolute) => route(name, params, absolute, Ziggy),
},
});
...
new Vue({
el: "#app",
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
},
}),
});
and finally a command : npm run dev
So, my dashboard and all mixin/ziggy routes are working...
Not anymore my vue-router routes ... I guess I have a conflit I have to resolve, but it's an other problem
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?
In Laravel version 6 the follwing error happens with vue in the console:
app.js:24703 Uncaught ReferenceError: require is not defined
at app.js:24703
the error points to:
require('./bootstrap');
Webpack.mix.js:
mix.scripts([
'resources/js/jquery-3.4.1.js',
'resources/js/bootstrap.min.js',
'resources/js/toastr.js',
'resources/js/vue.js',
'resources/js/axios.js',
'resources/js/app.js'
], 'public/js/app.js')
.styles([
'resources/css/bootstrap.min.css',
'resources/css/toastr.css'
], 'public/css/app.css');
It works fine VUEJS for me but it doesn’t allow me to add components
Also another thing that I notice is that this error disables me vue devtools.
The code is newly installed, both the Laravel and Vue project and if I create a new project I get the same error.
require('./bootstrap');
window.Vue = require('vue');
Vue.component('message', require('./components/message.vue').default);
const app = new Vue({
el: '#app',
data:{
message: ''
},
methods:{
send(){
if(this.message.length !=0){
console.log(this.message);
}
}
}
});
What am I doing wrong?
It sounds like, somehow, the file is given to the browser hasn't been compiled.
You need to change the configuration Webpack.mix.js
You can try change mix.scripts([]) on mix.js([]) and add .vue().
It helped me.
mix.js([
'resources/js/jquery-3.4.1.js',
'resources/js/bootstrap.min.js',
'resources/js/toastr.js',
'resources/js/vue.js',
'resources/js/axios.js',
'resources/js/app.js'
], 'public/js/app.js') .vue();