How do i resolve issue with material-ui import? - reactjs

On compile I get an error:
export 'internal_resolveProps' (imported as 'resolveProps') was not found in '#mui/utils'
and it is shown two times, one with MUI Button and the second with ThemeProps.
Both errors are followed by a message (possible exports: ...... )
In dependencies is evething that I supose it needs to be:
"#material-ui/core": "^4.12.3",
"#mui/icons-material": "5.1.1",
"#mui/material": "^5.4.4",
"#mui/private-theming": "5.1.1",
"#mui/styled-engine": "5.1.1",
"#mui/styled-engine-sc": "^5.4.2",
"#mui/system": "5.1.1",
"#mui/utils": "5.1.1",
Does anyone know what is going on?

Related

Material React Table v1.6.5 filter date datetime does not work

I use
"material-react-table": "^1.6.5",
"#material-ui/core": "^4.12.4",
"#mui/material": "^5.11.7",
"#mui/styles": "^5.11.7",
"#mui/x-date-pickers" : "^5.0.18",
"#material-ui/pickers" : "3.0.0",
I'm taking an example
https://www.material-react-table.com/docs/examples/advanced
However, the date filter only works on: lessThanOrEqualTo, greaterThanOrEqualTo
everything else doesn't work, for example: equals, between....
you can see this if you take an example from the link above
I spent a lot of time searching but all to no avail

Expo start error on building JS bundle : type cast in HMRClient.js

Issue :
I rencently encountered a blocking issue in my expo project (React Native).
The type cast expression is expected to be wrapped with parenthesis
I checked my code and didn't notice any change that would cause this problem.
When I type the instructions to start the expo building (shell) with MetroBundler, it always throws an error.
expo start
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler
ERROR :
Failed building JavaScript bundle.
SyntaxError: C:\xamppN\htdocs\mobile-new\node_modules\react-native\Libraries\Utilities\HMRClient.js: The type cast expression is expected to be wrapped with parenthesis (284:31)
282 | function flushEarlyLogs(client) {
283 | try {
> 284 | pendingLogs.forEach(([level: LogLevel, data: Array<mixed>]) => {
| ^
285 | HMRClient.log(level, data);
286 | });
287 | } finally {
The type cast expression is expected to be wrapped with parenthesis
I tried :
Editing the targeted file, it's inside a node module, not
very effective if I have to yarn install later.
Deleting all node_modules and installing again didn't worked
Updating expo to last version, didn't change anything, same error
More infos :
package.json :
"dependencies": {
"antd": "^3.23.2",
"expo": "^39.0.0",
"expo-asset": "~8.2.0",
"expo-av": "~8.6.0",
"expo-barcode-scanner": "~9.0.0",
"expo-cli": "^3.27.14",
"expo-constants": "~9.2.0",
"expo-localization": "~9.0.0",
"expo-permissions": "~9.3.0",
"expo-secure-store": "~9.2.0",
"expo-updates": "~0.3.3",
"expokit": "31.0.2",
"moment": "^2.22.2",
"node-forge": "^0.10.0",
"npm": "^6.14.8",
"react": "16.13.1",
"react-datetime-inputs": "^0.0.6",
"react-mixin": "^2.0.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz",
"react-native-create-bridge": "^2.0.1",
"react-native-dialog": "^5.6.0",
"react-native-dialog-input": "^1.0.7",
"react-native-gesture-handler": "~1.7.0",
"react-native-imei": "^0.1.2",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-pay-password": "^0.0.2",
"react-native-reanimated": "~1.13.0",
"react-native-sentry": "^0.43.2",
"react-native-sha1": "^1.2.3",
"react-navigation": "^4.0.6",
"react-navigation-drawer": "^2.2.2",
"react-select": "^3.0.4",
"react-timer-mixin": "^0.13.4",
"sentry-expo": "~2.0.0",
"yarn": "^1.16.0"
It was a conflict between "yarn": "^1.16.0" and "npm": "^6.14.8".
You should choose ONE package manager and avoid cross dependencies.

How to solve this MERN stack filebase64 error?

import FileBase from 'react-file-base64';
I get an error after I hover the triple dot indicator in VS Code.
My setup has already been successful (other input fields have successfully inserted on the MongoDB Cloud) aside from the filebase64 part of inserting an image.
module "d:/nodejs/memories_project/client/node_modules/react-file-base64/build/build.min"
Could not find a declaration file for module 'react-file-base64'. 'd:/nodejs/memories_project/client/node_modules/react-file-base64/build/build.min.js' implicitly has an 'any' type.
Try npm i --save-dev #types/react-file-base64 if it exists or add a new declaration (.d.ts) file containing declare module 'react-file-base64';ts(7016)
Here are the dependencies of my package.json:
"dependencies": {
"#material-ui/core": "^4.9.10",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"moment": "^2.27.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-file-base64": "^1.0.3",
"react-redux": "^7.1.3",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
If the value is not being saved on the database, that means it is empty or does not exist. Check if the name of the field in the model file (/server/models/) is the same as you have in the Form file (/client/src/components/).
Now the error message has nothing to do with the actual problem.
This happens because react-file-base64 doesn't provide any typing. To get rid of the error you will need to declare the module in a .d.ts file.
To do it, create a .d.ts file (e.g. index.d.ts) in your project root (where the package.json is located) with the following code:
declare module 'react-file-base64';
Or you can declare all with
declare module '*';
I had a similar issue and spent over two hours trying to debug. It can be from a range of issues, my silly mistake was that I had the multiple option set to true when I had not configured it for multiple image uploading.
My code fix as an example.
<FileBase
type="file"
multiple={false}
onDone={({base64}) => setListingData({ ...listingData, selectedFile: base64})}
/>
All you need is to change the Component, the latest I see on its documentation is using FileBase64 not FileBase
So change it into > import FileBase from 'react-file-base64';
Source

How to add React infinite scrolling to a table in ruby on rails

We are adding infinite scrolling to a table in an old project based on ruby on rails. We tried the library react-infinite but it did not work.
We installed it through bower
"dependencies": {
"bootstrap": "~3.3.7",
"bootstrap-sass": "~3.3.7",
"jquery": "~1.9.1",
"react": "~0.13.3",
"react-simpletabs": "^0.7.0",
"react-bootstrap-treeview": "0.1.0",
"sisyphus": "1.1.3",
"prototypejs": "1.7.1",
"highcharts": "4.2.7",
"js-grid": "1.5.3",
"jquery-colorbox": "1.5.10",
"react-infinite": "*"
}
In application.js, we import it using
//= require react-infinite
Then we use it like this:
<react-infinite containerHeight={200} elementHeight={40}>
<ContentTable
data={this.state.tableData}
filterText={this.state.filterText}
onUserClick={this.handleUserClick}
dataType={this.props.dataType}
showPublic={this.state.publicCheckbox}
/>
</react-infinite>
But it did not make any difference. ContentTable is a customized table. And in the console, there is an error:
How can I make it work on a table? Any help would be appreciated.

How to identify source of React.createClass warning? React v15.6

How can I identify the dependency that is causing the warning?
Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0....
I understand the changes that are coming with React v16.0. I want to help the dependency resolve the warnings but I don't know who needs help.
Package.json
"dependencies": {
"autosuggest-highlight": "^3.1.0",
"material-ui": "next",
"material-ui-icons": "^1.0.0-alpha.19",
"nuka-carousel": "^2.2.1",
"react": "^15.6.1",
"react-autosuggest": "^9.3.2",
"react-dom": "^15.6.1",
"react-helmet": "^5.1.3",
"react-router-dom": "^4.1.2",
"react-tap-event-plugin": "^2.0.1",
"typeface-roboto": "^0.0.35"
},
"devDependencies": {
"enzyme": "^2.9.1",
"jest-enzyme": "^3.6.1",
"react-scripts": "^1.0.10",
"react-test-renderer": "^15.6.1"
},
You see next to the warning in the console the line of it. Jump to that line in the chrome-debugger, (just click on it)
Set a break-point there
Reload the page, and you'll get there
Next, in the debugger there is the stack tab, open it, to see all the functions path to that line.. You should be able to identify the problematic source

Resources