We Keep Coding

How to client-side-routing with create-react-app

tl;dr: What changes do I need to make to the npx create-react-app environment to enable client-side routing with react-router?
EDIT: Answered my own question, do not use href to link to within your app, use react-router-dom 'Link'.
In more detail..
I have followed Andrew Mead's React tutorial and all went well.
His setup utilised webpack with the following inserted to the webpack.config.js file..
devServer:{
contentBase:path.resolve(__dirname, 'public'),
historyApiFallback: true
}
..where historyApiFallback: true meant his dev-server utilised client-side routing vs server-side.
Now that I finished the bulk of the tutorial I decided to create my own app using npx create-react-app.
Everything is working fine, but the routing is not client-side and there is no webpack.config.js file.
I understand CSR works by serving index.html only and manipulating the DOM in the background.
The documentation states one way to make this work is to import 'express' which isn't part of the create-react-app initial environment, and include some code using the variable app. However, I don't actually know where this file lives / should live / where to important/edit etc, or whether express is actually required and perhaps there's a way to "natively" do this without adding another module to my react package.
Here are the relevant script snippets for clarity in case I have done something wrong.
Thanks in advance.
Paul.
index.js
// react imports
import React from 'react';
import ReactDOM from 'react-dom';
// materialize imports
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import './styles/customcss.css';
// redux imports
import store from './app/store';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';
// component imports
import AppRouter from './app/router';
// app render
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<AppRouter />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
./app/router/
import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import AppMainPage from "../pages/portalPage";
import ConnectedAccountPage from "../pages/accountPage";
import ConnectedPostPage from "../pages/postPage";
import { SiteWideNavBar } from "../components/sitewide/navbar";
import { SiteWideFooter } from "../components/sitewide/footer";
const AppRouter = () => (
<BrowserRouter>
<div>
<SiteWideNavBar />
<Switch>
<Route path="/" exact={true} component={AppMainPage} />
<Route path="/account" exact={true} component={ConnectedAccountPage} />
<Route path="/post" exact={true} component={ConnectedPostPage} />
</Switch>
<SiteWideFooter />
</div>
</BrowserRouter>
);
export default AppRouter;
EDIT: package.json if relevant
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.5.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"materialize-css": "^1.0.0-rc.2",
"moment": "^2.29.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-forms-materialize-css": "^1.0.1",
"react-google-maps": "^9.4.5",
"react-icons": "^4.1.0",
"react-materialize": "^3.9.6",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"uuid": "^8.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Everything was configured correctly, the issue was I was using NavItem with href="/" etc from react-materialize in my navbar and not Linkfrom from react-router-dom.
If you are getting this issue: You should be using Link from r-r-d and for any redirects also use props.history.push('/'). Whilst this part wasn't relevant to my issue, if you are here you might be experiencing the same issue by trying to redirect using something other than a prop.history.push() method.

HTML - styled-components: Error: Element type is invalid: expected a string or a class/function but got: object

Hello I just started using styled-components on my project.
My working environment is:
1) npm version 6.12
2) Node.js version 12.13
3) VS Code
After installing styled-components from official documentation:
sudo npm install --save styled-components
my project does not compile anymore throwing the following error:
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
object. You likely forgot to export your component from the file it's
defined in, or you might have mixed up default and named imports.
Check the render method of Home.
What I have done so far:
1) As advised by the debugger I double-checked my Home page and tried to see if I forgot to import the component. However it is correctly imported but still does not work.
2) Always as advised by the debugger I checked if there was a invalid type element. However I think the syntax is correct. To be sure about that I consulted the official documentation on how to correctly reference these types of components. Unfortunately it didn't work too.
3) After more research I came across this useful post. It seems that it could be due to a not precise reference to the include. However, my project correctly worked/compiled/built until I installed styled-components. All the import/export I did in the same way.
I am providing the following snippets of code where I have the error:
StyledHero.js
import styled from "styled-components"
const SimpleButton = styled.button`
color:red;
background:green;
`;
export default SimpleButton;
Home.js
import React from 'react'
import Hero from "../components/Hero"
import Banner from "../components/Banner"
import {Link} from "react-router-dom"
import Services from "../components/Services"
import FeaturedVessel from "../components/FeaturedVessels"
import Button from "../components/StyledHero"
export default function Home () {
return (
<>
<Hero hero="defaultHero">
<Banner title="Vessels" subtitle="Currently Tracked Vessels">
<Link to="/vessels" className="btn-primary">
Vessels
</Link>
</Banner>
</Hero>
<Services />
<FeaturedVessel />
<Button>hello</Button>
</>
);
}
Additional option I tried:
As a final note to try to solve the problem I thought that the component I created using styled-components is supposed to be exported with the same name, so I also tried to export it with the exact name of the component create inside StyledHero.js:
StyledHero.js
import styled from "styled-components"
const SimpleButton = styled.button`
color:red;
background:green;
`;
export default SimpleButton;
Home.js
import React from 'react'
import Hero from "../components/Hero"
import Banner from "../components/Banner"
import {Link} from "react-router-dom"
import Services from "../components/Services"
import FeaturedVessel from "../components/FeaturedVessels"
import SimpleButton from "../components/StyledHero"
export default function Home () {
return (
<>
<Hero hero="defaultHero">
<Banner title="Vessels" subtitle="Currently Tracked Vessels">
<Link to="/vessels" className="btn-primary">
Vessels
</Link>
</Banner>
</Hero>
<Services />
<FeaturedVessel />
<SimpleButton>hello</SimpleButton>
</>
);
}
If could be useful below my package.json:
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-icons": "^3.8.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"styled-components": "^5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Can someone point me in the right direction and understand what is the problem?

Module not found: Can't resolve 'react-datepicker

I'm trying to use date picker in a MERN tutorial, but it fails to compile because it can't resolve 'react-datepicker'. I've rm -rf node_modules and datepicker to no avail.
component.js
import axios from 'axios';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
package.json
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-datepicker": "^2.5.0",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1"
},
I'm wondering if the version (2.10.0) I've installed is somehow not compatible with something... when I installed there were no err or missing required dependencies.

I have resolved this problem
Type npm install react-datepicker --save in terminal on local environment or on production
Then import these in your component
import DatePicker from "react-datepicker"; used this in component where i need date-picker
import "react-datepicker/dist/react-datepicker.css"; used this app.js
it worked for me.

import DatePicker from 'react-datepicker/dist/react-datepicker';
Use this.
The same problem occurred with my code too, and this worked.

Good grief.
'../react-datepicker';
Thanks for helping me rubber duck!

None of the above code snippet worked for me.. But the below snippet worked fine in my react application.
https://github.com/Hacker0x01/react-datepicker/issues/879
import React, {useEffect, useState} from "react";
import DatePicker from "react-datepicker"
import "react-datepicker/src/stylesheets/datepicker.scss";
export default function SimpleClassDatePicker() {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={date => setStartDate(date)} />
);
};

"npm i react-date-picker" It works for me ."npm i react-date-picker"not "npm i react-datepicker"

Go and check react-date-picker folder in node_modules.
Mine was not react-datepicker..
So importing should be;
import DatePicker from "react-date-picker";
import "react-date-picker/dist/DatePicker.css";

React and Express not working?

I'm fairly new to Node.js, react, and Express. I'm trying to make a basic application and it seems like I can't initialize express.
When I do npm start I get this in the terminal
./node_modules/express/lib/view.js
81:13-25 Critical dependency: the request of a dependency is an expression
My package.json looks like
{
"name": "matchplay",
"version": "0.1.0",
"private": true,
"dependencies": {
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {}
}
and my index.js looks like
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {AppTitle, LoginForm} from './App';
import registerServiceWorker from './registerServiceWorker';
const express = require('express')
const app = express();
const element = (<div>
<AppTitle/>
<LoginForm/>
</div>);
ReactDOM.render(element, document.getElementById('root'));
registerServiceWorker();
When I go to my localhost:3000 the following error is given to me;
TypeError: Cannot read property 'prototype' of undefined
./node_modules/express/lib/request.js
node_modules/express/lib/request.js:31
Can someone point me in the right direction?

you should divide the server (express app) and client (react web) to separated folders and implement them in each folder individualy

If you are planning on serving your react app with express your code won't do, you are giving your client express which will basically allow them to host their own server?
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {AppTitle, LoginForm} from './App';
import registerServiceWorker from './registerServiceWorker';
const express = require('express') //<--- Here
const app = express(); //<--- and here
//These should not be here
const element = (<div>
<AppTitle/>
<LoginForm/>
</div>);
ReactDOM.render(element, document.getElementById('root'));
registerServiceWorker();
If you want to serve your react build using an express server it should be a separate project, or at-least a meta project where the react app builds into your express app's public directory.

React js tomcat, Uncaught SyntaxError: Unexpected token import

I am new to react js, i am trying to create react js based simple page using export and import functionality. Below is the description
App.jsx
import React from '../build/react'
export default class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
main.jsx
import {ReactDOM} from '../build/react-dom'
import {App} from 'App'
ReactDOM.render(<App />, document.getElementById('app'));
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="build/browser.min.js"></script>
<script src="custom/main.jsx"></script>
</head>
</html>
I have deployed it on tomcat, when i am trying to access "test.html" from browser it is giving me
Uncaught SyntaxError: Unexpected token import at main.jsx : 1
Please help me, whether i have missed anything in this.

I had a similar problem. I did all that I could to solve it but to no avail. I deleted node_module from C: and issued npm install to reinstall node_module but still no solution.
I replaced my package.json with
{
"name": "react-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"express": "^4.16.2",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.1.1",
"react-scripts": "0.9.5"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
and replaced my index.js with
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
I later made changes to them to suit my app's requirements. It worked perfectly - I can't explain how it happened.