first of all i'd like to say that i'm a new developer of React and NodeJS.

I want use this technologies: - React as a client - NodeJS as a server - Webpack for build my files.

My project structure is the follow:

my-application/

webpack.server.js

webpack.client.js

server.js

client/client.js

client/app.js

client/ponents/header.js

client/ponents/mainLayout.js

client/ponents/footer.js

The header and footer files are not important so i'm not writing here. The important file are the following:

mainLayout.js

import React, { Component } from 'react';

// import ponent
import Header from './header';
import Footer from './footer';

class MainLayout extends React.Component {
  constructor (props) {
    super(props)
  }

  render() {
        return (
          <div className="App">
            <Header />

              {this.props.children}

            <Footer />
          </div>
        );
    }
}

export default MainLayout;

app.js

import React, { Fragment } from 'react';
import { Route, Switch } from 'react-router-dom';

import MainLayout from './ponents/mainLayout'

const AppComponent = () =>
    <Switch>
        <Route path="/" exact render={props => (
            <MainLayout>
                <h1>Hello World</h1>
            </MainLayout>
        )} />
    </Switch>
;

export default AppComponent;

client.js

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';

import AppComponent from './app';

ReactDOM.hydrate(
    <BrowserRouter>
        <AppComponent />
    </BrowserRouter>,
    document.querySelector('#root')
);

server.js

import express from 'express';
import React from 'react';

import AppComponent from './client/app'

var app = express();

const PORT = 3000;

app.use("/", express.static("build/public"));

app.get("/", (req, res) => {
    res.send(<AppComponent />)
});

app.listen(PORT, () => console.log('Now browse to localhost:3000'));

Run my project:

npm run build

npm run dev

but when i'm going at http://localhost:3000 my page response is {"key":null,"ref":null,"props":{},"_owner":null,"_store":{}}.

I don't understand why i have the error, something probably escapes me but i don't what.

Can you help me please?

Thanks you in advance, AS

first of all i'd like to say that i'm a new developer of React and NodeJS.

I want use this technologies: - React as a client - NodeJS as a server - Webpack for build my files.

My project structure is the follow:

my-application/

webpack.server.js

webpack.client.js

server.js

client/client.js

client/app.js

client/ponents/header.js

client/ponents/mainLayout.js

client/ponents/footer.js

The header and footer files are not important so i'm not writing here. The important file are the following:

mainLayout.js

import React, { Component } from 'react';

// import ponent
import Header from './header';
import Footer from './footer';

class MainLayout extends React.Component {
  constructor (props) {
    super(props)
  }

  render() {
        return (
          <div className="App">
            <Header />

              {this.props.children}

            <Footer />
          </div>
        );
    }
}

export default MainLayout;

app.js

import React, { Fragment } from 'react';
import { Route, Switch } from 'react-router-dom';

import MainLayout from './ponents/mainLayout'

const AppComponent = () =>
    <Switch>
        <Route path="/" exact render={props => (
            <MainLayout>
                <h1>Hello World</h1>
            </MainLayout>
        )} />
    </Switch>
;

export default AppComponent;

client.js

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';

import AppComponent from './app';

ReactDOM.hydrate(
    <BrowserRouter>
        <AppComponent />
    </BrowserRouter>,
    document.querySelector('#root')
);

server.js

import express from 'express';
import React from 'react';

import AppComponent from './client/app'

var app = express();

const PORT = 3000;

app.use("/", express.static("build/public"));

app.get("/", (req, res) => {
    res.send(<AppComponent />)
});

app.listen(PORT, () => console.log('Now browse to localhost:3000'));

Run my project:

npm run build

npm run dev

but when i'm going at http://localhost:3000 my page response is {"key":null,"ref":null,"props":{},"_owner":null,"_store":{}}.

I don't understand why i have the error, something probably escapes me but i don't what.

Can you help me please?

Thanks you in advance, AS

• javascript
• node.js
• reactjs
• webpack
• web-applications

• maybe because nodejs and react are running in the same port and I don't think that is possible or you need to change something to make it work – Vencovsky Commented Dec 4, 2018 at 10:23

4 Answers 4

You are running both front and back end on the same port. Go to package.json for your react app and replace your start script with the following script:

"scripts": {
    "start": "set PORT=3007 && react-scripts start",
     // the rest of your scripts
}

This will be the first step for resolving your issue. If you keep getting errors after that, let us know what are they.

I ran the application again using npm.

In the mand I entered: npm start in the application folder after this it worked again.

In App.js, add Routes in the import. Use element instead of ponent.

For Example:

import {BrowserRouter, Routes, Route, Link, Switch} from 'react-router-dom'
<Navbar />    
   <BrowserRouter>
      <Routes>
        <Route path="/" exact element = {</>}/>    
        <Route path="/" exact element = {</>}/>
      </Routes>
   </BrowserRouter>

This can be from the browser you are using. Copy the local host address on your address bar and paste on a different browser, Chrome remended. This is based on personal experience. It kept rolling on Opera browser until I opened it on Chrome.