I'm using Laravel 5.8
I'm working on a SPA with VueJs,
Problem with some dependency
here is the error while open some page
My package.json dependency is
"dependencies": {
"#riophae/vue-treeselect": "^0.2.0",
"axios": "^0.18",
"buefy": "^0.7.8",
"bulma": "^0.7.5",
"vee-validate": "^2.2.11",
"vue": "^2.5.17",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.1.3"
}
My package.json devDependency is
devDependencies:
"browser-sync": "^2.26.7",
"cross-env": "^5.2.0",
"laravel-mix": "^4.0.7",
"sass": "^1.22.7",
"sass-loader": "7.*",
"vue-template-compiler": "^2.6.10"
I guess some issue with these vue-treeselect and vue-awesome-swiper some time it is working fine but some time show error
My webpack.mix.js
const mix = require('laravel-mix');
mix.browserSync({
proxy: 'localhost:8000'
})
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
resolve: {
alias: {
'#': path.resolve(__dirname, 'resources'),
},
},
output: {
publicPath: '/',
chunkFilename: 'js/[name].[chunkhash].js',
},
});
Here is how i import vue-swiper
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Import vue-treeselect
import Treeselect from '#riophae/vue-treeselect'
import '#riophae/vue-treeselect/dist/vue-treeselect.css'
Try replacing:
'#': path.resolve(__dirname, 'resources'),
With:
'~': path.resolve(__dirname, 'resources/js'),
And Update:
import Treeselect from '#riophae/vue-treeselect'
With:
import { Treeselect } from '#riophae/vue-treeselect'
Related
Anyone have this error appear when trying to install the WYSIWYG editor Tiptap for Vuefity?
This is the error:
ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/postcss-loader/src??ref--4-2!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after " #content": expected "}", was "($material-light); "
on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
from line 6 of node_modules/vuetify/src/styles/tools/_index.sass
from line 3 of /home/fc-gui/node_modules/vuetify/src/styles/main.sass
>> #content($material-light); }
----^
And then this is my main Vue file:
/* eslint no-console: 0 */
import '#mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from '../app.vue'
import Vuetify from 'vuetify'
import getShop from '../api/shops'
import customizationApi from '../api/customization'
import { routes } from '../router/routes'
import store from '../store/store'
import axios from 'axios'
import VueFriendlyIframe from 'vue-friendly-iframe';
import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
Vue.use(VueFriendlyIframe)
Vue.use(Vuetify)
Vue.use(VueRouter)
Vue.use(TiptapVuetifyPlugin)
const router = new VueRouter({
routes
});
router.beforeEach((to, from, next) => {
if(to.name == null){
getShop.get(
data => {
if(data.setup) {
next({ name: 'emailCustomize'});
}
else {
next({ name: 'plans'})
}
});
}
else {
next();
}
});
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
vuetify: new Vuetify(),
router,
store,
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
})
And finally my package.json file
{
"name": "fresh-credit",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0-alpha",
"#rails/activestorage": "^6.0.0-alpha",
"#rails/ujs": "^6.0.0-alpha",
"#rails/webpacker": "^4.0.7",
"animate.css": "^3.7.2",
"axios": "^0.19.0",
"babel-preset-stage-2": "^6.24.1",
"chart.js": "^2.8.0",
"lodash": "^4.17.15",
"postcss-loader": "^3.0.0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"tiptap-extensions": "^1.28.6",
"tiptap-vuetify": "^2.13.2",
"turbolinks": "^5.2.0",
"vue": "^2.6.10",
"vue-breadcrumbs": "^1.2.0",
"vue-chartist": "^2.2.1",
"vue-chartjs": "^3.4.2",
"vue-click-outside": "^1.0.7",
"vue-friendly-iframe": "^0.17.0",
"vue-loader": "^15.7.1",
"vue-router": "^3.1.3",
"vue-template-compiler": "^2.6.10",
"vuetify": "^2.0.18",
"vuex": "^3.1.2"
},
"version": "0.1.0",
"devDependencies": {
"#mdi/font": "^4.4.95",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"sass": "^1.25.0",
"sass-loader": "^8.0.2",
"webpack-dev-server": "^3.8.0",
"webpack-merge": "^4.1.0"
}
}
Nothing seems to be working. I even took a look at those files mentioned in the error and it doesn't look like that's the source of the issue. But for completeness here is the file _theme.sass
#mixin theme ($component)
.theme--light.#{$component}
#content($material-light)
.theme--dark.#{$component}
#content($material-dark)
Throw this in your Webpack.config.js rules and specify the options based on the sass-loader version you are using
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// Requires sass-loader#^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
And ensure that you are using sass instead of node-sass in your package.json. from my experience I found that if you have had node-sass previously installed, you might want to delete node modules and re-run npm install
You might also want to install vue-style-loader and css-loader as i don't see them in your package.json
More information can be found in these links
https://github.com/vuetifyjs/vuetify/issues/7950
https://vuetifyjs.com/en/introduction/frequently-asked-questions/
https://github.com/vuetifyjs/vuetify/issues/7323
Laravel 5.6.21
NPM 6.1.0
Node 10.5.0
Webpack 3.12.0
My question is how to properly configure laravel-mix, webpack and babel to successfully lazy-load vue components using the method described here: Lazying Loading Routes
More specifically, using stage-2 (es2018 ?) syntax as follows:
const Foo = () => import('./Foo.vue')
When trying to compile using laravel-mix all statements resembling the above syntax generate an error (example):
Syntax Error: Unexpected token (1:24)
1 | const Dashboard = () => import("Pages/Account/Dashboard.vue");
| ^
I believe laravel-mix uses Babel to transpile and read that Babel needs 'syntax-dynamic-import' so I created a .bablerc file with the following contents:
{
"plugins": [
"syntax-dynamic-import"
]
}
Since the bable config file didn't resolve the issue, I also tried an eslint configuration file with the following contents:
module.exports = {
plugins: ["vue"], // enable vue plugin
extends: ["plugin:vue/recommended", "prettier"], // activate vue related rules
parserOptions: {
"parser": "babel-eslint",
"ecmaVersion": 7, //also tried 8
"sourceType": "module",
"ecmaFeatures": {
"globalReturn": false,
"impliedStrict": false,
"jsx": false,
"experimentalObjectRestSpread": false,
"allowImportExportEverywhere": false
}
}
};
Finally, a copy of the dependencies in package.json are:
"devDependencies": {
"#vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-imports": "^1.5.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"babel-preset-vue-app": "^2.0.0",
"cross-env": "^5.2.0",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-html": "^4.0.1",
"eslint-plugin-vue": "^4.5.0",
"expect": "^22.0.3",
"jsdom": "^11.5.1",
"jsdom-global": "^3.0.2",
"laravel-mix": "^2.1.14",
"less": "^3.5.3",
"less-loader": "^4.1.0",
"mocha": "^4.0.1",
"mocha-webpack": "^1.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-loader": "^13.7.2",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.13",
"vue-test-utils": "^1.0.0-beta.8",
"webpack": "^3.12.0",
"webpack-auto-inject-version": "^1.1.0"
},
Any help regarding resolving this would be greatly appreciated.
I have been using with following in .eslintrc.json.
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
"plugins": [
"vue"
],
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 8,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
Also check your dynamic import function's path const Dashboard = () => import("Pages/Account/Dashboard.vue");. I thinks it should be a relative path something like const Dashboard = () => import("./Pages/Account/Dashboard.vue");
The problem is in the scss splitting in Vue and using mix.scss() both. Laravel mix when having both creates a css file with manifest js file content in it. which is definitely a bug. which the community mentions a bug from Webpack and will be resolved in webpack 5. But If you use only code splitting in Vue and have the default app.scss file imported to main Vue component like this(not in scope), so each other component will get the styling properly
// resources/js/components/app.vue
<template>
<!-- Main Vue Component -->
</template>
<script>
// Main Script
</script>
<style lang="scss">
#import '~#/sass/app.scss';
</style>
and the webpack.mix.js file will have no mix.scss function to run only a single app.js file. here is my file.
// webpack.mix.js
const mix = require('laravel-mix')
mix.babelConfig({
plugins: ['#babel/plugin-syntax-dynamic-import'] // important to install -D
})
mix.config.webpackConfig.output = {
chunkFilename: 'js/[name].bundle.js',
publicPath: '/'
}
mix
.js('resources/js/app.js', 'public/js')
.extract(['vue'])
.webpackConfig({
resolve: {
alias: {
'#': path.resolve('resources/') // just to use relative path properly
}
}
})
here is the package.json file (only including required dev dependencies)
{
"#babel/core": "^7.8.7",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.8.7",
"laravel-mix": "^4.1.4",
}
hope this resolves the issue
I got package.json:
"devDependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-datepicker": "^1.7.1",
"browser-sync": "^2.24.6",
"browser-sync-webpack-plugin": "^2.0.1",
"chart.js": "^2.7.2",
"cross-env": "^5.2.0",
"datatables": "^1.10.18",
"easy-pie-chart": "^2.1.7",
"font-awesome": "4.7.0",
"fullcalendar": "^3.9.0",
"jquery": "^3.3.1",
"jquery-sparkline": "^2.4.0",
"jvectormap": "^2.0.4",
"laravel-mix": "^2.1.11",
"load-google-maps-api": "^1.2.0",
"lodash": "^4.17.10",
"masonry-layout": "^4.2.2",
"perfect-scrollbar": "^1.1.0",
"popper.js": "^1.14.3",
"skycons": "^1.0.0",
"vue": "^2.5.16"
}
with webpack.mix:
mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
.js('resources/assets/scripts/index.js', 'public/js/app.js')
.copyDirectory('resources/assets/static', 'public/static')
.version()
.sourceMaps();
and resource file:
so those files, looks like compiled properly by webpack >> npm run dev
then I load it to blade template, but then in browser it show me that: jQuery is not defined...
Uncaught ReferenceError: jQuery is not defined
what's possibly went wrong here, why It can load jQuery while i have define it in package.json?
THanks!
few mins later after I posted the question...
here is the answer...
add this to your webpack:
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
]
};
});
I had a react-redux app working perfectly fine with the UI being auto updated after every file change, then I decided to plugin sass into my app and the auto-reloading stopped working. So in order to get sass in my app, I had to install sass-loader, node-sass, css-loader, etc. But one of the loaders needed webpack 2, so I switched from 1.15 to 2.0, now when I run "npm run dev" I see webpack recompile after every file change, but my UI isn't being auto reloaded in my browser. Can anyone help me troubleshoot this?
Here is my webpack config file:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/app.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy', "transform-object-rest-spread"],
}
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
output: {
path: __dirname + "/src/",
filename: "app.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
An here is my package.json file:
{
"name": "campaign-viewer",
"version": "0.0.0",
"description": "Code challenge from MediaMath",
"main": "webpack.config.js",
"dependencies": {
"axios": "^0.12.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"css-loader": "^0.28.4",
"moment": "^2.18.1",
"node-sass": "^4.5.3",
"react": "^0.14.6",
"react-datetime": "^2.8.10",
"react-dom": "^0.14.6",
"react-redux": "^4.4.5",
"redux": "^3.6.0",
"redux-logger": "^2.6.1",
"redux-promise-middleware": "^3.2.0",
"redux-thunk": "^2.1.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.0.0",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Chris Stephenson",
"license": "ISC"
}
Looks like the problem was with using webpack-dev-server. When I used version 2.0.0 instead of 1.14.1 it started auto reloading again.
I working on a Laravel 5.3 project. I am getting below errors when I am running gulp command in CMD.
Could anyone say how can I get a error less result ?
gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-vue');
elixir(function(mix) {
mix.sass('app.scss');
});
elixir(function(mix) {
mix.webpack('app.js');
});
elixir(function(mix) {
mix.version(['css/app.css', 'js/app.js']);
});
package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-add-module-exports": "^0.2.1",
"bootstrap": "^4.0.0-alpha.3",
"bootstrap-sass": "^3.3.7",
"buble": "^0.14.2",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browserify-official": "^0.1.3",
"laravel-elixir-vue": "^0.1.4",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.14.0",
"vue": "^1.0.26",
"vue-resource": "^0.9.3"
},
"dependencies": {
"admin-lte": "^2.3.7",
"node-sass": "^3.13.0"
}
}
If your using Laravel 5.5 or above, simply add:
mix.webpackConfig({ node: { fs: 'empty' }})
to your webpack.mix.js file.
Try adding
Elixir.webpack.mergeConfig({
node: {
fs: 'empty',
}
});
To your gulpfile.js. Looks like this is a known webpack problem. Here's your file edited:
var elixir = require('laravel-elixir');
require('laravel-elixir-vue');
Elixir.webpack.mergeConfig({
node: {
fs: 'empty',
}
});
elixir(function(mix) {
mix.sass('app.scss');
});
elixir(function(mix) {
mix.webpack('app.js');
});
elixir(function(mix) {
mix.version(['css/app.css', 'js/app.js']);
});