I use Vue with Laravel. But I get this error "mix.js() is missing required parameter" when I run
npm run watch.
Here is my code:
const mix = require("laravel-mix");
mix.js("resources/js/app.js", "public/js").vue();
mix.sass("public/assets/scss/style.scss", "public/assets/css");
mix.browserSync("127.0.0.1:8000");
Please share with me how to handle this error.
Change in version works well with laravel 7.3.* see link below
The solution was to change to version ^6.0.6 in package.json and run npm install, as the .vue() call is a new feature in Laravel Mix 6.
"devDependencies": {
// ...
"laravel-mix": "^6.0.6",
// ...
},
Then on webpack.mix.js.
mix.js('resources/js/app.js', 'public/js').vue();
https://nono.ma/assertionerror-mix-js-is-missing-required-parameter-1-entry
Related
Taylor Otwell announced that new Laravel projects now will run with Vite and that Vite is installed by default. I can't seem to be able to run dev environment 'npm run dev'
I installed new laravel project, installed Laravel JetStream with SSR and teams support hit the 'npm install command'.
Every time I run npm run dev it shows this:
And if I open the local link, it shows this:
Why can't I user npm run dev and compile my files?
This is package.json for my brand new laravel app
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build && vite build --ssr"
},
"devDependencies": {
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue3": "^0.6.0",
"#inertiajs/progress": "^0.2.7",
"#inertiajs/server": "^0.1.0",
"#tailwindcss/forms": "^0.5.2",
"#tailwindcss/typography": "^0.5.2",
"#vitejs/plugin-vue": "^2.3.3",
"#vue/server-renderer": "^3.2.31",
"autoprefixer": "^10.4.7",
"axios": "^0.25",
"laravel-vite-plugin": "^0.2.1",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.0",
"vite": "^2.9.11",
"vue": "^3.2.31"
}
}
and if I try hitting 'vite' in the terminal I get this:
If you don't want to use vite but mix instead in your new laravel project, you can just get the usual behavior of npm run dev back with the following changes:
Install Laravel Mix (because by the new installation it is not there anymore):
npm install --save-dev laravel-mix
Create a webpack.mix.js file, if it is not there, and make sure it has the following content:
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', [
//
]);
Update package.json:
"scripts": {
- "dev": "vite",
- "build": "vite build"
+ "dev": "npm run development",
+ "development": "mix",
+ "watch": "mix watch",
+ "watch-poll": "mix watch -- --watch-options-poll=1000",
+ "hot": "mix watch --hot",
+ "prod": "npm run production",
+ "production": "mix --production"
}
Remove vite helper functions (if they are there):
- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
- resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+ resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.mixin({ methods: { route } })
.mount(el);
},
});
Update environment valiables (in .env, VITE_ prefix to MIX_):
- VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Remove Vite and the laravel Plugin
npm remove vite laravel-vite-plugin
Remove the Vite config file:
rm vite.config.js
Remove these paths from .gitignore:
- /public/build
- /storage/ssr
If you created some code already with vite, you must have some more changes in your blade files, check out this article. But if it is a new project, you just good to go.
For anyone experiencing the problem:
With Vite, running npm run dev will only build your frontend and start watching any changes to your code to rebuild automatically.
To actually start your server, you need to run php artisan serve in a separate command window.
Source (See With Laravel section): https://laravel-vite.dev/guide/essentials/development.html#with-laravel
Had the same issue, but none of the mentioned solutions worked for me. Instead I saw an issue with the <script> src's in the head-section of the rendered html.
screenshot of script src's buggy
Added in vite.config.js the following code which solved the issue.
server: {
hmr: {
host: 'localhost',
},
}
Edit:
The issue was reported in laravel's vite-plugin repo and it will be fixed with this PR
I was having the same issue, I did the following and it finally worked!
I did:
Upgraded my Laravel Project to Latest (v9.19.0). Infact i upgraded all my packages to latest one too.
Remove the node_modules and install the dependency using npm install
Make sure you follow the upgrade guides properly.
Run the server using php artisan serve
And run the dev server using npm run dev
If you done properly, it should start the dev server and all your javascript code should compile. (If it succeed, you will see the desired output.)
I fixed the issue in the above steps.
Vite needs an updated node version.
You can download the latest node version then run npm install and npm run dev
To create the server you can use php artisan serve
If you are using laragon as a local deployment you can set the --host flag to the virtual host url of the app ,it worked for me
Try:
.env :
APP_URL=http://localhost:8000
welcome.blade.php :
<head>
<title>my project</title>
#vite(['/resources/js/app.js', '/resources/css/app.css'])
I have a web SPA where I need to refresh the cache with the version() in the mix but I do not know why it does not always work.
My webpack mix is this:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/sb-admin-2.scss', 'public/css');
mix.version();
I run npm run prod to create a new version when I see the manifest in public it always says same thing:
"/js/app.js": "/js/app.js?id=483eeaadc3aea67d8738",
"/css/app.css": "/css/app.css?id=92edc7a3cf0ac26de570",
"/css/sb-admin-2.css": "/css/sb-admin-2.css?id=495b8048a2d714a67e56"
the id does not change, I though that it could be because I did not do any change in the website so I made many changes and I ran again npm run prod and it does not change at all it keeps old version, and that's the problem the browser does not refresh so I wonder what could the problem be?
I am using laravel 6 and Vuejs 2.
I have a fresh Laravel installation. On compiling files using npm run dev VUE I get a file error
"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"
Laravel Verion: "^8.12"
Package.json
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"vue": "^2.5.17",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.10"
}
blade file
<div id="app">
<hello></hello>
</div>
<script src="{{mix('js/app.js')}}"></script>
app.js
require('./bootstrap');
import Vue from 'vue'
Vue.component('hello', require('./hello.vue').default);
const app = new Vue({
el: '#app'
});
Hello.vue
<template>
<div>
Hello World!
</div>
</template>
<script>
export default {
}
</script>
npm run dev
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div>
| Hello World!
as your using laravel-mix 6 it have different config for webpack.mix.js
webpack.mix.js
use .vue()
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').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
ref link https://laravel-mix.com/docs/6.0/upgrade
If anyone still encounters this issue, here how I figure out the cause in my case and it's actually a Laravel mix 6 configuration issue for Vue support.
You can check the documentation for more details : Laravel mix 6 upgrade documentation
But let me explain it in short here...
I was using Laravel mix 6 (you may probably use the same if you created a fresh Laravel 8 project) and according to its official documentation "Laravel Mix 6 ships with support for the latest versions of numerous dependencies, including webpack 5, PostCSS 8, Vue Loader 16, and more". So no need for you to add vue loader although the error states it.
You rather need to tell explicitly Laravel mix 6 to support vue, here what they say "Laravel Mix was originally built to be quite opinionated. One of these opinions was that Vue support should be provided out of the box. Any call to mix.js() would instantly come with the benefit of Vue single-file components.
Though we're not removing Vue support by any stretch, we have extracted Vue to its own "featured flag": mix.vue().
Here what I did.
First option
// You can simply use this
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
Second option
// Or this if you want to extract styles as well
// Feel free to check the documentation for more customisations
mix.js('resources/js/app.js', 'public/js')
.vue({
extractStyles: true,
globalStyles: false
})
.postCss('resources/css/app.css', 'public/css', [
//
]);
First of all, thanks to Paul for this clarification which saved my evening :)
After that the compilation worked for me, but an error appeared in the console when I reloaded the page:
Vue.use is not a function
For those who would be in the same case, in your app.js file, you must replace the line :
window.Vue = require('vue');
With :
window.Vue = require('vue').default;
here i do with the some problem
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
mix.js('resources/js/app.js', 'public/js').vue() .postCss('resources/css/app.css', 'public/css', [ // ]);
Or
npm install vue-template-compiler vue-loader#^15.9.7 --save-dev --legacy-peer-deps
try both..
According to the docs, in order to maintain the directory's structure I should use copyDirectory but I obtain the following:
/webpack.mix.js:16
.copyDirectory('resources/assets/bower', 'public/js');
^
TypeError: mix.js(...).sass(...).copyDirectory is not a function
This is my webpack file:
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.copyDirectory('resources/assets/bower', 'public/js');
Any ideas? Thanks
Nevermid, the docs aren't correct: you should pass false to the copy funcion, as follows:
mix.copy('resources/assets/bower', 'public/js', false);
This way it won't flatten the source directory
I have got the same error message.
TypeError: mix.copyDirectory is not a function
Actually, it's because you were using an old version of Laravel mix that does not support the mix.copyDirectory.
All you have to do is:
npm install laravel-mix#^1.0 --save-dev
npm run dev
I try to start a Laravel 5.4 project without Bootstrap.
After installing Laravel, I edited the following files:
resources/assets/js/app.js
require('./bootstrap');
package.json
...
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1",
"laravel-mix": "^0.7.2",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
...
I've got the following error:
ERROR Failed to compile with 1 errors
error in ./resources/assets/js/app.js
SyntaxError: /Users/.../package.json: Error while parsing JSON - Unexpected end of JSON input
at JSON.parse ()
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Any suggestions?
By default, Laravel 5.4 ships with Bootstrap and Vue.js scaffolding, but not everyone wants to use either of those technologies. With Laravel 5.5 you can run this if you don’t want any scaffolding to be generated out of the box by Laravel:
php artisan preset none
The line
require('./bootstrap')
has nothing to do with the Bootstrap CSS library. It loads the bootstrap.js file, which you will find in your assets. This file serves the purpose of "bootstrapping" your application (front-end). If you want to remove the Bootstrap CSS library from your project you should:
remove it from package.json
remove dependencies within your app layout
remove loading of sources from app.js / bootstrap.js
If you run "npm install" in the command line, bootstrap's sass files will be downloaded. Running "npm uninstall bootstrap-sass" afterwards will get rid of them.
I also wanted to get rid of bootstrap css codes in my laravel project. I opened the file
resources/sass/app.scss
and simply commented out the corresponding line as bellow
// Bootstrap
//#import '~bootstrap/scss/bootstrap';