Property or method is not defined on the instance but refenced during render - laravel

Error and Background
I am having some issues getting vue.js to work in my Laravel application. There are no errors whenever I run gulp, so I know that my components are compiling. It only happens on runtime, whenever I try to render the components.
Here is the full error that gets logged:
Property or method "clients" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <clients>)
The package.json file is defined as
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-11",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-loader": "^8.3.0",
"vue-resource": "^1.0.3",
"babel-core": "^6.8.0",
"babel-loader":"^6.2.4",
"babel-plugin-transform-runtime":"^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-runtime":"^6.0.0",
"vue-hot-reload-api":"^1.2.0",
"vue-html-loader":"^1.0.0"
}
}
I have tried the steps outlined in this GitHub issue, it did not work. I have also, deleted node_modules and ran npm cache clean. To no avail.
Application.vue
import Clients from './Clients.vue';
export default {
mounted() {
console.log('Component ready.')
},
components: [
Clients
]
}
Clients.vue
import Client from './Client.vue'
export default {
data() {
return {
clients: []
}
},
components: [
Client
],
mounted() {
this.$http.get('api/clients').then((response) => {
this.clients = response.body
})
}
}
app.js
require('./bootstrap');
Vue.component('app', require('./components/Application.vue'));
Vue.component('clients', require('./components/Clients.vue'));
Vue.component('client', require('./components/Client.vue'));

My guess is that your problem is here:
components: [
Client
],
Components should be an object, not an array:
components: {
Client
},
Everything else looks OK to me.

Related

How to customize the variables in vuetify in laravel?

I am using vuetify in Laravel. I had created a laravel 8 project with vue version 2 using laravel/ui package. Everything seems to work fine and all the components of vuetify rendered properly. But when I try to change a variable in my variables.scss in resources/sass/variables.scss, It doesn't seems to work accordingly. e.g: when i want to change the default border radius from 4px to let say 10px using $border-radius-root: 6px; as mentioned in vuetify documentation. It doesn't work. Below is my webpack.mix.js
const mix = require("laravel-mix");
require("vuetifyjs-mix-extension");
mix.js("resources/js/app.js", "public/js")
.vuetify()
.vue({ version: 2 })
.sass("resources/sass/app.scss", "public/css");
And my package.json
{
"private": true,
"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"
},
"devDependencies": {
"axios": "^0.24",
"deepmerge": "^4.2.2",
"laravel-mix": "^6.0.39",
"resolve-url-loader": "^4.0.0",
"sass": "^1.43.4",
"sass-loader": "^12.3.0",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"vuetifyjs-mix-extension": "^0.0.20"
},
"dependencies": {
"#mdi/font": "^6.4.95",
"#mdi/js": "^6.4.95",
"material-design-icons-iconfont": "^6.1.1",
"vue-router": "^3.5.3",
"vuetify": "^2.5.14",
"vuetify-loader": "^1.7.3",
"vuex": "^3.6.2"
}
}
my app.scss file content
// Fonts
#import url("https://fonts.googleapis.com/css?family=Nunito");
// Variables
#import url("variables.scss");
my variables.scss content
$border-radius-root: 14px !important; // this portion didn't work.
and the vuetify.js plugin file content
import Vue from "vue";
import Vuetify from "vuetify";
// To add vuetify css file
import "vuetify/dist/vuetify.min.css";
import colors from "vuetify/lib/util/colors";
import "material-design-icons-iconfont/dist/material-design-icons.css"; // Ensure you are using css-loader
import "#mdi/font/css/materialdesignicons.css"; // Ensure you are using css-loader
Vue.use(Vuetify);
const opts = {
icons: {
iconfont: "mdi" || "mdiSvg" || "md",
},
theme: {
themes: {
light: {
primary: "#26695C", // #E53935
secondary: colors.indigo.accent4, // #FFCDD2
accent: "#BA895D", // #3F51B5
black: "#000000",
primaryLight: "#E9F0EE",
},
},
},
};
// primary: "#DB6015", // #E53935
// secondary: colors.indigo.accent4, // #FFCDD2
// accent: "#005677" // #3F51B5
export default new Vuetify(opts);
and I am using the vuetifyjs-mix-extension in my laravel mix configuration.
It's a little difficult with the approach you are trying to use for. I can suggest the following one:
vuetify.js (imported in the app)
import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import es from "vuetify/lib/locale/es";
Vue.use(Vuetify);
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
// More props here...
},
// More stuffs here...
});
webpack.mix.js
const mix = require("laravel-mix");
require("vuetifyjs-mix-extension");
mix
.js("resources/js/app.js", "public/js")
.vue()
// here's where the magic happens.
.vuetify("vuetify-loader", { extract: "[name].csss" })
.version()
.disableNotifications();
Now that you have these settings. Ensure you...
Have the following file: resources/sass/variables.scss
If you have custom fonts, it's preferable that you import them via html rather than here, that's more efficient.
You will be able to see the updates on your code.
Side note: There are my plugins versions:
{
//...
"dependencies": {
//...,
"vue": "^2.6.12",
"vue-router": "^3.5.1",
"vuetify": "^2.5.3"
},
"devDependencies": {
// ...,
"deepmerge": "^4.2.2",
"laravel-mix": "^6.0.24",
"postcss": "^8.2.12",
"prettier": "^2.2.1",
"sass": "1.32.6",
"sass-loader": "^11.0.1",
"vue-cli-plugin-vuetify": "^2.3.1",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.2",
"vuetifyjs-mix-extension": "^0.0.20"
}
}

CKEditor 5 - Why h2 tags look like p tags?

I Have a problem when use CKEditor 5 for my project ( VILT stack )
I can describe the problem as follows :
Here is my vue file:
<template>
<app-layout>
<ckeditor :editor="editor" #blur="onEditorInput" v-model="editorData" :config="editorConfig"></ckeditor>
</app-layout>
</template>
<script>
import AppLayout from '#/Layouts/AppLayout'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
export default {
components: {
AppLayout,
},
data() {
return {
editor: ClassicEditor,
editorData: '',
editorConfig: {
// The configuration of the editor.
}
}
},
methods: {
onEditorInput() {
console.log(this.editorData);
}
}
}
</script>
and here's the app.js :
require('./bootstrap');
// Import modules...
import Vue from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue';
import PortalVue from 'portal-vue';
import CKEditor from '#ckeditor/ckeditor5-vue2';
Vue.mixin({ methods: { route } });
Vue.use(InertiaPlugin);
Vue.use(PortalVue);
Vue.use( CKEditor );
const app = document.getElementById('app');
new Vue({
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
},
}),
}).$mount(app);
and here are the contents of the package.json file :
{
"private": true,
"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"
},
"devDependencies": {
"#inertiajs/inertia": "^0.8.2",
"#inertiajs/inertia-vue": "^0.5.4",
"#tailwindcss/forms": "^0.2.1",
"#tailwindcss/typography": "^0.3.0",
"autoprefixer": "^10.0.2",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"portal-vue": "^2.1.7",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1",
"vue": "^2.5.17",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "^25.0.0",
"#ckeditor/ckeditor5-vue2": "^1.0.5"
}
}
So you can see in the console it says h2 but it looks like a p tag and I don't like it, how do I make the text look like h2 when I select the h2 option?
i have tried reading the documentation ( Quick start ) but still haven't found the right solution
that's because you are using tailwindcss and it escapes H tags. You can add
#layer
base {
h1 {
#apply text-2xl;
}
h2 {
#apply text-xl;
}
}
to your resources->css->app.css file and you will make it work as normal.

Tiptap for Vuetify SassError: SassError: Invalid CSS

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 - Async / Lazy load vue components with laravel-mix and webpack

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

React-redux app is no longer auto updating

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.

Resources