Integration React to Ruby Blog

I use this instructions (third variation - ruby API) https://sloboda-studio.com/blog/how-to-integrate-react-with-ruby-on-rails/ for integration react front part to a back on ruby.

After this:

Inside the application folder, you need to create the client folder and React interface by using the create-react-app client . Inside this folder, you can use Yarn for performing the following actions as:

I moved my react-folder inside ruby blog >> app and got error:

I delete yarn.lock and node_modules and saw this:

I am in trouble. Please, help.

Hello there,

Did you follow the next steps?:
3) Remove babel-loader from deps/devDeps
4)

yarn

I didn’t found babel-loader inside react folder (in any document, specially in package.json).

But since I delete node_modules there is only shows to install it again. I am confused.

If you have it, you need to remove babel-loader from package.json. It is best to do this through the command line, and not by deleting the text, because deleting the text does not change your app.

Run this in your terminal:

yarn remove babel-loader

If this says it cannot find babel-loader, then that is fine - it means you did not have it.

Then, run this in the terminal:

yarn

This will re-install all of your packages, based on what is inside the package.json file.

Hope this clarifies. If not, be sure to ask specific questions about what you do not understand.

Actually, I made the assumption you are using yarn. Is this true?

At this react project I used npm.

I tried to use yarn remove babel-loader
Снимок экрана 2021-04-09 в 17.40.52

I tried npm remove babel-loader



Now I see:
yarn yarn.pdf - Google Drive
npm npm.pdf - Google Drive

Did I right @Sky020 ?

In that case you should be using:

npm uninstall --save babel-loader

Then run:

npm install

Before doing that: I do not know what the current state of your workspace is, after all of this. So, i recommend you start from scratch.

  1. npm install
  2. npm run start
  3. See what happens. If it works, great. If not, then follow the first steps at the start of this post, provided it is the same error you come across as in your original post.

Sorry about the confusion.

I did install and run start 4.pdf - Google Drive

and uninstall and install 3.pdf - Google Drive

I just though, maybe I confused about the right place where I should to install: some thing installing to the computer and some thing directly to the app folder. Maybe that is my mistake?

With npm, if you use the global flag (-g), the package will be installed on your computer - usable everywhere. If you do not use the global flag, it will only be available where the node_modules folder is.

react-scripts should not be installed in your global.

Do you think you have installed babel-loader globally? If so, you will need to uninstall it with the -g flag.

It was locally: directly to react folder… but now I can’t to run another react app from different location and it shows the same message (it worked today – I checked when the react in the blog didn’t run).

For another react app: in terminal was something about different version of the babel. I found that I installed somehow babel to user folder (parent folder). I cleaned that folder and react app start running.
That means these packages works inherited and perhaps, different babel inside blog folder is the reason of the problem of react part inside blog.

UPD:

I locally removed babel (it says “not specified”), then installed babel (to the newest version 8.2.2), then tried to run (shows version 8.0.6 again)

To be clear, you should not be manually installing babel-loader.

  • You need react-scripts
  • react-scripts comes with babel-loader
  • If you install any other version than what react-scripts needs, there is likely to be errors.

Go through the error, starting from “The react-scripts package provided by Create React App requires a dependency…”, and slowly follow the instructions. You now know all the commands to install/uninstall.

Hi @Sky020 ,

I learned a lot already, thank you for your help.

I did:
1-2. deleted yarn.lock file and node_modules folder,
3. remove babel-loader through terminal in react part,
4. install npm and tried to run, then
5. install yarn and tried to run,
6. checked that I don’t have babel-loader in user folder, and
7. I asked about babel-loader in react part and then in ruby blog.

7-th step:
Снимок экрана 2021-04-10 в 14.36.26

Yesterday, I also tried to start new-create-app (installation of modern version) and removed babel in global, and remove/install oldest version of the babel-loader in blog (ruby part).

With npm ls babel-loader I saw two places in blog with babel-loader and this time downgrade babel in both places:
Снимок экрана 2021-04-10 в 15.26.38

Blog still run, but react still didn’t run … but message a little bit changed:

Glad you are learning from this. Often, bugs force us to learn.

At this point, it sounds like, for one or more previous projects, you installed a lot of packages globally - this should only rarely be done.

I would suggest uninstalling all global packages with something like:

Let us know if this works.

I feel like I am doing something unlegal…
So I changed manually babel-loader in the blog (parent app for react part), then webpack, then it asked for one more changing with webpack-dev-server and… react inside blog is start running!!! :sparkles: I am so happy! Thank you, @Sky020 !

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.