Other ReactJS project no autorefresh on FreeBSD?

timotheosh

timotheosh

Any other FreeBSD users using ReactJS on FreeBSD? I just started going through some of the introductory tutorials, and noticed that when I start the ReactJS project with the dev server, it does not actually autorefresh after saving changes to the project. This works under Linux, so I am quite certain that its not me (or at least not anything I am stupidly doing). I would love to hear from someone else if this is anything they have experienced and might know of a fix or work around (other than manually restarting the nodejs server).
 
drhowarddrfine said:
React is JavaScript. I don't know how that would have anything to do with FreeBSD.
Click to expand...
Yes, that was kinda my question. This works on Mac, Windows, Linux, but not on FreeBSD. Seeing how I am trying to do this on FreeBSD, and not the others, I am petitioning for insight/help to the issue. Correct me if I am wrong, but it seems to me that questions pertaining to Python and Perl could equally be so easily dismissed as "not related to FreeBSD". Yet posting here, I had to categorize my post as "C/C++", "Python", "Perl", "Shell", "Other". This is clearly "Other" and the best I can tell still is a FreeBSD topic. FWIW, Javascript is in the FreeBSD ports. Go figure.
 
timotheosh said:
Javascript is in the FreeBSD ports. Go figure.
Click to expand...
How so? Again, JavaScript runs in the browser and is part of that so it can't be installed separately.

That said, you would need to provide example code you are having problems with before anyone can help you. I ran a web dev company for 18 years using FreeBSD and never had any issues. But I would never use React so I doubt I can be of any help.
 
drhowarddrfine said:
How so? Again, JavaScript runs in the browser and is part of that so it can't be installed separately.

That said, you would need to provide example code you are having problems with before anyone can help you. I ran a web dev company for 18 years using FreeBSD and never had any issues. But I would never use React so I doubt I can be of any help.
Click to expand...
How so? From the pkg search:
Code: 
node10-10.24.1_2               V8 JavaScript for client and server
node14-14.18.1_1               V8 JavaScript for client and server
node16-16.13.0                 V8 JavaScript for client and server
npm-node14-6.14.8_1            Node package manager
npm-node16-6.14.8_1            Node package manager
npm-node17-6.14.8_1            Node package manager

How to replicate
Code: 
pkg install node16 npm-node16
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
Default web browser will pop up connecting to http://localhost:3000
Live server is running.
You should be able to edit src/App.js and upon saving, the server auto-refreshes
It doesn't. I know it's not the browser because if I completely close the browser, and then start it afresh and reconnect the content has not changed. It is a NodeJS server problem.

I thought this would be clear enough from my initial comments, at least to someone who has a rudimentary understanding of React. Perhaps, it would not have been.

I understand your confusion, Javascript has been historically only a client-side language (except when Netscape released Server-Side Javascript for their Flow Process Server in the late 90's). But it is a backend language as well, nowadays. Some goof at Google wrote a super efficient compiler for the language (V8) back in 2008, and the rest is, well, shall we say, "history". React projects come with a web server written in 100% Javascript. I think this is where my problem lies. So, my question is why does it behave differently on FreeBSD? Even if it can't be fixed, I want to understand what is happening.
 
ReactJS is client side.

But as I understood this thread, it's more about some dev environment that should have some "auto-refresh" as a convenience function. Maybe some more info about that would help.

I personally think most usage of React and similar SPA frameworks should warrant some tarring and feathering (all those cases where a "normal" web app would do just fine) -- but that's off-topic here ?
 
timotheosh said:
How so? From the pkg search:
Click to expand...
Well, you said Javascript was in ports and it's not. Those are libraries and package managers. Yes, they are written in javascript but the language itself is not.

But, again, I've run node and npm on FreeBSD servers over a decade (and you can't confuse me) for things like Stripe and Braintree credit card processing, along with custom software we wrote and never had any issues.

But until you provide code, no one is going to be able to help you.
 
VladiBG said:
If the software is using inotify(7) to monitor file changes this may explain why it's not refreshing under FreeBSD. See how your devserver is implementing watchFiles function.
Click to expand...
Thanks! That was what I was wondering but wasn't sure where to look. I am finding some references in the dependencies, but nothing for watchFiles. I added the inotify-tools and inotify compatibility library for kevent to no avail. Sounds like I'll need to file a bug report with the React team or at least ask questions there.
 
Zirias said:
I personally think most usage of React and similar SPA frameworks should warrant some tarring and feathering
Click to expand...
[off topic]
An empy react project is about 50mb and contains thousands of files.

And everybody seems ok with that.



JavaScript was a mistake.
[/off topic]
 
timotheosh said:
Thanks! That was what I was wondering but wasn't sure where to look. I am finding some references in the dependencies, but nothing for watchFiles. I added the inotify-tools and inotify compatibility library for kevent to no avail. Sounds like I'll need to file a bug report with the React team or at least ask questions there.
Click to expand...
Did you ever solve this?
 
timotheosh said:
Any other FreeBSD users using ReactJS on FreeBSD? I just started going through some of the introductory tutorials, and noticed that when I start the ReactJS project with the dev server, it does not actually autorefresh after saving changes to the project. This works under Linux, so I am quite certain that its not me (or at least not anything I am stupidly doing). I would love to hear from someone else if this is anything they have experienced and might know of a fix or work around (other than manually restarting the nodejs server).
Click to expand...
This is caused by a few things: IDE settings like VIM and/or FreeBSD's use of kqueue rather than inotify. You should also make sure that your web browser is configured correctly so that it reloads things correctly (watch the console log and such to debug things until they work as expected). You should also consider that any lack of reloading may also be the result of React not registering your changes as an updatable event (confirm no bugs, and scan for any github issue(s)).
 
alexseitsinger said:
This is caused by a few things: IDE settings like VIM and/or FreeBSD's use of kqueue rather than inotify. You should also make sure that your web browser is configured correctly so that it reloads things correctly (watch the console log and such to debug things until they work as expected). You should also consider that any lack of reloading may also be the result of React not registering your changes as an updatable event (confirm no bugs, and scan for any github issue(s)).
Click to expand...
I don't think so node is running the dev command in the terminal why would vim or the ide matter?
 
TheDantee said:
I don't think so node is running the dev command in the terminal why would vim or the ide matter?
Click to expand...
(neo)VIM requires certain options set so that the filesystem is refreshed after each edit. If you end up using it, look the configuration up to make sure it works correctly. Other IDE may behave similarly.
 
alexseitsinger said:
(neo)VIM requires certain options set so that the filesystem is refreshed after each edit. If you end up using it, look the configuration up to make sure it works correctly. Other IDE may behave similarly.
Click to expand...
Yeah but I still don't think that's it as its not running in the IDE React and NextJS have a function of their own to refresh the code on change and display it without needing to rerun the command (eg. "next dev") if anything I would say it's most likely a node issue as I have had issues with React and NextJS before with different node versions on Gentoo or it's something in the system like you mentioned earlier "FreeBSD's use of kqueue rather than inotify" which maybe needs to be filed as a bug report to React then. You can read more about this feature here - https://nextjs.org/docs/basic-features/fast-refresh
 
TheDantee said:
React and NextJS have a function of their own to refresh the code on change and display it without needing to rerun the command
Click to expand...
Its just as possible to develop a react project on FreeBSD as it is on linux. The filesystem changes may not be detected as they are on linux, which uses inotify, because of FreeBSD's use of kqueue (polling instead of messages?). If it isn't that, it likely has something to do with your IDE blocking the updates. If it's not that, its likely that your browser is blocking the changes from rendering.
 
alexseitsinger said:
Its just as possible to develop a react project on FreeBSD as it is on linux. The filesystem changes may not be detected as they are on linux, which uses inotify, because of FreeBSD's use of kqueue (polling instead of messages?). If it isn't that, it likely has something to do with your IDE blocking the updates. If it's not that, its likely that your browser is blocking the changes from rendering.
Click to expand...
I would lean towards kqueue then because the error shows up in NextJS when running the command that it can't fast refresh. I'm pretty sure the browser and IDE have nothing to do with the command running in node. It's not that the command doesn't work it works and runs it's just missing the auto refresh by the looks of it to me.
 
TheDantee said:
in NextJS when running the command that it can't fast refresh.
Click to expand...
This turns out to be true for me, too. It seems like the bundle isn't being re-compiled after the edited file is saved. I haven't tried to compare the hashes to confirm this, yet. Have you had any luck getting it to work? I may resort to my old project configuration with babel and such. Which editor are/were you using?
 
alexseitsinger said:
This turns out to be true for me, too. It seems like the bundle isn't being re-compiled after the edited file is saved. I haven't tried to compare the hashes to confirm this, yet. Have you had any luck getting it to work? I may resort to my old project configuration with babel and such. Which editor are/were you using?
Click to expand...
I switched my project over to HTML with PHP I was going to open a bug report on the React side of things as NextJS is based on React but I was waiting to hear back from timotheosh you are more than welcome to submit the bug report. I submitted a different issue for OpenBSD not even running NextJS Recently as well but no responses on it :(
 
maksim said:
Hey guys,

Using "yarn" instead of "npm" and "fswatch-mon" from packages solved my issue with autorefresh.
Click to expand...

How did you introduce fswatch to nextjs such that yarn run next dev makes use of it instead of using watchpack (which using fs.watch)?

It's worth mentioning that fs.watch only emits change events when files are watched, not directories.
 
TheDantee said:
I switched my project over to HTML with PHP I was going to open a bug report on the React side of things as NextJS is based on React but I was waiting to hear back from timotheosh you are more than welcome to submit the bug report. I submitted a different issue for OpenBSD not even running NextJS Recently as well but no responses on it :(
Click to expand...

I spent a little time browsing the nextjs sources but it seemed like more work than it was worth so I got react-refresh to work with webpack: https://github.com/alexseitsinger/react-refresh-example
 
alexseitsinger said:
I spent a little time browsing the nextjs sources but it seemed like more work than it was worth so I got react-refresh to work with webpack: https://github.com/alexseitsinger/react-refresh-example
Click to expand...
Thanks, It works for me:
webpack.config.js
JavaScript: 
watchOptions: {
        // Required for react-refresh to work on FreeBSD.
        poll: 500,
      },

I was migrating my project from React 16 to React 18 on FreeBSD and got a lot of problems because
react-hot-loader deprecated and the recommended react-refresh didn't work on FreeBSD.
 
You must log in or register to reply here.
Back
Top