Integration React to Ruby Blog

[maria_coding]

I use this instructions (third variation - ruby API) 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:

• Yarn start for starting the development server (the React page can be accessed on http://localhost:3000/).

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.

[Sky020]

Hello there,

@maria_coding

I delete yarn.lock and node_modules and saw this:

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

yarn

[maria_coding]

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.

[Sky020]

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.

[Sky020]

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

[maria_coding]

At this react project I used npm.

I tried to use yarn remove babel-loader

I tried npm remove babel-loader

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

[maria_coding]

Did I right @Sky020 ?

[Sky020]

@maria_coding

At this react project I used npm.

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.

[maria_coding]

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

and uninstall and install 3.pdf - Google Drive

[maria_coding]

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?

[Sky020]

@maria_coding

some thing installing to the computer and some thing directly to the app folder.

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.

[maria_coding]

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).

[maria_coding]

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.

[maria_coding]

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)

5.pdf

[Sky020]

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.

[maria_coding]

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:

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).

[maria_coding]

With npm ls babel-loader I saw two places in blog with babel-loader and this time downgrade babel in both places:

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

[Sky020]

@maria_coding

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

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:

• node.js - Command to remove all npm modules globally - Stack Overflow

Let us know if this works.

[maria_coding]

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!!! I am so happy! Thank you, @Sky020 !