ReactJS - Cannot find module "."

Question

I tried to call a function inside that returns an asset url from local but directory . But it return an error missing module "."

The function is working perfectly fine outside require function.

header.jsx

class Header extends Component {
render (){
    const checkActive = (page) => {
           if ( page === this.props.activePage)
               return "active"
           else
               return null
    }

    const renderNavIcon = (page) => {
           if ( page === this.props.activePage)
               return "../../assets/images/"+page+"_red.png" ;
           else
               return "../../assets/images/"+page+"_grey.png" ;
    }
    return(
        <nav className="navbar navbar-default">
            <div className="container-fluid">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                     </button>
                    <a className="navbar-brand"><img alt="Frapp Logo" src={require("../../assets/images/onlyheartlogo.png")} />
                    </a>
                </div>
                 {console.log(renderNavIcon("pending")}
                <div className="collapse navbar-collapse" id="myNavbar">
                    <ul className="nav navbar-nav main-nav">
                      <li className={checkActive("pending")}><a href="/pending"><img src={require(renderNavIcon("pending"))} />Pending</a></li>
                      <li className={checkActive("support")}><a href="/support"><img src={require(renderNavIcon("support"))} />Support</a></li>
                      <li className={checkActive("live_edits")}><a href="/live-edits"><img src={require(renderNavIcon("live_edits"))} />Live Edits</a></li>
                      <li className={checkActive("brand_managers")}><a href="/brand-managers"><img src={require(renderNavIcon("brand_managers"))} />Brand managers</a></li>
                      <li className={checkActive("brands")}><a href="/brands"><img src={require(renderNavIcon("brands"))} />Brands</a></li>
                      <li><img alt="User" src={require("../../assets/images/armaan.png")} className="img-responsive" id="user_pic" /></li>
                      <li><a>Logout</a></li>
                    </ul>
                </div>
              </div>
          </nav>
    )
 }
}

{console.log(renderNavIcon("pending")} returns "../../assets/images/pending_red.png"

which is a valid url.

Please help ! Thanks !

Answer 1

Use require inside renderNavIcon function

const renderNavIcon = (page) => {
    if ( page === this.props.activePage)
        return require("../../assets/images/"+page+"_red.png") ;
    else
        return require("../../assets/images/"+page+"_grey.png") ;
}

just remove require from src

<li className={checkActive("pending")}><a href="/pending"><img src={renderNavIcon("pending")} />Pending</a></li>
<li className={checkActive("support")}><a href="/support"><img src={renderNavIcon("support")} />Support</a></li>
<li className={checkActive("live_edits")}><a href="/live-edits"><img src={renderNavIcon("live_edits")} />Live Edits</a></li>
<li className={checkActive("brand_managers")}><a href="/brand-managers"><img src={renderNavIcon("brand_managers")} />Brand managers</a></li>
<li className={checkActive("brands")}><a href="/brands"><img src={renderNavIcon("brands")} />Brands</a></li>