Questions tagged [laravel-mix]
Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your applications. Mix supports several common CSS and JavaScript pre-processors.
1,327
questions
2
votes
2
answers
38
views
What is the correct way to add a NPM package to a Laravel 9 project with Laravel Mix?
Laravel Mix introduces itself as
An elegant wrapper around Webpack for the 80% use case.
I believe I have a widespread use case, and I want to know if the 80% covers this and how to do it right. It ...
0
votes
1
answer
18
views
CSS Import rule does not work on apache subfolder
I am creating a Laravel app with laravel-mix.
The problem
I did import font-awesome in my resources/css/app.css file with the following command.
@import '~@fortawesome/fontawesome-free/css/fontawesome'...
1
vote
0
answers
50
views
AlpineJs data in a module not working with laravel mix
I have a module named player to re use data for alpine. its giving me Alpine Expression Error: player is not defined.
I have tried to remove defer from app.js script tag and moved it from <head> ...
-1
votes
0
answers
41
views
Laravel mix bundle is too big
I use react, laravel and inertia.js for my project, but the bundle is too big after minification, 6MiB in dev and 877KiB in production.
Webpack bundle analyzer
webpack.mix.js
const mix = require('...
0
votes
1
answer
24
views
Uncaught Error: (mdc-auto-init) Could not find constructor in registry for MDCTabBar
I'm trying to use Laravel Mix to include Material Components Web in my Laravel 8 project. I've installed the NPM packages and I am able to successfully compile using mix. However when I run the ...
0
votes
1
answer
62
views
Larvel-mix + Pinia throws an error: getActivePinia was called with no active Pinia
I am using laravel-mix to bundle my Vue 3 and Pinia code. My app.js looks like this:
require('./bootstrap');
import { createApp } from 'vue'
import { createPinia } from "pinia";
const ...
0
votes
1
answer
71
views
there is no webpack.mix.js file in my laravel project root
my laravel version is 9.22.1
I want to install tailwindcss in Laravel.
Do I have to manually install webpack and laravel-mix?
0
votes
0
answers
36
views
+50
How to define component location with VueJS async components and webpack
I've introduced async VueJS components to a Laravel project which is being complied with webpack.
All complied assets are being placed into a subfolder (mix) which is defined in webpack.mix.js as `mix....
0
votes
0
answers
35
views
Browser Clear Cache for Tailwind CSS Production
Everytime I release a new page for my laravel application, some tailwind classes didn't work. I need to clear cache from the browser first, then those classes works. It applies to everyone that ...
1
vote
0
answers
36
views
Relative path(in CSS file) in Laravel mix
I have following file structure:
File structure
example/
├── public/
│ ├── css
│ │ └── home
│ │ ├── app.css
│ │ └── app.css.map
│ ├── images
│ │ ├── a.jpg
│ │ └── ...
0
votes
0
answers
15
views
ImageTool is not defined after compilling webpack
I use ImageTool plugin for EditorJS.
But I need to change ImageTool and compile.
ImageTool (index.js):
export default class ImageTool {
static get toolbox() {
...
}
...
webpack.mix.js
mix.js('...
0
votes
1
answer
39
views
Cannot run 'npm run dev' after install laravel-mix-workbox
I got an error when running 'npm run dev' after installing laravel-mix-workbox.
Here's the error
enter image description here
[webpack-cli] Error: Cannot find module 'D:\Documents\Tolong Ya Allah\...
0
votes
0
answers
10
views
cannot access node if I am not root and I cannot use it either
When I run this command as root node -v I get v18.6.0
When I run the same command without root I get bash: /usr/bin/node: No such file or directory. \ When I run this command node -v I get8.13.2\ ...
0
votes
0
answers
18
views
Laravel Mix, React and TS: 'React.StrictMode' cannot be used as a JSX component
I have a create-react-app react app, which I want to transfer to laravel mix. I tried to revert to react 17, reinstall node_modules and package-lock, use yarn, delete cache and reinstall, use ...
0
votes
0
answers
15
views
mix.js() is missing required parameter
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("...
0
votes
0
answers
57
views
"Cannot find module 'libnpx'" error when npx mix command is run
I have recently started learning and attempting to use the npx mix commands but whenever I try to execute the command it returns this error:
node:internal/modules/cjs/loader:949
throw err;
^
...
0
votes
0
answers
31
views
Laravel Mix Sourcemaps with npm run dev
I´m compiling SASS file with Laravel 8 mix:
// SASS/CSS files
mix.sass('resources/assets/scss/app.scss','public/assets/css')
.sourceMaps(false).version();
However, the .map file is only generated ...
0
votes
0
answers
55
views
Laravel mix is not building Vue 3 TS assets
I have a fresh Laravel 9 app with Vue 3 SPA built with TS (using Metronic 8.1 template) and I'm using webpack. Whenever I try to build the assets, it stays stuck at 12% and then does absolutely ...
0
votes
1
answer
408
views
Why Laravel does not load Tailwind css styles installed with Laravel Breeze Starter Kit?
I have a Laravel 8 project, with PHP7 and wanted to try out Laravel Breeze, but after installing according to Laravel Documentation, Tailwind styles are not being reflected on my login and register ...
1
vote
0
answers
58
views
Why does Laravel mix create a new folder with mix-manifest.json after npm run dev command and gives the error 500
I hope you are doing well
I changed public folder to public_html folder. After executing this command { npm run dev } A new public folder is created and the mix-manifest.json file is placed in it and ...
-1
votes
1
answer
189
views
I Got stuck with Laravel Starter Kit Breeze with Vue
Why Starter Kit of Laravel Breeze Vue is not working with Laravel Framework 8.83.17?
Is it occurring due to conflict of webpack.mix.js and vite.config.js? Because project has webpack by default but ...
0
votes
0
answers
24
views
How to compile 2 React applications in 1 Laravel-mix configuration?
When I do this, my index-react app works fine:
mix.js("resources/js/visitor/index.js", "public/js/visitor/index.js")
.js("resources/js/visitor/login.js", "public/js/visitor/login.js")
.js("...
0
votes
1
answer
157
views
`npm run` giving permission denied
I've started facing an issue today which was not occurring before and no code has been changed on my end.
I'm using Laravel 8 with Laravel Mix and when I run npm run prod I keep getting the following:
...
0
votes
1
answer
67
views
Laravel mix: Compiling all scss files in one line
I've been working on a laravel project and I've had many .scss files in my resource folder. So usually I would just write them like this
const mix = require('laravel-mix');
/*
|----------------------...
0
votes
0
answers
26
views
laravel is unable to get primericons from localhost
I wanted to integrate primereact / primeicons in my Laravel project. But having a bit of a strange error.
The error shows in the console when I run the project:
http://localhost/fonts/vendor/...
0
votes
1
answer
41
views
How to calling javascriprt function in laravel blade after mix
in here i have stuck mind and cannot found how to solve this
i have a file app.js & form.js
in app.js i have some code like:
require('bootsrap');
require('./form.js');
in form.js i have function ...
1
vote
1
answer
32
views
npm run dev generates wrong css code from scss file
I have a small project in Laravel, and I'm using npm run dev to compile a scss file, but the css file that is generated has an error, now I'll show you.
This is the scss code
.nav-link {
color: $...
0
votes
1
answer
34
views
Vue3 app instance being created but not mounted
I'm integrating Vue3 to handle reactivity of a specific page of a webapp, so it's not a spa.
Vue instance is being created, but not mounted, nor the created() method is being called upon creation.
I'm ...
0
votes
0
answers
144
views
Laravel 9 mix : How to use async await componnent?
I don't find anywere in the web someone to explain how to add exoperiment await componnent to laravel mix.
My error :
ERROR in ./resources/js/departements_search.js
Module parse failed: The top-level-...
0
votes
0
answers
59
views
laravel-mix error with typescript project
I have developed a react project which separately works fine. Now, I want to use it as a Laravel project ui. When I use Laravel-mix for mixing react files, i get an error as below:
Module build failed ...
1
vote
0
answers
79
views
Import only needed Fontawesome Icons with Laravel Mix
i'm using the following Code in my bootstrap.js in Laravel, following the solution: How to import individual icons with FontAwesome v6
import { library, dom, config } from "@fortawesome/...
0
votes
0
answers
20
views
MJML converts links in email clients to mjt.lu
Laravel-mix-mjml plugin converts href links. All links work fine except one link which is a form with post request. It doesn't pass the parameters. In the browser the links are not converted. How can ...
1
vote
0
answers
94
views
The Mix manifest does not exist. (View: /media/Disk2/project1/resources/views/projects/assets.blade.php)
The manifest-json file exist in /public/manifest-json.js, but application shows the error like
The Mix manifest does not exist. (View: >/media/Disk2/project1/resources/views/projects/assets.blade....
1
vote
0
answers
385
views
Suddenly npm run dev is not working on Laravel project (webpack-cli) [closed]
I'm facing problem with laravel+vue project.
as usual I tried the command to compile and check UI.
composer install
npm install (some messages printed such as waring or else)
npm run dev
but there ...
0
votes
1
answer
40
views
Unable to make click event to work on javascript
I'm trying to select all the button with the class ".add-to-cart" using the querySelectorAll function but I am not able to generate the MouseEvent in the console.
HTML
<section class=&...
0
votes
1
answer
95
views
npm run watch removes content in mix.manifest.json
Please help. I am developing a project with Laravel and Vuejs. When I do npm run watch, contect is removed from mix.manifest.json and I see only 2 lines.
This is my modified mix.manifest.json
{
...
0
votes
0
answers
127
views
Laravel Mix error when run 'npm run dev'.. Error: Cannot find module './.config/babel.config'
I have a Laravel codebase, and for some reason, I made some modifications to the javascript frontend files (assets), unfortunately, when I try to recompile them using Larvel Mix I get this error shown ...
1
vote
0
answers
137
views
Laravel Mix Watch Compiling/Emitting All Files
I've done some digging but I can't seem to find a solution to my issue. I would essentially like webpack/mix to only compile the file that has been edited instead of what I think it's doing and ...
0
votes
1
answer
15
views
How to exclude spe.js files from mix.js()
I currently have this:
mix.js("./enterpath/**/*.js", "../../path/to/build/build.js");
We recently started to introduce tests in those folders for each js file test.spec.js
But now ...
0
votes
0
answers
29
views
Laravel mix compile progress stuck (WSL)
I'm not sure if there is an issue here but it's been bothering me for a while. Whenever I'm using Laravel mix the various progress bars never complete and there are big gaps in the output, everything ...
0
votes
0
answers
88
views
Use environment variables in Laravel Nova
I am trying to follow: https://laravel.com/docs/9.x/mix#environment-variables
My project setup is
Laravel Framework 8.4
Php 7.4
Laravel Nova 3.0
.vue file in /nova-components/Nova-Component-Name/...
1
vote
0
answers
52
views
Some Bootstrap 5 colors are not working compled with Laravel Mix
I am integrating Bootstrap 5 into my Laravel project. I installed Bootstrap with NPM and complied with Laravel Mix, and it's working. However, some extra colors like "bg-indigo" and "bg-...
0
votes
1
answer
153
views
Specify the order of scripts in Laravel Mix
I'm trying to combine two JS scripts into one file. One is a third-party library, and the other is some custom js. No matter how I specify the scripts in the mix.js array, it always puts the custom.js ...
0
votes
2
answers
69
views
How do I fix "jQuery is not defined" error?
I am compiling my JavaScript code using Laravel Mix.
This is my JS code:
import $ from 'jquery';
window.$ = window.jQuery = $;
I have also tried:
import {$,jQuery} from 'jquery';
window.$ = $;
window....
0
votes
0
answers
29
views
Laravel mix function inserts local paths on production server
I have a Laravel application where I use the mix function in my blade templates to include my css and js files like this:
<script src="{{ mix('js/app.js') }}"></script>
This ...
0
votes
0
answers
46
views
Laravel Mix v4.0 | non scoped style in the component was all merged to public/css/app.css
I am trying to upgrade Laravel Mix in my Laravel project from v2.x to v4.x
Everything works fine in v2.x
I have multiple components declared globally which is only called on specific pages
app.js
...
0
votes
0
answers
28
views
How to place a loading when downloading a file?
I have a conflict that when I use the following code, I don't understand how to show the alert with a loading from SweetAlert2, because if I place it after the windows.location it appears mini seconds ...
0
votes
0
answers
29
views
Allow comments when compiling sass with Laravel mix in production
Laravel mix removes all comments (except the ones formatted with /*!) when compiling sass into css on production.
Our CMS 'Umbraco' needs a specific comment format preceding css-selectors though.
e.g. ...
1
vote
1
answer
170
views
Why my web page is blank in laravel vue app?
I have installed vue in laravel and then run command npm run watch with php artisan serve. But when loading the page nothing appears.
Whats the problem ? There is no error.
main.js
import { createApp }...
1
vote
1
answer
5k
views
Module warning (from ./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js):
I am trying to install the laravel breeze package for default authentication.
Laravel mix error after npm run dev. I am in Laravel 9
WARNING in ./resources/css/app.css
(./node_modules/css-loader/...