PNP Listview isnt lazyloading - spfx

I have implemented a listview control in my SPFX webpart. It is showing a memberlist with 205 members. But when I scroll down it is actually only showing 50..
When I look into console i get this warning, and I am sure that is the problem.
warn.js:14
BaseButton property 'toggled' was used but has been deprecated. Use 'checked' instead.
Have anyone experienced the same?
I am using these versions
"dependencies": {
"#fluentui/react": "^8.67.1",
"#microsoft/rush-stack-compiler-4.2": "^0.1.2",
"#microsoft/sp-core-library": "1.14.0",
"#microsoft/sp-lodash-subset": "1.14.0",
"#microsoft/sp-office-ui-fabric-core": "1.14.0",
"#microsoft/sp-property-pane": "1.14.0",
"#microsoft/sp-webpart-base": "1.14.0",
"#pnp/graph": "^3.2.0",
"#pnp/sp": "^3.2.0",
"#pnp/spfx-controls-react": "^3.7.2",
"office-ui-fabric-react": "7.174.1",
"react": "16.13.1",
"react-dom": "16.13.1"
},

Related

Impossilbe to downgrade gradle version during build

As I was trying to provide fixes on our app developed with nativescript-vue 2.4 and nativescript 7.
The situation right now is gradle 7 no longer support some compiler features. For some obscure reason, I am unable to control which gradle version to use for compilation.
We have found solution for locking the gradle by specifing it in the build.gradle file.
I suspect there is a plugin currently overriding this to use the latest gradle version.
Here is the dependecies at play :
"dependencies": {
"axios": "0.19.2",
"lodash": "4.17.15",
"moment": "2.24.0",
"nativescript-cardview": "3.2.0",
"nativescript-clipboard": "1.2.0",
"nativescript-dev-version": "./custom-hooks/version",
"nativescript-fingerprint-auth": "7.0.2",
"nativescript-geolocation": "^5.1.0",
"nativescript-i18n": "0.4.1",
"nativescript-iqkeyboardmanager": "1.5.1",
"nativescript-keyboard-toolbar": "1.1.0",
"nativescript-loading-indicator": "2.5.2",
"nativescript-local-notifications": "4.2.1",
"nativescript-lottie": "3.0.3",
"nativescript-masked-text-field": "4.0.3",
"nativescript-pager": "11.0.11",
"nativescript-phone": "3.0.1",
"nativescript-platform-css": "1.6.10",
"nativescript-plugin-firebase": "10.6.3",
"nativescript-preferences": "1.1.2",
"nativescript-secure-storage": "2.6.0",
"nativescript-theme-core": "1.0.6",
"nativescript-toasty": "2.0.1",
"nativescript-ui-listview": "8.2.0",
"nativescript-vue": "2.4.0",
"node-email-validation": "1.0.4",
"tns-core-modules": "6.5.20",
"vue-currency-filter": "3.4.3",
"vue-i18n": "8.16.0",
"vuex": "3.1.3"
},
"devDependencies": {
"#babel/core": "7.9.0",
"#babel/preset-env": "7.9.0",
"babel-loader": "8.1.0",
"eslint": "3.19.0",
"eslint-config-airbnb-base": "11.3.2",
"eslint-config-prettier": "2.10.0",
"eslint-plugin-import": "2.20.1",
"eslint-plugin-prettier": "2.7.0",
"husky": "4.2.3",
"nativescript": "7.2.1",
"nativescript-dev-webpack": "1.5.1",
"nativescript-vue-template-compiler": "2.3.0",
"node-sass": "4.13.1",
"prettier": "1.19.1",
"tns-android": "6.5.3",
"tns-ios": "6.5.4",
"vue-loader": "15.9.1"
},
Thanks for you help.

Netlify deployment

I am trying to deploy a git repo on Netlify and I am using parcel in the project.
I am getting the error in the photo about conflicting local requirement.
This is how my dependencies and devDependencies look like:
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^5.1.0",
"parcel": "^2.0.0-rc.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9"
},
"devDependencies": {
"#parcel/transformer-sass": "^2.0.0-beta.3.1"
}
}
and I am getting the error in the photo
Any tip on how to resolve this ?? thanks
Ok solved,
just had to remove parcel as a dependency!

Module 'SquareReaderSDK' not found 'react-native-square-reader-sdk ' in react native

native-square-reader-sdk** for payments in my project.
iOS build is failing due to "Module 'SquareReaderSDK' not found"
package.json
"dependencies": {
"#react-native-community/async-storage": "^1.6.1",
"react": "16.9.0",
"react-native": "0.60.5",
"react-native-camera-kit": "^8.0.1",
"react-native-gesture-handler": "^1.4.1",
"react-native-globalize": "^3.0.0",
"react-native-permissions": "^1.2.0",
"react-native-square-reader-sdk": "1.3.0",
"react-navigation": "^3.11.1",
"react-native-webview": "7.0.5",
"react-native-star-prnt": "1.1.0",
"base-64": "0.1.0"
},
how to solve this ?
thanks
please follow the following steps to install SquareReaderSDK
Steps for SquareSDK Installation

awesome-typescript-loader throws on either OSX or Ubuntu, with different versions

I have two strange errors; two different versions of awesome-typescript-loader throws errors on one OS(Ubuntu) and not on another(OSX), and vica verca - if I upgrade.
Case 1:
"awesome-typescript-loader": "3.1.0",
On OSX, it will throw this error:
[at-loader] Checking finished with 1 errors
[at-loader]: Child process failed to process the request: TypeError: Cannot read property '0' of undefined
Then we think: OK, let's upgrade to:
"awesome-typescript-loader": "3.1.3",
And it works on OSX! Except, we build on Jenkins(Ubuntu)... And while Jenkins is happy about the 3.1.0 version and build with no issues, upgrading to 3.1.3 throws the following:
[at-loader] Checking finished with 2 errors
Error in bail mode: [at-loader] ./src/pages/somePage.tsx:4:23
TS2307: Cannot find module 'History'.
.. This is related to React and React-router, I think? But why this module specifically?
In other words, we're in a position where we either cannot build without errors locally, or cannot build on a build server without errors.
What could be the issue? Is it with React-router-dom?
Here's a package.json sample:
"dependencies": {
"#types/history": "4.6.0",
"#types/react": "16.0.10",
"#types/react-dom": "16.0.1",
"#types/react-redux": "5.0.10",
"#types/react-router-dom": "4.0.8",
"#types/react-router-redux": "5.0.8",
"#types/react-tap-event-plugin": "0.0.30",
"history": "4.7.2",
"react": "16.0.0",
"react-dom": "16.0.0",
"react-redux": "5.0.6",
"react-router-dom": "4.2.2",
"react-router-redux": "4.0.8",
"react-tap-event-plugin": "3.0.2",
"redux": "3.7.2",
"redux-thunk": "2.2.0",
},
"devDependencies": {
"awesome-typescript-loader": "3.1.0", // Or 3.1.3 as mentioned
"connect-history-api-fallback": "1.3.0",
"cross-env": "5.0.5",
"express": "4.15.4",
"extract-text-webpack-plugin": "3.0.0",
"html-webpack-plugin": "2.30.1",
"http-proxy-middleware": "0.17.4",
"https": "1.0.0",
"react-hot-loader": "3.0.0-beta.7",
"redux-devtools": "3.4.0",
"source-map-loader": "0.2.1",
"tslint": "5.7.0",
"tslint-loader": "3.5.3",
"tslint-react": "3.2.0",
"typescript": "2.5.2",
"url-loader": "0.5.9",
"webpack": "3.5.5",
"webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.18.2"
}

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

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.

Resources