Unable to require Parse in react-native. 'Requiring unknown module "react-native"' - reactjs

I have the following installed with npm:
"dependencies": {
"parse": "^1.9.1",
"react-native": "0.32.0",
"react-native-admob": "^1.1.5",
"react-redux": "4.4.5",
"redux": "3.5.2"
},
I am unable to require Parse into my react-native app by using: var Parse = require('parse/react-native')
I get this error:
The file react-native IS inside node_modules/parse/react_native.js but my app wont find it. I have tried reseting the emulator, deleting and reinstalling node_modules.
The error is now a know issue: Issue

Solution:
Inside file node_modules/parse/lib/react-native/StorageController.react-native.js change this line:
var _reactNative = require('react-native');
to
var _reactNative = require('../../../react-native');
This is still an open issue in github:
This solution was found by #jaredwitt
In:
https://github.com/ParsePlatform/Parse-SDK-JS/issues/342
I was able to patch it by changing the following line in node_modules/parse/lib/react-native/StorageController.react-native.js

Related

Integrating tldraw with existing nextjs app

I have an existing next.js application, and I am trying to add tldraw to it. I have enabled typescript, and I have tried to run an example found here: https://codesandbox.io/s/n539u?file=/src/App.tsx, but I continue to get the following error:
Server Error
ReferenceError: window is not defined
ReferenceError: window is not defined
at Object.<anonymous> (.../node_modules/#tldraw/tldraw/dist/index.js:76:31285)
Here are the relevant dependencies used for this project:
"dependencies": {
"#tldraw/tldraw": "^1.28.0",
"next": "13.0.5",
"react": "18.2.0",
"react-dom": "18.2.0",
}
Has anyone had the same issue?
TLDraw can be found here: https://github.com/tldraw/tldraw

Unable to resolve path to module 'chartjs-plugin-stacked100'

I am currently working on chart.js with react-chart-js-2.
My package.json includes the following dependencies:
"dependencies": {
"chart.js": "^3.6.0",
"chartjs-plugin-stacked100": "^1.0.4",
"react": "^17.0.2",
"react-chartjs-2": "^3.3.0",
"typescript": "^3.9.5",
...
},
And the following dev dependencies:
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.28.0",
"#typescript-eslint/parser": "^4.28.0",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-typescript": "^2.4.0",
...
}
I would like to display a chart with stacked bars, that take 100% of the space, and I found this plugin that does exactly the job: chartjs-plugin-stacked100 (you can find a working demo here).
However, when I want to use this plugin in my react app (using typescript, by the way), I got some errors.
I install the plugin using the following command:
npm install chartjs-plugin-stacked100 --save
Then in a .tsx file, I'm trying to import the plugin :
import ChartjsPluginStacked100 from "chartjs-plugin-stacked100";
The import is failing, with the following error:
Could not find a declaration file for module 'chartjs-plugin-stacked100'. 'c:/Users/Nutzer/Documents/git/Infinite-UI/node_modules/chartjs-plugin-stacked100/build/index.js' implicitly has an 'any' type.
Try `npm i --save-dev #types/chartjs-plugin-stacked100` if it exists or add a new declaration (.d.ts) file containing `declare module 'chartjs-plugin-stacked100';
There is no such package for the types sadly.
But thanks to this post in Stack Overflow, I created a file global.d.ts at the root of my src folder, and added the following code inside :
declare module 'chartjs-plugin-stacked100';
declare module 'chartjs-plugin-stacked100'{
export function ChartjsPluginStacked100(): function
}
And now, I am getting the following error on the import of the plugin:
Unable to resolve path to module 'chartjs-plugin-stacked100'.
So I can't use this plugin, because I can't import it correctly. Am I doing something wrong?
I tried to create a reproducible example on sandbox, which is actually working( I even added my tsconfig.json and my eslintrc.json, because I thought it could have cause this issue).
Do you have any hint about this failing import ?
I found out that my error was caused by my eslintrc configuration. So I just had to add this in the .eslintrc.json (in the root of my src folder):
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
So now I am able to import the js module

TypeError while importing Socket Client with ReactJS

I'm getting this error while importing the Socket into my React Component
I'm using "react": "^17.0.2", and "socket.io-client": "^4.3.1" versions.
I have only added this line and it comes up with this error
I have also tried without { } (curly brackets) but nothing changed. I searched google a lot but all having the same king of import and works well for them. Whats going wrong for my case ?
Don't know how but deleting the node_modules folder and reinstall all packages fresh is solved my problem.

How do I troubleshoot YARN compilation errors with React components?

I'm starting to build my way on the world of React web apps, for that I'm following the Carbon Design System tutorial available here: https://www.carbondesignsystem.com/developing/react-tutorial/step-1
For when I start adding Routing based on the steps of the page, I found myself stuck in the following failed to compile error:
Failed to compile.
./node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js
TypeError: [BABEL] /home/hvg1928/carbon-tutorial/node_modules/#pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js: api.assumption is not a function (While processing: "/home/hvg1928/carbon-tutorial/node_modules/babel-preset-react-app/dependencies.js$0$18")
at Generator.next (<anonymous>)
at Generator.next (<anonymous>)
As I understand, a call is being made to api.assumption in the React Refresh plugin which I don't see listed in the dependecies of the package.json file:
"dependencies": {
"#carbon/icons-react": "10.22.0",
"caniuse-lite": "^1.0.30001258",
"carbon-components": "10.25.0",
"carbon-components-react": "7.25.0",
"carbon-icons": "7.0.7",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.5",
"react": "16.10.0",
"react-dom": "16.10.0",
"react-router-dom": "5.0.0",
"react-scripts": "4.0.1"
},
Based on this, where should I start looking for troubleshooting this compilation error? Are there a series of steps that could be used to troubleshoot compilation errors like these?

React Native crashes after upgrade to version 0.56. Possible Babel issue?

After upgrading my React Native project using react-native-git-upgrade I get the following error:
error: bundling failed: TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo (/Users/jan/Startup/react-native/ordersome/node_modules/#babel/traverse/lib/scope/index.js:978:13)
at BlockScoping.updateScopeInfo (/Users/jan/Startup/react-native/ordersome/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
at BlockScoping.run (/Users/jan/Startup/react-native/ordersome/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (/Users/jan/Startup/react-native/ordersome/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
at newFn (/Users/jan/Startup/react-native/ordersome/node_modules/#babel/traverse/lib/visitors.js:237:21)
at NodePath._call (/Users/jan/Startup/react-native/ordersome/node_modules/#babel/traverse/lib/path/context.js:65:20)
at NodePath.call (/Users/jan/Startup/react-native/ordersome/node_modules/#babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/jan/Startup/react-native/ordersome/node_modules/#babel/traverse/lib/path/context.js:100:12)
at TraversalContext.visitQueue (/Users/jan/Startup/react-native/ordersome/node_modules/#babel/traverse/lib/context.js:142:16)
It seems like this problem has something to do with babel. I restarted metro as well as my simulator, but that did not change a thing. Also here are all the packages I've installed that have anything to do with babel (package.json):
"babel-eslint": "^8.2.5",
"babel-jest": "23.2.0",
"babel-preset-react-native": "4.0.0",
And here is my .babelrc:
{
"presets": ["react-native"]
}
I generated the project using react-native init when it was still at 0.55.
Try to update the version forbabel-preset-react-native in your package.json like so:
"babel-preset-react-native": "^5".
According the babel-preset-react-native entry on npmjs.org, it is obsolete. metro-react-native-babel-preset is the replacement.

Resources