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
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 am using Vue for a small part of a laravel app. I'm not using it for images so it's just the js and css inside of the Vue components. It's 256kb and even after minifying it, it's somehow 256kb as well. I just posted my package.json file below. Is there any package that looks like a duplicate? Or any other ways to reduce the bundle size?
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"laravel-mix": "^4.0.14",
"lodash": "^4.16.2",
"resolve-url-loader": "^2.3.1",
"sass": "^1.17.2",
"sass-loader": "^7.1.0",
"vue": "^2.0.1",
"vue-loader": "^15.7.0",
"vue-resource": "^1.0.3",
"vue-template-compiler": "^2.6.8"
},
"dependencies": {
"axios": "^0.18.0",
"cross-env": "^5.2.0"
}
}```
when running npm run watch I get the following warning which makes compilation fail.
WARNING in ./resources/js/app.js 19:9-58
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/
# multi ./resources/js/app.js ./resources/sass/app.scss /js/app[0]
This is my 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": "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": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"babel-eslint": "^8.2.6",
"babel-plugin-dynamic-import-webpack": "^1.1.0",
"babel-preset-env": "^1.7.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"laravel-mix": "^4.0.14",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.17.2",
"sass-loader": "^7.1.0"
},
"dependencies": {
"vue": "^2.6.7",
"vue-template-compiler": "^2.6.7",
"axios": "^0.18",
"jquery": "^3.2",
"lodash": "^4.17.4",
"tomtom-sdk": "^1.0.0",
"vue-moment": "^4.0.0",
"vue-parallaxy": "^1.1.1",
"vue2-datepicker": "^2.6.4",
"vue2-editor": "^2.6.6",
"vuex": "^3.1.0",
"vuex-persistedstate": "^2.5.4"
}
}
My .babelrc file which is currently inside my .vscode folder, dunno if that's the best place...
{
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
OF COURSE if I remove System.import for import I get the following error:
https://i.imgur.com/UEhxaOh.png
which doesn't makes much sense to me since I have already added the plugins section to my babelrc file...
You're not attach your webpack.mix.js config. But I think your problem will solve with the link below.
Laravel-mix Webpack Public Path
Edit : I've change my package.json according to the progress of my research it seems to be related to babel, I keep looking. However, I wanted to change the package.json that I present to you from which I will work from now on and try to find the right dependencies.
I am currently facing a problem to integrate the coreui template into laravel 5.7.
I get this error :
Module build failed: SyntaxError: Unexpected token.
It happened in the router file. It crashes at the component import level.
import Vue from 'vue'
import Router from 'vue-router'
// Containers
const DefaultContainer = () =>/* HERE */ import('#/containers/DefaultContainer')
I am new to npm and really don't know how to solve that. So any help will be highly appreciated.
Here 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.18",
"cross-env": "^5.1",
"install": "^0.12.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"vue": "^2.5.7"
},
"dependencies": {
"#coreui/coreui": "^2.0.4",
"#coreui/icons": "^0.3.0",
"#coreui/vue": "^2.0.0",
"bootstrap-vue": "^2.0.0-rc.11",
"flag-icon-css": "^3.2.0",
"font-awesome": "^4.7.0",
"perfect-scrollbar": "^1.4.0",
"simple-line-icons": "^2.4.1",
"vue-router": "^3.0.1"
}
}
To solve this problem I just create a file .babelrc on the root of the project and add
{
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
Now I get an other issue that I ask in other question.
Thank you Boussadjra Brahim for your help :)
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.