Vivek Iyer Vivek Iyer - 2 years ago 66
Node.js Question

ReactJS - Cannot find module "."

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 Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download