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 :)
Related
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
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