Unable to Add React to existing Rails app - reactjs

I've setup a rails app all good, server runs fine etc, now I need to add React to it.
I see the command
rails webpack:install:react
appears to be the way everyone recommends but when I run this I get the following error:
rails aborted!
Don't know how to build task 'webpacker:install:react' (See the list of available
tasks with `rails --tasks`)
Did you mean? webpacker:install
So I run webpacker:install, alls good then try with :react again and the same errors generated, I've got react added in the package.json file and react-rails in the gem file. I've also run bundled since adding these.
I cant find an answer anywhere so whatever you've got I'll take.
Thank you.

Found the issue, the problem was that webpacker:install:react was removed from webpacker v6, moved to version 5.4.3 and the issues resolved.
More info here:
https://github.com/rails/webpacker/pull/2802/files#diff-8efe491b392a5a50e31b54660bbc0e7258e544e36d4e0b8a65e4cca93d39d18c

As the above answer states, this was removed. If you see a tutorial telling you to run rails webpack:install:react you can simply skip it if you've already run rails webpack:install. React now works "out of the box" and so you don't need to specify it.

Related

WordPress CLI installation for ReactPress

sorry for the potentially obvious setup question but I can't seem to find the answer or am searching for the wrong thing.
I'm new to WordPress and I'm attempting to use the plugin ReactPress to add some React to my website. However I'm getting stuck on setup. The ReactPress instructions in WordPress tell me to:
It seems you don't have any React apps created. Go to /path/to/my/workpress in your command line and enter:
But that path/to/my/workpress doesn't exist. I installed WP-CLI so commands like wp info succeed, but I don't have this folder. I must be missing an installation step - any tips?
Thanks!

React-navigation installation error(following official docs). Unable to resolve module #react-navigation/native-stack

There are a bunch of questions already covering this exact error, but I've been through all of them, and so far none of the answers have worked for me. Platform is MacOS
Here is the error:
Steps to reproduce
(Following official React Navigation docs https://reactnavigation.org/docs/getting-started/):
Create a new expo managed app
expo init my-app
Navigate to directory
Start the app
expo start
**** At this point everything starts and works correctly ****
Install reactnavigation(follow official docs https://reactnavigation.org/docs/getting-started/ )
yarn add #react-navigation/native
Install dependencies
expo install react-native-screens react-native-safe-area-context
Wrap the code with a Navigation container (per the docs)
Start the app
expo start
**** App no longer works. Fails with the error I posted earlier ****
Things I've tried that haven't worked
The instructions that the error message provides (though I skip step 1, as I don't have watchman watches installed). Main thing here that I would expect to work is the deletion of node_modules and yarn.lock, but no luck :(. Same with deleting cache
using yarn add to add the dependencies instead of expo install
using npm to install everything
updating expo-sdk (I'm already on latest)
reinstalling everything
So, I actually was able to answer my own question in the process of writing it. I often do this, as I make sure to spend several hours trying to debug in the process of writing the question and making sure I've covered everything I can think to try.
Not sure of official self answer etiquette, but this was a pretty frustrating error for me, so I figure I'll post what worked for me here in case it can help anyone else in the future.
Answer:
The issue for me had nothing to do with the code or app itself, but rather the IOS simulator. Force quitting the simulator and restarting resolved the error. It seems that simply ctrl^c -> expo start -> i -> r is not enough to clear the internal state of the simulator.
There was actually even a clue in the error message itself, but I missed it because the error looked so similar to the one I was expecting. The clue was in the name of the module it was unable to resolve "#react-navigation/native-stack". In my reproduction steps, I was only using the NavigationContainer, as I was trying to get that working before installing any of the Navigators and trying to use those.
Why was it trying to resolve the native-stack navigator? I'm not 100% sure, but my guess is that there was some kind of cache in the simulator that wasn't being cleared properly. Why do I think that?
This problem started with me trying to use a native-stack navigator in another app I'm working on. I quickly ran into this error, and figured the best way to debug would be to spin up a brand new blank app and try to get ReactNavigation working in there. I started with just navigation package and NavigationContainer itself, and once I couldn't even get that working, I assumed the problem was with the base react-navigation package installation. I failed to notice that it was still trying to resolve that native-stack navigator.

Issue installing react-reveal

I am new to react and I am even newer to typescript. I am working on this project right now and I need to use this specific git repository which is a typescript project. I want to add react-reveal so I can have some cool animations on my website but I get this error message.
I am not sure why this specific library is not working because I have installed other librarys like reactstrap. If anyone could give me any information on how to get this to work or why this isn't working it would be much appreciated!
React-reveal doesn't seem to be actively maintained as it was last updated on August 2018.
Based on the error you received it looks that there is a library that is explicitly configured to only work with React v15 or v16. You could use a slightly older version of React that works with react-reveal. You're using React 17.0.2. You could try using React v16.14.0.
You could also follow the instructions in the error message - using the force option. Here is a link(npm: When to use `--force` and `--legacy-peer-deps`) that describes how that works.
A better way to go is search for a more popular actively maintained alternative like react-spring(https://react-spring.io/) or react-awesome-reveal(https://www.npmjs.com/package/react-awesome-reveal).
I found the problem, you must put this command in the terminal => npm config set legacy-peer-deps true

React app deployed to GitHub giving me a minified error #152

I am having a problem with my React application. I am trying to deploy the website to GitHub pages but I am getting this error:
Error: "Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=u for the full message or use the non-minified dev environment for full errors and additional helpful warnings."
The error is telling me to use the non-minified development environment, but I cannot figure out how to do this.
Here is a link to my GitHub repository if you would like to check!
GitHub repository
I am not sure how to solve this since this is the first time I try to deploy a website. I tried installing some dependencies like Webpack, Babel, and Parcel to bundle my files into a readable JavaScript file, but my guess is that something is not being translated properly, meaning that there might be a syntax error somewhere in my code.
When running the Webpack dependency I did get a series of errors, that is why I installed some other libraries and loaders:
Error on Terminal
I ran into the same issue. The issue occurred wherever I deployed a production build to - locally or Firebase. I found that I had some comments in my render/return code and removing them solved this for me, as discussed at https://github.com/facebook/create-react-app/issues/8687.
I removed the comments as suggested, but ended up using gh-pages instead of deploying via a docs directory on github, so it worked in the end. I have deployed other apps after that with comments and they work just fine.
So if you ever run into this, try gh-pages instead

react-native link - Maximum call stack size exceeded

Following the Documentation of rnfirebase.io
Having this error when try to link the installed package.
react-native link react-native-firebase
Scanning folders for symlinks in /PROJ-DIR/node_modules (45ms)
rnpm-install ERR! Something went wrong while linking. Error: Maximum call stack size exceeded
There was already an issue raised against this here
but solutions are based on a problem with Xcode.
I'm not working for ios yet.
A solution regarding android is not working too.
Can anyone help me with this?
Try removing your android and ios folders and use following commands:
1.react-native eject to recreate android and ios folders.
2.react-native upgrade Be careful while running this command because it will replace your configuration files.
3.Finally react-native link
Many a times i too get this error and I follow these steps to overcome.
Take a look at this link
Make sure is there any unwanted changes are done in ios's project file. if yes then revert back as it is.
I faced this error after merging two branch and i have accepted both changes and got error and fixed it by proper merging

Resources