My codes for debugging Trans

about.js

import React from "react";
import { Container, Card, CardBody, CardImage, CardTitle, CardText, Row, Col, Fa } from 'mdbreact';
import './About.css';
import { Trans} from '@lingui/macro';

class About extends React.Component {
   constructor(props){
        super(props)
        this.state = {
            members:[]
        }
        //console.log("testing poll");
    }

    fetchPoll(){
        fetch(URL_ABOUT, {method: 'GET'})
        .then(response => response.json())
        .then(json => {
            this.setState({members:json['staff']})
        })
    }

    componentDidMount() {
       this.fetchPoll()
        console.log(this.members)
    }
  
   //get the pull for the third section of the members
    renderPollThree(){
        return this.state.members.slice(6, 9).map((item,index)=>{
            return(
                <Col key={item.idAbout} md="4">
                    <Card>
                        <CardImage className="img-fluid member-image" src={`http://localhost/sayo/api/web/about/${item.coverart}`} />
                        <CardBody>
                            <CardTitle className="member-name">{item.name}</CardTitle>
                            <CardText className="member-title">{item.position}</CardText>
                            <CardText className="member-title">{item.caption}</CardText>
                            <CardText>
                                <Fa className="fa fa-star member-icon-star"></Fa>
                                <Fa className="fa fa-star member-icon-star"></Fa>
                                <Fa className="fa fa-star member-icon-star"></Fa>
                                <Fa className="fa fa-star member-icon-star"></Fa>
                                <Fa className="fa fa-star member-icon-star"></Fa>
                                <Fa className="fa fa-star-o member-icon-star"></Fa>
                            </CardText>
                            <CardText className="member-description">{item.description}</CardText>
                            <div className="pull-right" style={{color: "rgb(60, 118, 61)"}}>@ {item.profilelink}</div>
                        </CardBody>
                    </Card>
                </Col>
            )
        })
    }

render(){
        return (
            <Container>
                <div className="my-3">
                    <div className="about-title mb-3"><Trans>About Muzikol</Trans></div>
                </div>
                <Row>
                    {this.renderPollThree()}
                </Row>
                <br/>
                <div className="about-sub-title">
                    <Trans id="about.title1"> ABEBOH<Trans/>
                </div>
  </Container>
        );
    }
}
export default About;

app.js

import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux';
import UserDashboardNavbar from './Navbar/UserDashboardNavbar.js';
import HomeNavbar from './Navbar/HomeNavbar.js';
import ArtistDashboardNavbar from './Navbar/ArtistDashboardNavbar.js';
import Main from './Main/Main.js';
import FooterPage from './Footer/Footer.js';
import { I18nProvider } from '@lingui/react';

class App extends Component {
    
    state = {
        catalogs: {},
         loading: true // appears after page has loaded
    }
  loadCatalog = async (language) => {
    const catalog = await import(
      './locales/'+language+'/messages.json')
    this.setState(state => ({
      catalogs: {
        ...state.catalogs,
        [language]: catalog
      }
    }))
  }
  componentDidMount() {
    this.loadCatalog(this.props.language);
     setTimeout(() => this.setState({ loading: false }), 1500); // simulates an async action, and hides the spinner
  }
  shouldComponentUpdate(nextProps, nextState) {
    const { language } = nextProps
    const { catalogs } = nextState
    if (language !== this.props.language && !catalogs[language]) {
      this.loadCatalog(language)
      return false
    }
    return true
  }
    render() {
        const { loading } = this.state;
        const {loggingIn, user, userType, language } = this.props;
        const { catalogs } = this.state;
        if (!catalogs[language]) return null;
        if(loading) {
            return null;
        }

        return (
            <I18nProvider language={language} catalogs={catalogs} >
                 <div className="">
                    {user && !loggingIn && userType==='Lover' &&
                        <div>
                            <UserDashboardNavbar /> 
                        </div>
                        
                    }
                    {user && !loggingIn && userType ==='Artist' &&
                        <div>
                            <ArtistDashboardNavbar />
                        </div>
                        
                    }

                    {!user &&
                        <div>
                             <HomeNavbar /> 
                        </div>
                       
                    } 
                    <Main />
                    <FooterPage />
                </div>
            </I18nProvider>
            
        );
    }
}
function mapStateToProps(state) {
  const { loggingIn, user, userType} = state.authentication;
  console.log('another ',state);
  const { language } = state.languagetion;
    return {
        loggingIn,
        user,
        userType,
        language,
    };
}

export default connect(
  mapStateToProps,
)(App)

The main pages two pages concern with my lingui library. I get the error:
Trans(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

/node_modules/babel-plugin-macros/dist/index.js
62:46-53 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted webpackHotDevClient.js:138
./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/loaders.js
8:17-34 Critical dependency: the request of a dependency is an expression
on my terminal