Using Laravel Homestead with Vagrant, I've just spawned a new laravel project. During a fresh npm install to make use of vue and all other default front-end libraries Laravel ships with, I got the following warning:
npm WARN deprecated gulp-util#3.0.8: gulp-util is deprecated - replace
it, following the guidelines at
https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
Initially i thought nothing of this warning, but after quickly setting up the default scaffolded Vue example environment Laravel ships with and running the app in the browser, i get the following console error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <ExampleComponent>
<Root>
HTML
<!doctype html>
<html class="en" lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
</html>
APP.JS
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
PACKAGE.JSON
{
"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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"popper.js": "^1.12",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"vue": "^2.5.7"
}
}
Laravel-Mix JS
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
What seems to be the issue?
Ok, so I went on and installed a fresh copy as well. And I got the same error (except I didn't get gulp deprecation notice, so that must be something you have installed globally probably).
As per this answer I then added .default after require statement in app.js and it started working:
...
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
...
And since require(..) is pre-ES6 I recommend doing it with ES6 syntax instead:
import Vue from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
window.Vue = Vue;
Vue.component('example-component', ExampleComponent);
const app = new Vue({
el: '#app'
});
Related
When I run npm run watch and update my source .js and .scss assets, the compilation is run automatically as expected. When I update the webpack.mix.js file, the changes are NOT compiled automatically.
Is this something that v6 doesn't support? Because v5 did work as expected.
The config:
const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.sass('resources/css/app.scss', 'public/css')
.version()
package.json:
{
...
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production"
}
...
}
Weird, it works for me. Have you tried npm run watch-poll instead? Are you running the latest version of Laravel Mix?
"laravel-mix": "^6.0.11",
Unrelated, you may want to update your package.json to the following if you're using Laravel Mix 6.
"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"
},
According to 8.x Laravel Docs...
Webpack may not be able to detect your file changes in certain local
development environments. If this is the case on your system, consider
using the watch-poll command.
I made the basic installation from Vue.JS in my Laravel project, this is my package.json
{
"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": "npm run development -- --watch",
"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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
}
}
So I run this code that everyone does after installation npm run install && npm run dev for the mix from Laravel generate the files, every tutorial say that I must put this in the footer from my main file
<script src="{{ asset('js/app.js') }}"></script>
And always say that the file doesn't exist, it is true because when I run this command from mix above, this simple make a js and a css folder in a new public folder, this is the right approach? because I don't see any tutorial that this command makes a public folder, see the image below:
So when I explicitly put this path:
<script src="{{ asset('public/js/app.js') }}"></script>
My Vue.js is loaded and I see the default text from Vue.js in console, but when I put the template from this file TesteFood.vue
<template>
<h1>Testando VUE</h1>
</template>
Is not showing and I make this command too npm run watch no success.
Try the mix helper function:
<script src="{{ mix('js/app.js') }}"></script>
I simply reinstall all my Laravel and install Vue.js and don't move the public folder and all is working fine.
Thank you all!
when you install the laravel 6, then run this command composer require laravel/ui --dev for integrating all vue js dependencies, then create your component and register that in app.js file like this :
Vue.component('teste-food', require('./components/TesteFood.vue'));
and then run npm run dev for compiling once the codes or npm run watch for compiling anythime you add some vue.js file or sass in your porject.
In this steps you should see your component.
I'm using laravel echo with pusher js to build a real-time feature in my app. I've done all the steps required as told by the doc. I've successfully set up the pusher configurations and it works fine: when my event is fired I get it notified in my Debug console on my Pusher account.
My issue is with the front-end. As told by the docs I've added the portion of code neccessary at the bottom of my resources/js/bootstrap.js file. I uncommented it actually and add the proper ids.
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key:my-pusher-key-here,
cluster: eu,
forceTLS: true
});
The issue is that although I've inserted those
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/echo.js"></script>
<script src="js/app.js"></script>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script>
var channel = Echo.channel('my-channel');
channel.listen('my-event', function(data) {
alert(JSON.stringify(data));
});
</script>
in my blade view, I'm getting this error in the browser's console :ReferenceError: Echo is not defined.
I'm guessing it has something to do with echo library not found but I'm not understanding why. For the <script src="js/echo.js"></script> line, I copied the echo.js file got after the npm install --save laravel-echo pusher-js command run.
I went through many suggestions like gulp to get the changes in the Js files automatically compiled I guess but nothing... For the gulp command entered in my CLI, I'm getting No gulpfile file found error. I've also tried to copy the first portion of code directly in the app.js file instead but no difference, I'm getting the same error.
As I've said.. I guess this has certainly something to do with the Echo library not found but why that ? Your help will be very appreciated
package.json file
"private": true,
"scripts": {
"build": "webpack -p",
"watch": "npm run development -- --watch",
"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-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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"gulp": "^4.0.2",
"laravel-echo": "^1.5.4",
"pusher-js": "^5.0.0"
}
}
You have import Echo from 'laravel-echo'; inside resources/js/bootstrap.js file.
It tries to search for Echo dependency in node_modules folder.
You should use laravel-mix to build JavaScript files.
Remove defer from your script tag. This will cause the app.js script to be deferred, and the other script will run first before this script
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
I have faced the same error as you, the error is happening in your resources/js/app.js file. if you have commented require('./bootstrap'); uncomment it it will work for you.
I believe you messed up the steps after uncommenting the lines in resources/js/bootstrap.js file. To use the code in there you need to import the resources/js/app.js file. Go look in that, you'll see it is importing the bootstrap file. You can import axios in your resources/js/app.js as you might need it in your blade.
Confirm that your resources/js/app.js file at least has these lines:
require('./bootstrap');
const { default: axios } = require('axios');
window.Vue = require('vue').default;
Then in your blade file use this to get vue running:
<script src="{{ asset('js/app.js') }}"></script>
<script>
new Vue({
el: '#app',
data: {},
methods: {},
mounted() {},
});
</script>
Finally check the webpack.mix.js file and confirm that it at least has:
mix.js('resources/js/app.js', 'public/js')
.vue();
For me, using php 7.4 I had to run npm run production to build the js files. And it was running flawlessly.
Go in terminal,
tape this command : npm install and use laravel mix : npm run dev that resolve my error.
Thanks.
My app is split into an API and a UI portion. Deployment strategy requires they share a package.json. The file structure looks like
client/
src/
main.js
api/
package.json
vue.config.js
I am using the standard vue-cli scripts.
package.json
"scripts": {
"serve:ui": "vue-cli-service serve",
"build:ui": "vue-cli-service build",
"lint:ui": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
}
When I do npm run serve:ui, I get
This relative module was not found:
* ./src/main.js in multi ./node_modules/#vue/cli-service/node_modules/webpack-dev-server/client?http://10.0.2.15:8080/sockjs-node ./node_modules/#vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js
So, I tried modifying vue.config.json as per the docs:
vue.config.js
const path = require('path');
module.exports = {
entry: {
app: './client/src/main.js'
}
}
Now, I get the error:
ERROR Invalid options in vue.config.js: "entry" is not allowed
How do I tell vue-cli where my app entrypoint is?
I discovered based on this Github Issue that you can pass a custom entrypoint only in the command line. This is true for both build and serve. See also in the documentation, a single block of code demonstrating this.
Usage: vue-cli-service serve [options] [entry]
I changed my script to
"serve:ui": "vue-cli-service serve client/src/main.js",
and now it can find the entrypoint.
You can add the entry to the pages option and make sure you include the template too.
vue.config.js
module.exports = {
pages: {
app: {
entry: 'client/src/main.js',
template: 'client/public/index.html',
},
},
};
If you don't like a separate file for this configuration you can also add this to a package.json file:
package.json
"vue": {
"pages": {
"index": {
"entry": "client/src/main.js",
"template": "client/public/index.html"
}
}
},
I believe you are trying to running are building a nodejs app with vue as frontend. I ran into some issues similar to that some time ago and I fixed it by installing laravel-mix to the project which helps me compile vue.
"scripts": {
"start": "node app.js",
"dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js | nodemon app.js",
"hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js | node app.js"
},
So when i run npm run watch, it run the vue-cli command and power the node app. all in real time.
Create a new file in the root directory named webpack.mix.js
Insert these lines:
let mix = require("laravel-mix");
mix.js("src/js/app.js", "public/js")
.sass('src/scss/app.scss', 'public/css’);
src/js/app.js is the main vue file that compiles to public/css
I want to view my ionic project in Ionic View but all it shows is a white screen. Tried running ionic run android -l -c to debug my project but it shows me the following response
ionic-hello-world#0.0.0 ionic:serve C:\Users\GClairGC\Desktop\Angular\wasteman agementsystem
ionic-app-scripts serve "--v2" "--runLivereload" "--isPlatformServe" "--consol elogs" "--livereload" "--port" "8101" "--livereload-port"
"35730" "--address" "1
92.168.8.228" "--iscordovaserve" "--nobrowser"
[21:47:32] ionic-app-scripts 1.3.0 [21:47:32] watch started ...
[21:47:32] build dev started ... events.js:160
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE 0.0.0.0:53703
at Object.exports._errnoException (util.js:1018:11)
at exports._exceptionWithHostPort (util.js:1041:20)
at Server._listen2 (net.js:1262:14)
at listen (net.js:1298:10)
at net.js:1408:9
at _combinedTickCallback (internal/process/next_tick.js:83:11)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:393:7)
at startup (bootstrap_node.js:150:9)
npm ERR! Windows_NT 6.3.9600 npm ERR! argv "C:\Program
Files\nodejs\node.exe" "C:\Program Files\nodejs\
node_modules\npm\bin\npm-cli.js" "run" "ionic:serve" "--" "--v2"
"--runLivere load" "--isPlatformServe" "--consolelogs" "--livereload"
"--port" "8101" "--live reload-port" "35730" "--address"
"192.168.8.228" "--iscordovaserve" "--nobrowser " npm ERR! node
v6.10.2 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR!
ionic-hello-world#0.0.0 ionic:serve: ionic-app-scripts serve "--v2"
"-
-runLivereload" "--isPlatformServe" "--consolelogs" "--livereload" "--port" "810 1" "--livereload-port" "35730" "--address"
"192.168.8.228" "--iscordovaserve" "-
-nobrowser" npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ionic-hello-world#0.0.0 ionic:serve script 'ionic-app-scr ipts serve
"--v2" "--runLivereload" "--isPlatformServe" "--consolelogs" "--liver
eload" "--port" "8101" "--livereload-port" "35730" "--address"
"192.168.8.228" "
--iscordovaserve" "--nobrowser"'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this
is most likely a problem with the ionic-hello-world pac kage, npm ERR!
not with npm itself. npm ERR! Tell the author that this fails on your
system: npm ERR! ionic-app-scripts serve "--v2" "--runLivereload"
"--isPlatformServe " "--consolelogs" "--livereload" "--port" "8101"
"--livereload-port" "35730" "-- address" "192.168.8.228"
"--iscordovaserve" "--nobrowser" npm ERR! You can get information on
how to open an issue for this project with: npm ERR! npm bugs
ionic-hello-world npm ERR! Or if that isn't available, you can get
their info via: npm ERR! npm owner ls ionic-hello-world npm ERR!
There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!
C:\Users\GClairGC\Desktop\Angular\wastemanagementsystem\npm-debug.log
package.json
{ "name": "ionic-hello-world", "version": "0.0.0", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve" },
"dependencies": {
"#angular/common": "4.0.0",
"#angular/compiler": "4.0.0",
"#angular/compiler-cli": "4.0.0",
"#angular/core": "4.0.0",
"#angular/forms": "4.0.0",
"#angular/http": "4.0.0",
"#angular/platform-browser": "4.0.0",
"#angular/platform-browser-dynamic": "4.0.0",
"#angular/router": "4.0.0",
"#ionic-native/core": "3.4.2",
"#ionic-native/splash-screen": "3.4.2",
"#ionic-native/status-bar": "3.4.2",
"#ionic/storage": "2.0.1",
"angular2-qrcode": "^2.0.1",
"firebase": "^3.8.0",
"ionic-angular": "3.0.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.4" },
"devDependencies": {
"#ionic/app-scripts": "1.3.0",
"typescript": "~2.2.1" },
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard" ],
"cordovaPlatforms": [],
"description": "auth: An Ionic project" }
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!--<title>Loading..</title>-->
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
Hi first try to run ionic serve after this try running ionic build android than try
ionic run -l -c
it will work for you.
if you have started your poject before some time, let me tell you many things got changed, in your index.html should have these lines, and a few other things get changed around:
<!-- Polyfill needed for platforms without Promise and Collection support -->
<script src="build/js/es6-shim.min.js"></script>
<!-- Zone.js and Reflect-metadata -->
<script src="build/js/angular2-polyfills.js"></script>