Passing in environment variables after upgrade to Laravel MIX 6 - laravel-mix

Before upgrade to Laravel-Mix 6:
Laravel-Mix version: 5.0.9 (supports Webpack 4)
NPM version: 6.14.5
With this laravel mix version I was able to pass in environment variables to webpack.mix.js by running the npm scripts defined in package.json:
"dev": "cross-env NODE_ENV=development ENV_FILE=./.env.local node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
...
"production": "cross-env NODE_ENV=production ENV_FILE=./.env.production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
Then I could access the variable in webpack.mix.js, whose value depends on whether I was running on production or development mode:
let mix = require("laravel-mix");
mix.env(process.env.ENV_FILE);
This worked fine!
After upgrade to Laravel-Mix 6:
Laravel Mix version: 6.0.19 (Webpack 5 supported)
NPM version: 6.14.5
I followed the recommendations from the laravel documentation including the update of the npm scripts...
Following the instructions on the documentation how to pass in environment variables to Webpack CLI (please refer to https://laravel-mix.com/docs/6.0/cli#pass-options-to-webpack-cli), the npm scripts where then changed as follows:
"dev": "mix -- --env ENV_FILE=./.env.local",
"production": "mix --production -- --env ENV_FILE=./.env.production"
The problem is, that I cannot access the environment variable in webpack.mix.js anymore via process.env.ENV_FILE. Its value is undefined...
I already checked out in node_modules/laravel-mix/setup/webpack.config.js through console.log, that the variable indeed was passed in:
const { assertSupportedNodeVersion } = require('../src/Engine');
module.exports = async (config) => {
assertSupportedNodeVersion();
console.log("ENV_FILE: ", config.ENV_FILE);
const mix = require('../src/Mix').primary;
require(mix.paths.mix());
await mix.installDependencies();
await mix.init();
return mix.build();
};
And by running for instance npm run dev I can see the value logged out:
mix -- --env ENV_FILE=./.env.local
ENV_FILE: ./.env.local
So the question is, why I cannot access the environment variable in webpack.mix.js, and more importantly, how can I do it.
Thanks in advance for the help!

Laravel Mix 6 / Customize the Mix Configuration Path
There is no need to pass settings via env params anymore - simply specify different webpack.mix.js files for each script variation using --mix-config option and incorporate any additional settings (statically) into these:
"dev": "mix --mix-config=webpack.mix.dev.js",
"production": "mix --mix-config=webpack.mix.prod.js --production"
etc. Of course you can then still require a common webpack.mix.js containing the actual mix logic.

Related

How to minify JS in laravel mix without add suffix .min.js?

I tried use minify method like below:
mix.minify('public/js/folder/script1.js');
mix.minify('public/js/folder/script2.js');
but it will create script1.min.js and script2.min.js
I also tried :
mix.minify('public/js/folder/script1.js', 'public/js/folder/script1.js');
mix.minify('public/js/folder/script2.js', 'public/js/folder/script2.js');
and still create same files. How to minify without add suffix .min.js?
I can't found laravel-mix solution, so I used another solution using uglifyjs-folder :
npm install uglifyjs-folder --save-dev
add && uglifyjs-folder public/js -e -x .js -o public/js to package.js inside prod script like below:
"scripts": {
"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 && uglifyjs-folder public/js -e -x .js -o public/js",
"production": "mix --production"
},
it will minify all .js files on public/js folder after running npm run prod.
Maybe it's not the best practice, but it worked for existing project that already bad practice;

Getting error when compiling with Laravel Mix Vue

I'm trying simple to-do in laravel vue.
This is my code from ./resources/js/app.js
require('./bootstrap');
import Vue from 'vue'
import App from './vue/app'
const chatapp = new Vue({
el: '#chatdiv',
components: { App }
});
I have created vue folder in ./resources/js and added app.vue file in that.
Now when I try to run 'npm run development' it gives me following error
> # development D:\test\laravue
> mix
i Compiling Mix
√ Mix: Compiled with some errors in 9.45s
ERROR in ./resources/js/app.js 4:0-27
Module not found: Error: Can't resolve 'vue/app' in 'D:\test\laravue\resources\js'
webpack compiled with 1 error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\prajw\AppData\Roaming\npm-cache\_logs\2021-02-25T13_46_36_740Z-debug.log
My package.json file contains this
{
"private": true,
"scripts": {
"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"
},
"devDependencies": {
"axios": "^0.21",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14"
},
"dependencies": {
"vue": "^2.6.12"
}
}
Can someone help me to resolve this error? Thank you.
Vue doesnt have app folder in it, you can't import App from ./vue/app because vue doesn't have app.
You can create App.vue near your app.js, then in app.js you can import it
import App from ./App
Your App.vue can be like:
<template>
<div>Hello from App!</div>
</template>
<script>
export default {
name: "App"
}
</script>

Install vue 3.0 in laravel

Is there a way to install vue 3.0 to Laravel 8? When I run
npm install vue#next
It started installing Vue 3.0, but for some reason it also began installing vue-template-compiler v2.6.12. The following appears:
Additional dependencies must be installed. This will only take a moment.
Running: npm install vue-template-compiler --save-dev --production=false
And then when I run
npm run dev
The following error appears:
vue#3.0.0 (C:\wamp64\www\vue-sample\node_modules\vue\index.js)
vue-template-compiler#2.6.12 (C:\wamp64\www\vue-sample\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same
version for both. If you are using vue-loader#>=10.0, simply update
vue-template-compiler. If you are using vue-loader#<10.0 or vueify,
re-installing vue-loader/vueify should bump vue-template-compiler to
the latest.
# ./resources/js/app.js 19:35-79 # multi ./resources/js/app.js
./resources/sass/app.scss
I am completely new in Vue. What should I do?
Update 2022
For those who prefer Vite, there's a tool called Laravel Vite which is a project based on PHP package, Vite plugin and preset, you could install it as follows :
npx #preset/cli apply laravel:vite
This removes the default config in the Laravel fresh project.
For further details please check the different section in official docs
Update October 2020
Now with laravel-mix v6 you could run Vue 3 code in Laravel App:
1. Installation :
npm i -D laravel-mix#next vue#next #vue/compiler-sfc vue-loader#next
then
npm i
before doing that try to remove the following dependencies from package.json which some of them are added by php artisan ui vue :
vue
vue-template-compiler
laravel-mix
2. Config:
in the package.json change the scripts to the following ones:
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production"
}
webpack.mix.js should contain :
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue();
The minimum content of resources/js/app.js
import { createApp } from 'vue';
import App from './components/App.vue'
createApp(App).mount("#app")
In order to avoid this confusing steps clone this REPOSITORY and start coding.
OLD ANSWER
Laravel doesn't support vue 3 yet, but you could try out laravel-mix-vue3 :
Installation :
npm install #types/webpack-env #vue/compiler-sfc vue-loader#next laravel-mix-vue3 --save-dev
Usage :
Configure in webpack.mix.js as follows :
const mix = require("laravel-mix");
require("laravel-mix-vue3");
mix.vue3("resources/js/app.js", "public/js");
Update
Laravel mix v6 is now in beta, use the guide here to upgrade and use Vue v3.
Old answer
You don't need to use the vue3 plugin. I got working as follows:
Install Vue3, Vue3 loader and the compiler:
npm install vue#next vue-loader#next #vue/compiler-sfc
Then in your app.js import vue from the esm bundle:
import { createApp } from 'vue/dist/vue.esm-bundler.js';
Then create your app and mount it:
createApp({}).mount('#app')
Now just build your assets as usual with mix
npm run dev

Requiring a npm package in laravel mix?

I've seen this question being answered a couple of times on the net. However, I'm just not getting it to work. I hope you can help.
I'm using Laravel 5.5 with Laravel Mix. Instead of manually loading some of my needed js files into the specific directories, I want to install the packages via npm and require them in laravel mix.
This works with bootstrap out of the box. I swapped the 3.3.7 version for the 4.0.0 alpha6.
npm install bootstrap-v4-dev -D
Then in resources/assets/js/bootstrap.js I changed it to look like this
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-v4-dev');
} catch (e) {}
and it works. I can run npm run dev just fine. Now, I want to do the exact same thing with another npm package. So I do npm install now-ui-kit -D my package.json now looks like this
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-v4-dev": "^4.0.0-alpha.6",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"now-ui-kit": "^1.0.1",
"popper.js": "^1.11.1",
"vue": "^2.1.10"
},
"dependencies": {
"now-ui-kit": "^1.0.1"
}
}
Then in the bootstrap.js file, I add require('now-ui-kit');, but now when I try to compile, I get the following error:
ERROR in ./resources/assets/js/bootstrap.js
Module not found: Error: Can't resolve 'now-ui-kit' in '/home/vagrant/code/user/resources/assets/js'
# ./resources/assets/js/bootstrap.js 15:0-21
# ./resources/assets/js/app.js
# multi ./resources/assets/js/app.js
I also tried placing the require('now-ui-kit'); in app.js or even in webpack.mix.js..
Nothing worked, and I really don't get what I'm doing wrong.. Could someone help?
Follow these steps:
Install npm package let install jQuery npm i jquery.
Create a .js file say resources/js/package.js
Now open webpack.mix.js add package.js in webpack.mix.js
mix.js([
'resources/js/package.js',
'resources/js/otherJsFile.js'
], 'js/app.js').extract([
// Extract packages from node_modules to vendor.js
'jquery'
])
Write this in resources/js/package.js :
import $ from 'jquery';
Finally use js/vendor.js, js/app.js on .blade file.
Now you can jQuery on your website imported from node_modules

Unexpected character '#'

I recently switched to laravel 5.4.
When i tried to run npm run watch I get the following error --
I didn't even done any edit in my sass file.
Sass File looks like this ---
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
How can i solve this?
My package.json file looks like this --
{
"private": true,
"scripts": {
"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",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"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"
},
"devDependencies": {
"axios": "^0.15.2",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.0",
"laravel-mix": "^0.5.0",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"lodash": "^4.16.2",
"vue": "^2.0.1"
}
}
This is a current issue with Laravel Mix. There is an open issue discussion on GitHub for this.
https://github.com/JeffreyWay/laravel-mix/issues/200
According to the some of the users you could use Laravel Mix version 0.5.8 and your problem would go away. Edit your package.json file to have "laravel-mix": "0.5.8"
I recommend using this until the issue is resolved.
This seems to be an issue for windows users.
Edit
As of this moment the issues seems to have been resolved. You need to pull in the latest version of Mix and also add "vue-loader": "10.1.0" to your package.json file.
Make sure you have sass installed on your computer. If you don't have it installed, instructions are here: http://sass-lang.com/install.
Then you need to make sure sass is also installed in the project. Reading your package.json it seems you have less instead.
Run: npm i --save-dev sass
By default your project comes with less installed. Locate the file webpack.mix.js from the root folder. find the following line
mix.less('resources/assets/less/app.less', 'public/css')
.less('resources/assets/less/admin.less', 'public/css');
And change it to
mix.sass('resources/assets/sass/app.sass', 'public/css')
.sass('resources/assets/sass/admin.sass', 'public/css/admin');
If you don't see those exact same lines, find something similar.

Resources