2021 Common Ionic React Errors And Development Code Notes

2022 - Building IONIC REACT applications is not easy. there is alot to learn. these are my notes to help me when I need to reference.

Set Build Home Page Base Path

Set the build path for the build/index.html file - thre are alot of files that are generated with the $ionic bulid command and on the index.html file you may see some of these tags with these properties:

To set this and other properties, go to the package.json file in the ionic app (not the build folder) and set the home property to the desired path

Dyanmic Routing with match.url

Routing to pages with dynamic parameters but parameters not provided: For example path="/mathematics/:operator/:limit/:common"

I had a situation with the math app withere the main component had a path="/mathematics/:operator/:limit/:common" of and when I entered the url path="/mathematics/ it would just show a blank page

TIP: take a look at the  <Redirect to="/mathematics/1/1/" /> that it redirects to a functional page

To be able to visit /mathematics/ without the parameters, you need to add the match.url: example: path={`${match.url}/users/:id`}

Visual Code Errors on All Components:

Change FROM

 TO:

How to setup Vs Code

Cannot use JSX unless the '--jsx' flag is provided.ts(17004)

While in Visual Code, I get errors on all IONIC Components like <ionApp> <IonContent> etc.. for example. In tsconfig.json, change

FROM

To:

OR

When starting the server or building, you might see a message like this:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

ERROR: UMD global

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)

Solution: change to: "react": "preserve" in file tsconfig.json

Get App Ready for production

Follow these three steps to build your app and get it ready for production to upload the app to the remote server.

1. package.json:
add a homepage property with the full path where the build folder will be ftp or uploaded, the property should look like this:
"homepage": "http://example.com/path/to/directory/build/",
NOTE: be sure to add the slash at the end!

2. public/index.html
Set the base to the full path of the url where the build folder will be uploaded. NOTE the slashed at the begining and the end. IMPORTANT: This should match the homepage in yoru package.json
<base href="http://example.com/path/to/directory/build/" />

3. src/App.tsx:
A IonReactRouter component with a basename property and provide the path to where the build folder will be uplaoded relevant to the absolute path of the website. NOTE the slashed at the begining and the end.
<IonReactRouter basename={'/path/to/directory/build/'}>

IMPORTANT: be sure to update all path in all your <Route> in the App.tsx file to include the PUBLIC_URL and ANY LINKS you have in the app, example:

For example, this is how I have my math app setup for Dev and Prod in App.tsx

Now you can build and FTP to your remote server

$ ionic build --production

JSON Stringfy Array object

Center a card:

JSX:

CSS

Hope that works