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
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 one laravel project where i'm going to have multiple backends, i need to do the same thing in frontend, another laravel project where i'm going to have multiple frontends in Vue using the laravel-vue integration, for example, inside resource/js folder to have frontend1, frontend2, etc. Is there any guide or tutorial about how to do this? How to make Folder structure inside resources/js, Laravel Mix configuration, etc.?
thanks!
I did this recently in a project where i created resources/backend/js and resources/frontend/js where i wanted the output to be in public/frontend and public/backend. I stumbled on some issues with the manifest file but got it working in the end.
You can do this by creating a new frontend.mix.js and change the output paths to
const mix = require('laravel-mix');
mix.setPublicPath('public/frontend')
.setResourceRoot('/frontend')
mix.js('resources/frontend/js/app.js', 'public/frontend/js')
.sass('resources/frontend/sass/app.scss', 'public/frontend/css')
You will need to create a few new command to use frontend.mix.js
"scripts": {
"frontend-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --env.mixfile=frontend.mix --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"frontend-watch": "npm run frontend-dev -- --watch",
}
Inside the original webpack.mix.js file i changed the paths to backend and left the commands untouched.
Hope this helps you.
This is the error that it shows to me, I put in the webpack.mix.js, the parameter 1 of scss to list of scss I would use in the app:
> # watch /media/ricardo/FILES/projects/Laravel/costurita-etl
> npm run development -- --watch
> # development /media/ricardo/FILES/projects/Laravel/costurita-etl
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
assert.js:49
throw new AssertionError(obj);
^
AssertionError [ERR_ASSERTION]: mix.sass() is missing required parameter 1: src
at Function.preprocessor (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/Verify.js:32:9)
at Sass.preprocess (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/Preprocessor.js:134:16)
at Sass.register (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/Sass.js:12:21)
at Api.mix.(anonymous function).args [as sass] (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/ComponentFactory.js:98:53)
at Object.<anonymous> (/media/ricardo/FILES/projects/Laravel/costurita-etl/webpack.mix.js:24:2)
at Module._compile (module.js:649:30)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
[The usual npm errors...]
This is webpack.mix.js:
let mix = require('laravel-mix');
mix.js([
'resources/assets/js/app.js',
'resources/assets/js/vague.js',
'resources/assets/js/freeze_header.js',
'node_modules/chart.js/src/chart.js',
'node_modules/jquery/src/jquery.js',
'node_modules/popper.js/dist/popper.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
], 'public/js').sass([
'resources/assets/sass/app.scss',
'node_modules/bootstrap/dist/css/bootstrap.css',
], 'public/css');
This is because .sass is a transpiler command and not a combiner command, which you're treating it like .js, and it is not.
Instead, app.scss should be the single source of truth for all of it's dependencies, which you can use #import to bring those dependencies into your sass file; observe:
// app.scss
#import '~bootstrap/scss/src/bootstrap-grid';
#import '~bootstrap/scss/src/bootstrap-reboot';
#import '~bootstrap/scss/src/bootstrap';
// the rest of your code
The ~ is a reference to the node_modules directory, so you can omit hard coding the path. You also don't need to declare the .scss extension here, either.
Finally, you would simply pass the path to your app.scss as a string argument to the .sass command:
.sass('resources/assets/sass/app.scss')
even i got the same error...below code in webpack.mix.js helped me to solve it.
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
On a project using Laravel 5.4 and the new Laravel Mix, I have a weird error when pushing live a website.
When I'm in local, and I run the command npm run dev everything is working perfectly. dev is the following :
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
This command execute webpack (which I am not very familiar with) and convert sass, js, coffe, etc... to vanilla CSS and JS.
The problem is happening when live like I said when the command is npm run production. production is the following :
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
The traduction is happening correctly but when I go on the website I get the following error :
Uncaught ReferenceError: Invalid left-hand side expression in postfix operation
When I dig a little in the js I find this weird thing happening :
for(var n=t.length;0<n;0++)
So I have 0++ that would need to be n++ and when I make research on the file, I get 115 occurence of the 0++.
I think it is coming from webpack ? a misconfiguration or something ?
Thanks in advance for your help !