Upgrade React to 16.8+ version

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)

1 Like

@AndyatFocallocal @Marvelxy
I have tried to upgrade react to the latest version, here’s what I’ve discovered so far:

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

  2. We need to upgrade the react router to be the v6 version. This needs to be a separate task.

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

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

2 Likes

@zhna123 , keep up the good work.

@AndyatFocallocal , what do you think about this:

1 Like

@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 :slightly_smiling_face:

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 :parasol_on_ground:

1 Like

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.

1 Like

Thanks very much Sylvain, I hope you’re well :slightly_smiling_face:

Okay I can try that soon. How do I integrate the react web app with the platform? Which documentation can I follow?

1 Like

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.

2 Likes

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

1 Like

It’s because of discourse and docuss integration.

1 Like

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!

1 Like

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.

1 Like

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 :slightly_smiling_face:

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?

1 Like

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 commented out the user check code for now, but how should I handle this? Thanks.

1 Like

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.

1 Like