Category : laravel-mix

Recently I’m working with vuejs my project on subdirectory here you can see where my images are not showing which are from public/images/ directory I searched a lot find many solutions but nothing works for me. but locally it’s working fine. code sample Home.vue <div class="widget-bg-image absolute"> <div class="widget-container"> <div class="image"> <img width="629" height="424" src="/images/big-banner/3.png" ..

Read more

I recently tried to compile my files on development platform by using npm run watch & also npm run dev, but both gave me an error given below: [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. configuration.loader should be an object: object { … ..

Read more

You need to display a field from a database as a working link to an external resource. The project is in Laravel + Vue. Since the link currently translates to an address bar generated as an overlay on an existing link: (For example – mydomain.com/http://www.google.com ) <template> … <div> <textarea v-if="showInputs" class="form-control" v-model="content.website" aria-label="Education">{{content.website}}</textarea> <span ..

Read more

I have a small issue with my current configuration using Laravel for the backend, and Vue in the frontend, while my application is built using Laravel mix (6.0). I am using the following simple mix configuration: mix.js("resources/js/app.js", "public/js/app.js") .vue() .version() .extract(); Everything works fine when running npm run watch, and when I launch the production ..

Read more

I have an error when running npm run dev. How do I use Laravel Mix with Vue.js 2 to use Babel to create IE11 compatible source code? (node:11915) UnhandledPromiseRejectionWarning: Error: [BABEL] unknown: Preset /* your preset */ requires a filename to be set when babel is called directly, babel.transform(code, { filename: ‘file.ts’, presets: [/* your ..

Read more

I have setup the project on the subdomain like https://example.com/newapi. Also i have setup the module in the project OrderManagement with command composer require nwidart/laravel-modules it has created all the file structure in the OrderMangement folder. Also i can use the routes with https://example.com/newapi/ordermanagement But facing issue assets with laravel mix and it’s showing the ..

Read more

I recently tried to run npm run dev and also npm run watch but I got an error after 80% got compiled. I tried googling it but didn’t find the solution to it. Below is the error which I get in my console: ERROR in ./resources/sass/frontend/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed ..

Read more

Trying to install the Laravel breeze starter kit. Running npm install, then npm run dev. And on "mix" it give me error "/bin/sh: 1 Cannot fork". Tried: rm -rf node_modules rm package-lock.json yarn.lock npm cache clear –force npm install Not helped My package.json: "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": ..

Read more

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? Sourc..

Read more

I’m trying to import a node module in a custom module i’m creating in public folder. What i’m doing in webpack.mix.js mix.js(‘resources/js/app.js’, ‘public/js’) .vue() .sass(‘resources/sass/app.scss’, ‘public/css’) .js(‘node_modules/normalize-wheel’, ‘public/assets’) .version(); In script file import NormalizeWheel from ‘../normalize-wheel.js’ the error i’m getting Uncaught SyntaxError: The requested module ‘../normalize-wheel.js’ does not provide an export named ‘default’ How can ..

Read more

So I have a JS file that I want to mix and copy and compress using laravel mix, my webpack.mix.js file looks like so: const mix = require(‘laravel-mix’); mix.js(‘resources/js/foo/foo.js’, ‘public/foo.js’); mix.copy(‘public/foo.js’, ‘public/js/foo.js’); mix.version(); The thing is that foo.js has a variable called env which is set to dev on local envs and we set it ..

Read more

I don’t know, how much time I lost looking for solution for this issue. I wanted to use Chart.js in my Laravel project, so I followed instructions described here. composer require fx3costa/laravelchartjs (runned) Fx3costaLaravelChartJsProvidersChartjsServiceProvider::class (added in the right place) npm i chart.js (used to install chart.js) In my controller and blade I used code from ..

Read more

I want to add a few prompt questions in Laravel mix and does its’ jobs based on the developer answers. But with the below codes, the Laravel mix process doesn’t stop and asking the given prompt questions, it skips the prompt questions and shows a message Compiled successfully in 34ms I add these codes in ..

Read more

I am trying to include an external javascript file in my webpack file, but it does not seem to be working. The webpack.mix.js file is as follows; mix.js([ ‘resources/js/app.js’, ‘resources/assets/js/juxtapose.js’ ], ‘public/js’) .react() .postCss(‘resources/assets/css/app.css’, ‘public/css’, [ require(‘tailwindcss’), ]); When i do a npm run dev it runs with no issues, but the functionality is just ..

Read more

I have been trying to dynamically import Vue components and i’m getting an error Compilation error while processing magic comment(-s): /* webpackChunkName: "loading-component */: Invalid or unexpected token What i have done: webpack.mix.js mix.webpackConfig( { output: { publicPath: ‘/’, chunkFilename: ‘js/[name].js’, }, module: { rules: [ { test: /.jsx?$/, exclude: /bower_components/, use: { loader: ‘babel-loader’, ..

Read more

I have a JS plugin with the following structure : (function(global, factory) { typeof exports === ‘object’ && typeof module !== ‘undefined’ ? module.exports = factory() : typeof define === ‘function’ && define.amd ? define(factory) : (global = typeof globalThis !== ‘undefined’ ? globalThis : global || self, global.myPlugin = factory()); }(this, function() { ‘use ..

Read more

Error: Cannot find module webpack.mix while using npm to run dev with webpack ^5.42.0 to compile script with custom mix file, dev script is: "dev-jsAlien": "cross-env NODE_ENV=development BABEL_ENV=development node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js –env.mixfile=webpack.mix.alien" The above script works with webpack ^4.46.0 npm error dump > cross-env NODE_ENV=development BABEL_ENV=development node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js –env.mixfile=webpack.mix.alien Error: Cannot find ..

Read more