Resolving Upgrade Challenges: Node.js, React Router, and Deployment Fixes

Photo by Kenny Eliason on Unsplash

After completing several exciting projects during the bootcamp, I graduated from school and had to take some time off to look after my son. After a while, I was ready to get back to work, and I began meticulously reviewing my projects to make them even better. To my surprise, I found that there had been updates to Node.js, React, and many other libraries I had used, resulting in numerous errors.

I tackled each one individually and successfully polished my projects. In sharing the issues and solutions I encountered here, I aim to assist you all in one go while creating a reminder note for myself.

NodeJS Upgrade Bugs & Solution Ideas

If you’re revisiting your previous projects and decide to upgrade your Node.js to a version above 17.0.1, you might encounter some unexpected issues. You may come across recommendations to downgrade it in order to resolve these issues. But this doesn’t seem like a great option for curious learners like us, does it?

If you encounter this type of bugs ,you can do the following ones:

1- Install react-scripts:After upgrading Node.js , to prevent lots of possible problems, you can install the latest ‘react-scripts’ package using the following command:

npm i react-scripts@latest

2-Resolve Postcss-cli Issue: If you encounter an issue where Postcss-cli cannot find flexbugs-fixes module, you can try resolving it by running the following command:

npm install -D postcss-flexbugs-fixes

3-Package Export Error:In cases where you come across an error like

'Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in the package.json of a module in node_modules'

you can attempt to update the Node.js version with:

npm update

If the issue persists, you can consider deleting the ‘package-lock.json’ file and the ‘node_modules’ directory. Afterward, you can reinstall the dependencies using:

npm i

React Router Update: Addressing ‘Nested Router’ Error

Routing Issue: You may encounter

You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

error after upgrading toreact-router-dom@6.0.0. To resolve this, there are changes you need to make in App.js.

In your index.js file, the following code remains unchanged:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<BrowserRouter>
  <App />
</BrowserRouter>
  document.getElementById('root')
);

However, in the previous versions of App.js, you used this structure:

import { BrowserRouter as Router, Route } from "react-router-dom";
import Main from "./Components/Main/Main"

function App(props) {
  return (
      <Router>
     <Route exact path="/" component ={Main} />
      </Router>
  );
}
export default App;

In the new version (6), you should make the following adjustments in App.js. Import { Routes, Route } instead of just { Route } as in the previous versions. Use element={<componentName/>} instead of component={componentName} Additionally, note that there is no need to import BrowserRouter again:

import {Routes,Route} from "react-router-dom"
import Main from "./Components/Main/Main"

function App() {
  return (
<Routes>
  <Route exact path="/" element ={<Main/>} />
</Routes>
  );
}
export default App;

These changes will ensure proper routing and avoid the multiple <Router> issue.

Deployment problems

Remember to adjust the Node.js version in your project settings when deploying it. If you encounter unexpected issues during deployment, you have the option to revert to the previous Node.js version in the settings and proceed with the deployment. However, it’s essential to keep in mind that this approach may lead to deprecation problems down the road. You might wake up one day and find that the site you deployed is no longer functional.

Here is my GitHub profile: https://github.com/elinoza & my deployed projects are listed on README.md file on profile