1

The errors occurs when trying to visit /article/post.... Here's a snippet of the code of Routes.js where supposedly the error happens. The full error stack trace is on https://pastebin.com/M0pCULPj The full repo is on https://github.com/ElAnonimo/webpack4_2. What does Article.js lack to properly render?

Routes.js:

import React from 'react';
import { Route, Link } from 'react-router-dom';
import { Switch } from 'react-router';
import universal from 'react-universal-component';
import NotFound from './NotFound';

const UniversalComponent = universal(props => import(`./${props.page}`));

export default () => <div>
  <div className="nav">
    <Link to='/about'>About</Link>
    <Link to='/'>Gallery</Link>
    <Link to='/article/post'>Article 1</Link>
    <Link to='/article/post2'>Article 2</Link>
  </div>
  <Switch>
    <Route path='/about' render={({ staticContext }) => {
      const site = staticContext ? staticContext.site : location.hostname.split('.')[0];
      return <UniversalComponent page='About' site={site} />}}
    />
    <Route exact path='/'>
      <UniversalComponent page='Gallery' />
    </Route>
    <Route path='/article/:slug' render={({ staticContext, match }) => {
      const site = staticContext ? staticContext.site : location.hostname.split('.')[0];
      return <UniversalComponent page='Article' site={site} match={match} />}}
    />
    <Route component={NotFound} />
  </Switch>
</div>

Article.js:

import React from 'react';
import { connect } from 'react-redux';
import '../css/Article.scss';
import NotFound from './NotFound';
import { fetchArticle } from '../server/actions';

class Article extends React.Component {
  constructor() {
    super();
  }

  componentDidMount() {
    this.props.dispatch(fetchArticle(this.props.site, this.props.match.params.slug));
  }

  render() {
    const siteConfig = require(`../../data/${this.props.site}/siteConfig`);
    try {
      const imagePath = require(`../images/${siteConfig.aboutImage}`);
      require(`../css/${this.props.site}/theme.scss`);

      return (
        <div className='article'>
          <h1>{ this.props.title }</h1>
          <div className="content" dangerouslySetInnerHTML={{__html: this.props.__content}} />
        </div>
      );
    } catch(ex) {
      return <NotFound />
    }
  }
}

export default connect((state) => ({
  title: state.text,
  __content: state.content
}))(Article);
El Anonimo
  • 1,759
  • 3
  • 24
  • 38
  • HI. did you solve the issue? – Yilmaz Mar 30 '20 at 23:17
  • Not really but there is an issue now closed in the library repo. It was created about Aug 2018. These errors has smth to do with badly formatted paths for react-universal-component or with the lib reading those wrong. – El Anonimo Mar 31 '20 at 06:32
  • I think we followed the same webpack course. webpack beyond the basics. i have updated code up to your point :) I used this code as a boilerplate which is working great but i could not figure out how to implement in this tutorial. Do you have any idea? – Yilmaz Mar 31 '20 at 06:37
  • Here is the question I asked. could you pls check if you have time : https://stackoverflow.com/questions/60943237/react-router-dom-link-is-clearing-the-history-match-location-props-when-cli – Yilmaz Mar 31 '20 at 06:37
  • I could not figure out :( – Yilmaz Mar 31 '20 at 06:38
  • I did follow that same course. Here's the issue I talked about: https://github.com/faceyspacey/react-universal-component/issues/148. I wouldn't know how to resolve the other issue you linked to atm. – El Anonimo Mar 31 '20 at 07:04
  • does home component have – Yilmaz Mar 31 '20 at 07:14

0 Answers0