Vuetable-2: Property or method "css" is not defined on the instance - laravel

I'm trying to get Vuetable-2 to work in our solution. The demo works without problems. The difference is that we use a lot of different modules and I'm fairly new to front-end development and fail to see what the problem can be.
The difference between the demo and trying to set the demo up in our own project is this:
Demo
import Vuetable from 'vuetable-2/src/components/Vuetable
Our project
import Vuetable from 'vuetable-2/src/components/Vuetable.vue
The reason for doing so is because if I do not (leave out the .vue), I'll get the following error:
ERROR in ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/VuetableTest.vue
Module not found: Error: Can't resolve 'vuetable-2/src/components/Vuetable'
But, with the extension in the import, I'll get this (in the browser console):
[Vue warn]: Property or method "css" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in component <vuetable>)
[Vue warn]: Error when rendering component <vuetable>:
Uncaught TypeError: Cannot read property 'tableClass' of undefined
Now I have the feeling it has something to do with me needing to add the extension to the import, something that is not done within the Vuetable files, for example import VueResource from 'vue-resource'.
Our package.json:
{
"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-advanced": "*",
"laravel-elixir-webpack-official": "*",
"lodash": "^4.14.0",
"multiselect": "^0.9.12",
"node-sass": "^3.10.0",
"notifyjs-browser": "^0.4.2",
"sweetalert": "^1.1.3",
"vue": "^2.1.0",
"vue-resource": "^1.0.2",
"vue-router": "^0.7.13",
"vuetable-2": "^1.2.0",
"vuex": "^2.1.1",
"whatwg-fetch": "^1.0.0",
"wow.js": "^1.2.2"
},
"dependencies": {
"laravel-echo": "^1.0.5",
"pace": "0.0.4",
"pace-js": "^1.0.2",
"pusher-js": "^3.2.1"
}
}
If I need to provide more information for anyone to even begin to try to help me, please let me know, as I do not quite grasp in what direction I need to look.

Related

There is uniswap error I can't able to reasole it

I am using Uniswap SDK for swapping the tokens I was working fine but now it is throwing an error, but I don't know why. I also install npm #uniswap/v3-periphery but it can't work for me.
Here is the error:
./node_modules/#uniswap/v3-sdk/dist/v3-sdk.esm.js:7:0
Module not found: Can't resolve '#uniswap/v3-periphery/artifacts/contracts/interfaces/IMulticall.sol/IMulticall.json'
Import trace for requested module:
./node_modules/#uniswap/smart-order-router/build/module/providers/on-chain-quote-provider.js
./node_modules/#uniswap/smart-order-router/build/module/providers/index.js
./node_modules/#uniswap/smart-order-router/build/module/index.js
./components/app/Swapping.jsx
./pages/swap/index.tsx
https://nextjs.org/docs/messages/module-not-found
And here is the package.json file:
{
"name": "helpi-finance",
"private": true,
"version": "0.1.0",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#headlessui/react": "^1.7.0",
"#rainbow-me/rainbowkit": "^0.5.1",
"#uniswap/sdk": "^3.0.3",
"#uniswap/sdk-core": "^3.0.1",
"#uniswap/smart-order-router": "^2.5.30",
"#uniswap/v3-sdk": "^3.8.2",
"ethers": "^5.0.0",
"jsbi": "3.2.5",
"next": "^12.1.6",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons": "^4.4.0",
"react-spinners": "^0.13.4",
"react-toastify": "^9.0.8",
"wagmi": "^0.6.0"
},
"devDependencies": {
"#types/node": "^17.0.35",
"#types/react": "^18.0.9",
"autoprefixer": "^10.4.8",
"eslint": "^8.15.0",
"eslint-config-next": "^12.1.6",
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"typescript": "^4.7.2"
}
}
After Stuck 3 to 4 Days If find out, By installing a specific version of #uniswap/v3-periphery#1.4.1 resolves this issue.
npm i #uniswap/v3-periphery#1.4.1
/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/logger/src.ts/index.ts:269
const error: any = new Error(message);
^
Error: could not detect network (event="noNetwork", code=NETWORK_ERROR, version=providers/5.7.1)
at Logger.makeError (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/logger/src.ts/index.ts:269:28)
at Logger.throwError (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/logger/src.ts/index.ts:281:20)
at JsonRpcProvider.<anonymous> (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/providers/src.ts/json-rpc-provider.ts:483:23)
at step (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/providers/lib/json-rpc-provider.js:48:23)
at Object.throw (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/providers/lib/json-rpc-provider.js:29:53)
at rejected (/Users/xxx/Desktop/Ethjs/uniswapV3_SDK/node_modules/#ethersproject/providers/lib/json-rpc-provider.js:21:65)
at runNextTicks (node:internal/process/task_queues:61:5)
at listOnTimeout (node:internal/timers:528:9)
at processTimers (node:internal/timers:502:7) {
reason: 'could not detect network',
code: 'NETWORK_ERROR',
event: 'noNetwork'
}
After I run follow your instruction, I got this problem instead? Do you counter the same problem?

closed -- Couldn't build Vuetify v2.2 with sass error

Hi I am using custom components on Vuetify v2.2, which are throwing error during build.
I can't figure out, what's the problem with Vuetify v2.2
because Vuetify v2.1.15 was working well.
Thrown error message:
ERROR in ./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'type' of undefined
at /home/ubuntu/chainflix-nuxt-tar/node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass:1:257
at stringifyNode (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss-value-parser/lib/stringify.js:2:19)
at Function.stringify (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss-value-parser/lib/stringify.js:45:10)
at Gradient.colorStops (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:503:26)
at Gradient.oldWebkit (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:396:10)
at Gradient.replace (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:89:30)
at Gradient.add (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/value.js:148:20)
at Gradient.add (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:570:35)
at Gradient.process (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/prefixer.js:155:16)
at /home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/processor.js:379:36
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:190:18
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:135:18
at Rule.each (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:101:16)
at Rule.walk (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:131:17)
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:148:24
at Root.each (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:101:16)
at Root.walk (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:131:17)
# ./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass 4:14-213
# ./node_modules/vuetify/lib/components/VCalendar/VCalendarDaily.js
# ./node_modules/vuetify/lib/components/VCalendar/index.js
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./components/inc/vuetifyCustom/CTextarea/CTextarea.js
# ./components/inc/vuetifyCustom/CTextarea/index.js
# ./plugins/GlobalComponent.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./.nuxt/client.js
In CTextarea I imported VTextarea and VInput like this:
import { VTextarea, VInput } from 'vuetify/lib'
import 'vuetify/src/components/VTextarea/VTextarea.sass'
import { CTextField } from '../CTextField'
export default Vue.extend({
name: 'CTextarea',
extends: VTextarea.extend(),
///// etc custom codes
})
I think this error has some correlation with sass & postcss.
I hope to Build Successfully.
I must using Vue.config.optionMergeStrategies options in custom components.
My package dependencies & devDependencies
{
"dependencies": {
"#babel/runtime-corejs3": "^7.6.3",
"#nuxtjs/axios": "^5.8.0",
"#nuxtjs/moment": "^1.4.0",
"#nuxtjs/style-resources": "^1.0.0",
"base64toblob": "0.0.2",
"bigdecimal": "^0.6.1",
"camelcase-keys": "^5.2.0",
"core-js": "^3.3.6",
"cross-env": "^5.2.1",
"crypto": "^1.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.4",
"filestream": "^4.1.3",
"firebase": "^7.5.2",
"form-data": "^2.5.1",
"intersection-observer": "^0.7.0",
"ip-regex": "^4.1.0",
"morgan": "^1.9.1",
"nuxt": "^2.10.2",
"qrcode": "^1.4.3",
"snakecase-keys": "^2.1.0",
"socket.io-client": "^2.3.0",
"uuid": "^3.3.3",
"vue-clipboard2": "^0.3.1",
"vue-drag-drop": "^1.1.4",
"vue-google-charts": "^0.3.2",
"vue-i18n": "^8.15.0",
"vue-lottie": "^0.2.1",
"vue-ls": "^3.2.1",
"vue-qrcode": "^0.2.2",
"vuedraggable": "^2.23.2",
"vuejs-logger": "^1.5.3"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.6.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-syntax-jsx": "^7.0.0",
"#babel/plugin-transform-modules-commonjs": "^7.6.0",
"#babel/plugin-transform-regenerator": "^7.4.5",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/plugin-transform-template-literals": "^7.2.0",
"#babel/preset-env": "^7.6.3",
"#babel/register": "^7.6.2",
"#babel/runtime": "^7.6.3",
"#nuxt/babel-preset-app": "^2.10.2",
"#nuxtjs/eslint-config": "^0.0.1",
"#nuxtjs/vuetify": "^1.10.1",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.5",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"nodemon": "^1.19.4",
"prettier": "^1.16.4",
"regenerator-runtime": "^0.13.2",
"sass": "^1.23.3",
"vue-style-loader": "^4.1.2",
"webpack-bundle-analyzer": "^3.6.0"
},
}
If you need more informations, comment please. I really hope to fix it.
You do not have a postcss-loader package in your dependencies.
Have you tried installing it?
npm i -D postcss-loader
Personally i would prefer using the node-sass and sass-loader package as suggested in the nuxt docs: https://nuxtjs.org/faq/pre-processors/
npm install --save-dev node-sass sass-loader
Hope it helps!
I finally fixed.
This problem was my mistakes with Treeshakes.
so I fixed variable scss files and components direct import.
I hope someones are helpful with this.
In components
// wrong
import { VTextField } from 'vuetify/lib'
// Correct
import { VTextField } from 'vuetify/lib/components/VTextField'
In variable scss files. May you imported #import 'vuetify/src/styles/styles.sass';
That is need just a time in root file ( In webpack guild's options.prependData or options.data. )
#import 'vuetify/src/styles/styles.sass';
// some global values
// some components values
And... Use map-deep-merge, when you should fix color or such value in Object type(?).
$purple: ();
$purple: map-deep-merge(
(
'base': #6255c5
),
$purple
);
$shades: ();
$shades: map-deep-merge(
(
'black': #2D2935,
'white': #FFFFFF
),
$shades
);
Happy coding!

Can't tell if Vue project is in debug more or release mode for Visual Studio

I'm building this Vue app with Visual Studio and regardless of the build mode (debug/release) I still get this message below in the console.
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
Is there a way to know if I'm really in release mode or if Vue is just throwing me that message?
I know that usually it means the JS files have been minified, is that the case with a Vue app?
I'm not sure if this helps but here is my packages.json file
{
"name": "aspnetcore-vuejs",
"description": "ASP.NET Core & VueJS Starter project",
"author": "Mark Pieszak",
"scripts": {
"dev": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"install": "webpack --config webpack.config.vendor.js"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/vue-fontawesome": "^0.1.1",
"axios": "^0.15.3",
"bootstrap-vue": "^2.0.0-rc.11",
"core-js": "^2.4.1",
"dayjs": "^1.7.5",
"font-awesome": "^4.6.3",
"material-design-icons-iconfont": "^3.0.3",
"vue": "^2.1.8",
"vue-infinite-loading": "^2.3.3",
"vue-masked-input": "^0.5.2",
"vue-router": "^2.1.1",
"vue-select": "^2.5.0",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.1.8",
"vuetify": "^1.2.3",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"bootstrap": "^4.1.3",
"cross-env": "^3.1.3",
"css-loader": "^0.26.1",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"node-sass": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"regenerator-runtime": "^0.12.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.2",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}
}
As the Vue.js deployment guide you posted suggests, please check your webpack.config.js and be sure to use the right mode targetting production environment when you deploy the app.
In Webpack 4+, you can do:
module.exports = {
mode: 'production'
}
But in Webpack 3 and earlier, you'll need to use DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
When you are ready, you should simply need to run npm run build to start bundling your modules.
Related and useful readings:
Writing separate Webpack configurations for each environment.
Managing development and production builds with Webpack.
Introduction to NPM Scripts.

undefined is not a function (near '...reactDevTools.connectToDevTools...')

I have spent over a day trying to get map view to work and along the way I picked up this error that I can't find anywhere at all on the internet. The error code shows up on iOS simulator with a red screen as is typical for react native.
I tried reinstalling the Dev Tools and that didn't work.
Here is my package.json
{
"name":"P77",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.7.0",
"react-native": "0.57.8",
"react-native-elements": "^0.19.1",
"react-native-maps": "^0.22.1",
"react-native-vector-icons": "^6.1.0",
"react-navigation": "git+https://github.com/react-community/react-navigation.git"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.51.1",
"react-devtools": "^3.4.3",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
please help
I found out an answer that works for me, but I'm not sure. Maybe this can help people in the future. I ran:
"yarn add eslint-config-rallycoding --dev"
"npm start"
(in project directory)

Laravel 5.6 - webpack: Uncaught ReferenceError: jQuery is not defined

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',
})
]
};
});

Resources