Since we’ve upgraded meteorJS, it makes sense to upgrade react to take advantage of the newest features.
Note: It will be easier if we upgrade to 16.8 first. (16.8 → 17 → 18)
Since we’ve upgraded meteorJS, it makes sense to upgrade react to take advantage of the newest features.
Note: It will be easier if we upgrade to 16.8 first. (16.8 → 17 → 18)
@AndyatFocallocal @Marvelxy
I have tried to upgrade react to the latest version, here’s what I’ve discovered so far:
Enzyme is dead and there won’t be react 18 support. It is recommended to use react-testing-library
. I removed this package, and I will create a task for this work.
We need to upgrade the react router to be the v6 version. This needs to be a separate task.
uniform package upgrades will be another task (I am not familiar with it, but if we will still be using it, the doc indicates there are breaking changes)
google map support can use react-google-maps/api
instead of the previous react-google-maps for latest support.
There are some other incompatible modules (with react 18 update), but they all looked to be specific ui features, eg, autosize, select, swipeable, .etc. I am not familiar with these, but they looked like they can be tackled when working on specific parts of the code. So I left them alone for now.
I do have one concern - see the following
warning:npm WARN dcs-react-router-sync@1.0.17 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
npm
WARN dcs-react-router-sync@1.0.17 requires a peer of react-dom@^16.0.0 but none is installed. You must install peer dependencies yourself.
According to the npm page, dcs-react-router-sync
is an npm package to synchronize the React Router with the Docuss plugin. So this is related to Discourse, right? But docuss project is not active anymore: GitHub - sylque/docuss: A comment/discussion/collaboration system for websites and web apps If this version doesn’t go with react 18, will it break the platform? I didn’t find much information about how this package was used, do you or anyone else know about it? Thanks!
You can see my commit here in my branch:updated some packages · zhna123/fl-maps@70a272a · GitHub
@zhna123 we’ve taken on keeping Docuss updated ourselves as we’ve heavily built upon it with our platform build, and it’s a cool project
The latest version is here: The Public Happiness Movement (formerly Focallocal) · GitHub
Whether upgrading React will break it or not is difficult to say, and whether it would be an easy fix if it did.
The original author @syl might know the answer. If not we’d have to try and see ourselves. Ideally in localhost as we haven’t got our testing server running again.
Also, I’m on holiday until next Tuesday. I’ll still reply but might be a bit slower than usual
Hi,
I’m the original author of dcs-react-router-sync, which has a hard-coded dependency to react 16 (see this line).
This package is not supported anymore and I don’t know whether it will work under react 18. You might want to try to clone the repo (as you did with dcs-discourse-plugin and dcs-client here), update the dependency to react 18 and see what happens.
Thanks very much Sylvain, I hope you’re well
Okay I can try that soon. How do I integrate the react web app with the platform? Which documentation can I follow?
Also I have a code question.
Looking at this line of code(and the Link tag below): fl-maps/index.js at master · focallocal/fl-maps · GitHub
(These are the two search boxes on the front page)
How come this link to an external page instead of a route? Is this because of integration with discourse? Locally this link won’t work. I need to manually type in the route to see different pages.
@Marvelxy made a dirty quick fix as the homepage wasn’t working as we wanted, just to get the platform to a minimal useable state. He’s the best person to answer questions here.
It’s because of discourse and docuss integration.
Ah I get the question, sorry I didn’t see what the issue was right away.
Docuss allows us to run a React app inside an i-frame Discourse. We decided to do this as it basically means we could strap an excellent community building tool with god-tier admin section directly into the React app we’d been building.
Giving us far more than we could have easily built. Because React is in an i-frame it is necessary to escape from that i-frame in order to load a page on the other side.
Is that the issue you are seeing @zhna123?
Okay I see. I guess we need a condition there to make it work as a standalone app as well.
So the master branch has all the commits from deployment branch(deploy-phm) because we kept merging deployment branch commits back into master, but it doesn’t run as a standalone app properly. I understand that is a problem we want to fix soon, but just need to make sure I understand the situation correctly.
I’d like to try integrating the react app with discourse and docuss to see if it would cause any problems regarding react upgrades. That’s probably the first thing we need to get out of the way before I go too far into updating other packages.
Is there a documentation I can follow? Can you point me to the steps? Thank you!
Yes, until we have our testing/staging server back master, phm-deploy and btm- deploy should be identical (btm-deploy is not loading though so it’s fallen behind as there’s no reason to catch up).
emphasized textHere’s Discourse: Setting up Discourse for Local Development (Local Host)
Here’s the admin set up stage: Setting up Discourse via the admin section after launching a new site
There’s a few pages in the Documentation section regarding Docuss so it’s best to run a search using the search icon for ‘Docuss documentation’
Thanks. I will give it a try.
Would it be easier to test on a live site?
It’s a bigger task, but if you want I can give you access to the servers and you could fix the settings for the testing server, or we just delete it and set up a new one. If that would make testing the React upgrade easier it would also be very cool to get that running again
Okay I think I can try and see if I can fix the testing server. Have it already had Discourse set up? Was it down because of the Mongo DB problem as well?
Yes. During attempts to fix the DB issue both the testing server and BTM got broken and stopped building. Let me connect you to Tom over on Slack.
Hi @Marvelxy
I was trying to run the fl-maps master branch locally, and couldn’t figure out how to log in, here is the screenshot when I clicked on “Gather”.
I don’t remember ever login-in on the local site. I’ve only needed to log in on local discourse. Meanwhile, how did you fix this error:
“Error: Cannot find module './mup-secrets.json”
My local version is beginning to throw this. I remember you resolved it, but I didn’t follow much.