When I compile my assets
import './bootstrap';
import './components';
const app = new Vue({
el: '#app'
});
this is my package.json file
{
"private": true,
"scripts": {
"dev": "node node_modules/cross-env/dist/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/dist/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",
"watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/dist/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/dist/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.16.2",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.2.1",
"laravel-mix": "^1.4.3",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vue2-google-maps": "^0.8.4"
}
}
Case.vue
<template>
<div>
<ul class="collection">
<li></li>
</ul>
</div>
</template>
<script>
</script>
<style lang="css" scoped>
</style>
I thought laravel mix already took care the webpack configuration. This error, I remember deals with style-loader in webpack. But why it exists in laravle-mix
I think you need to add this script in your index.blade.php
<script src="{{ asset('/js/app.js') }}"></script>
With this you can compiled your assets in your laravel-Mix
hope this is the solution for your problem.
Related
i am using vue in laravel and trying run npm run dev but it is giving me this error
code: 'MODULE_NOT_FOUND',
requireStack: [
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack-cli\\bin\\utils\\convert-argv.js',
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack-cli\\bin\\cli.js',
'G:\\laravel-vuetify-spa-starter\\node_modules\\webpack\\bin\\webpack.js'
]
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpa
ck.config.js`
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": {
"#babel/core": "^7.11.1",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.0.0",
"and": "0.0.3",
"babel-cli": "^6.26.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"eslint": "^5.9.0",
"install": "^0.12.2",
"jest": "^23.6.0",
"npm": "^6.4.1",
"sass": "^1.26.10",
"sass-loader": "^7.3.1",
"vue": "^2.6.11",
"vue-router": "^3.4.3",
"vue-template-compiler": "^2.6.11",
"vuetify": "^2.3.9",
"vuetify-loader": "^1.4.3",
"vuetify-toast-snackbar": "^0.6.1",
"vuex": "^3.5.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"cross-env": "^7.0.2",
"css-loader": "^1.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"webpack-dev-server": "^3.1.10"
}
}
How i can solve this issue ?
The development script in your package.json is attempting to load the webpack config from laravel-mix and you don't have it installed
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules
--config=node_modules/laravel-mix/setup/webpack.config.js",
Just install laravel-mix or create your own webpack config
npm i laravel-mix
And make sure that you have webpack.mix.js on the root directory if you decide to use the mix wrapper
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
I have the following code for running AJAX requests in Laravel using Axios:
axios.post('Ajax/upload',{key:this.key})
.then(function(response)
{
console.log(response);
}).catch(function(response) {
console.log(response)
});
It works fine in Chrome, but in Internet Explorer I only get the following error:
Promise is udefined.
In the app.js file the breakpoint is set on:
var chain = [dispatchRequest, undefined];
var promise = Promise.resolve(config);
I have the following packages in the package.json file:
{
"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",
"cross-env": "^5.1",
"jquery": "3.3.1",
"laravel-mix": "^1.0",
"noty": "3.1.4",
"pace-js": "1.0.2",
"vue": "^2.5.7"
},
"dependencies": {
"popper.js": "^1.14.4"
}
}
Are there any packages I need to add in order to make Axios work in Internet Explorer? Or are there any other workarounds?
Thanks for any help!
IE doesn't support promises out of the box, you'll need a polyfill. There are several to choose from. MDN's promise page links to this one. Axios' own documentation links to this one.
I have an issue with mix that I can't seem to fix.
I have a file in which I require several node modules and init a vue root component
routes.js
window.Vue = require('vue');
window._ = require('lodash');
window.axios = require('axios');
const root = new Vue({
el: '#root'
});
In my mix file I define where the file should be compiled like so:
mix.js('resources/assets/js/routes.js', 'public/assets/js');
Everything compiles without any errors using npm run dev but when I open the compiled file the contents are not compiled at all! It's like the file wasn't run trough webpack and just copied.
The weird thing is that I use several other components on different pages that do compile like they should. I'm at a loss what the problem might be for this specific instance, since the way the file is built up and the mix directive in webpack.mix.js is exactly the same.
Any help is greatly appreciated!
Edit: package.json contents.
{
"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": {
"autoprefixer": "^8.0.0",
"axios": "^0.17",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"node-sass": "^4.7.2",
"vue": "^2.5.7"
},
"dependencies": {
"awe-dnd": "^0.3.0",
"slick-carousel": "^1.8.1",
"tinymce": "^4.7.6",
"vue-l-carousel": "^1.0.1"
}
}
I'm wroking on laravel 5.4 project.
The question is vue-masonry(https://github.com/shershen08/vue-masonry) package doesn't work with the following error
[Vue warn]: Failed to resolve directive: masonry
[Vue warn]: Failed to resolve directive: masonry-tile
Please help me to check my setting that are the wrong part.
Here is my app.js :
require('./bootstrap');
require('masonry-layout');
require('imagesloaded');
require('fancybox');
var vueMasonry = require('vue-masonry');
Vue.use(vueMasonry);
the bootstrap.js still original without modify a word,
and package.json is here:
{
"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": {
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"minifier": "^0.8.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1"
},
"dependencies": {
"axios": "^0.15.3",
"fancybox": "^3.0.0",
"imagesloaded": "^4.1.3",
"jquery": "^3.1.1",
"masonry-layout": "^4.2.0",
"swiper": "^3.4.2",
"vue": "^2.1.10",
"vue-masonry": "^0.10.7"
}
}
And the final Html is something like:
<div class="grid-wrap"
v-masonry
fit-width="true"
transition-duration="0.3s"
item-selector=".grid-item"
fit-width="true"
>
<div v-masonry-tile class="grid-item" v-for="wall in walls">
<div class="grid-date">
#{{ wall.created_at }}
</div>
</div>
</div>
The package itself seems to be broken according to this issue
https://github.com/shershen08/vue-masonry/issues/26
Just scroll down and you'll find someone with the same issue as you and the latest answer was only 13 hours ago so i doubt it's been fixed yet.
I have a fresh installation of Laravel, and I can't get npm run dev to successfully run:
These dependencies were not found:
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg
in
./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
Browsing the Internet for answers, I found issue #289 on Github but the fix proposed doesn't work:
Last line of _variables.scss:
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
App.scss:
// 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";
#import "_app";
My package.json:
{
"private": true,
"scripts": {
"dev": "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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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",
"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.15.3",
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-preset-env": "^1.2.1",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"css-loader": "^0.27.1",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.8",
"lodash": "^4.17.4",
"md5": "^2.2.1",
"node-sass": "^4.5.0",
"postcss-loader": "^1.3.3",
"resolve-url-loader": "^2.0.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"vue": "^2.1.10",
"webpack": "^2.2.1"
}
}
Any ideas? Thank you in advance!
I managed to get it to work by reverting to the previous version of package.json. You can find it here: https://github.com/laravel/laravel/blob/c1643bf0c59b6864fc55e09cce3bfafc67d29e2a/package.json