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
Related
I am trying to change the primary colour for BlueprintJS in react. Below is the following information on my setup.
Dependencies in packages.json:
"dependencies": {
"#blueprintjs/core": "^4.11.2",
"#blueprintjs/icons": "^4.6.3",
"#blueprintjs/select": "^4.8.2",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.64",
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"sass": "^1.55.0",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
}
In the index.scss I have the following:
#import "~normalize.css";
#import "~#blueprintjs/core/src/blueprint";
#import "~#blueprintjs/icons/src/blueprint-icons";
#import "~#blueprintjs/select/src/blueprint-select";
// I have also tried this above the imports.
$pt-intent-primary: #5655bc !default;
When I run the app, I just get the following error:
Compiled with problems:X
ERROR in ./src/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (path: (fill: #5f6b7c)) isn't a valid CSS value.
╷
39 │ background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\#blueprintjs\core\src\components\breadcrumbs\_breadcrumbs.scss 39:54 #import
node_modules\#blueprintjs\core\src\components\_index.scss 5:9 #import
node_modules\#blueprintjs\core\src\blueprint.scss 18:9 #import
src\index.scss 2:9 root stylesheet
I have gone through a lot of the issues listed on GitHub and people have said they have gotten around it by doing this:
#use "#blueprintjs/core/src/blueprint" with (
$pt-intent-primary: #5655bc
);
#use "~#blueprintjs/icons/src/blueprint-icons";
#use "~#blueprintjs/select/src/blueprint-select";
#import "~normalize.css";
But I get the same error. It looks like people have managed to do this, but I cannot seem to get it working and I cannot find any step-by-step instruction on what exactly I need to do to just change a variable.
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?
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.
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
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.