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 !

Why are you using require? Can't you just pass the icon path? It would prevent that kind of problem. — sjahan
– sjahan, Commented Jul 27, 2017 at 8:00
I believe your problem is the require(), what about using only <img src={renderNavIcon("pending")} /> ? — Erick Gallani
– Erick Gallani, Commented Jul 27, 2017 at 8:00
When i remove require my image source is : http://localhost:3000/assets/images/support_grey.png — Vivek Iyer
– Vivek Iyer, Commented Jul 27, 2017 at 8:20

Piyush Dhamecha · Accepted Answer · 2017-07-27 08:05:26Z

2

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>

answered Jul 27, 2017 at 8:05

Piyush Dhamecha

1,5151 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vivek Iyer Over a year ago

When i remove require my image source is : http://localhost:3000/assets/images/support_grey.png

Piyush Dhamecha Over a year ago

add require inside renderNavIcon function

Vivek Iyer Over a year ago

Sorry , didn't see your answer properly. Thanks !

Collectives™ on Stack Overflow

ReactJS - Cannot find module "."

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related