Not able to run react app after gridstack.js - reactjs

I want to use gridstack.js in my react app to manipulate the grid functionality. But after importing gridstack, npm i react-gridstack, i am having the issues which i am not able to resolve. I did the install on new project as well but did not work. Any clues will be appreciated
npm start
Issue:
Failed to compile.
./node_modules/gridstack/dist/gridstack.js
Module not found: Can't resolve 'jquery-ui/data' in '/home/rbatra/Desktop/react-app/dynamicreact/node_modules/gridstack/dist'

Related

React Module not found

I have installed an npm package on my react application but everytime I try to compile I get this error:
Module not found: Error: Can't resolve 'serialport' in 'C:\Users\Username\Desktop\ProjectGroup\c-test\src'
I have checked the node_modules folder and it is in fact in that folder.
i have also tried to install it again but it still throws the same error.
How would I go about fixing this?
As shown in comments, you installed only the types which are usefull for TypeScript.
Run npm i serialport

React Native: Under what circumstances do you have to manually add dependencies of your dependencies?

I have the component react-native-modal-datetime-picker in my React Native project. It's throwing the following error:
error: bundling failed: Error: Unable to resolve module '#react-native-community/datetimepicker' from 'node_modules/react-native-modal-datetime-picker/src/DateTimePickerModal.android.js: #react-native-community/datetimepicker could not be found within the project.
It seems that there's a reference in the react-native-modal-datetime-picker module to the #react-native-community/datetimepicker module. I've never run into a scenario before where I had to manually add a dependency of another dependency. Does anyone have any insight on why this is happening?
see the github
you need to run this:
expo install react-native-modal-datetime-picker #react-native-community/datetimepicker
I encountered this same problem and I found that the autolinking wasn't done so I had to run the command
npx react-native link #react-native-community/datetimepicker
‘ #react-native-community/datetimepicker’ is declared as a peer dependency to ‘ react-native-modal-datetime-picker’. Peer dependencies must be installed alongside the original package.
In dependencies, there should be node in case node is not there install npm i node
and try installing date picker again.

Unable to resolve a dependency in react native maps?

Problem:
I have create react native application. There I am using react-native-maps. When bundle is building it laves this error on the console.
Unable to resolve "./lib/components/MapHeatmap.js" from
"node_modules\react-native-maps\index.js"
I look for a solution but I was unable to do so. And I have not any clue for what should do for this error.Thank you
i had the same error just now, try sudo npm uninstall react-native-maps and install it again with expo comand (if you are using expo).
I was also facing the same issue in react native (expo)
For me clearing the cache worked...
just type this command
expo start -c
in cli project run this command on your project
npm cache clean --force
then reinstall the node module ......
then npm install

React app 'Failed to compile' because './node_modules/jss-default-unit/lib/index.js' not found

I've just updated some Node modules in a React react project, but now when I go to localhost:3000 I get a Failed to compile error because ./node_modules/jss-default-unit/lib/index.js was not found:
The packages I've upgraded are Material UI and react-scripts, as seen from a git diff of package.json:
How can I resolve this issue?
(This issue, https://github.com/cssinjs/react-jss/issues/146, describes a similar issue caused by Babel running on node_modules, but I wasn't able to find a webpack.config.js in node_modules/babel-loader to modify).
I resolved this by running npm install jss-default-unit and restarting the server with npm start.

Module parse failed with custom npm package

I'm new to React and new to npm module publishing, there is a beginning for all things!
I have created a react module.
I have created a react app (using create-react-app) and i have imported the module directly (not via a npm install).
On this case, i got no errors. The app is compiling without problems.
However, when i'm trying to use my module by importing it from npm (after it's get published), it fails.
To get this issue, i have created another react app (always by using create-react-app) then i have installed my package using npm i --save my-module-name.
I'm importing it commonly by using import { SomeComponent } from 'my-module-name' instead of importing it directly.
And i got the following error
Module parse failed: Unexpected token (59:37)
You may need an appropriate loader to handle this file type.
| }
|
| generateRecoverActionsContainers = () => {
|
After some searchs, it seems to come from the Webpack configuration. But, during my searchs, i saw that people recommand to not touch the react Webpack default configuration.
From there, i'm a bit lost on how to fix that and also, why it was compiling when the module was imported directly and not compiling when it was importing from node_modules... Should i had a webpack configuration in my npm module?
Thanks in advance for your precious help!
When you publish a module on npm, you should publish compiled code. Webpack doesn't compile node_modules

Resources