menuIcon is not defined in react app when loading scss file

Question

I have an app using an import statement to load scss file. it builds fine but when loading in browser it errors

VM148 transformed.js:19714 Uncaught ReferenceError: menuIcon is not defined
    at Sidebar.render (VM148 transformed.js:19714)
   ...
VM148 transformed.js:13839 The above error occurred in the <Sidebar> component:
    in Sidebar (created by App)
    in div (created by App)
    in App

I am using the code from the following url https://ashiknesin.com/blog/build-custom-sidebar-component-react/

New error after appending empty string to src

VM279 transformed.js:831 Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
    in Link (created by Sidebar)
    in li (created by Sidebar)
    in ul (created by Sidebar)
    in nav (created by Sidebar)
    in Sidebar (created by App)
    in div (created by App)
    in App
...
VM279 transformed.js:418 Uncaught Error: You should not use <Link> outside a <Router>
...
(anonymous) @ VM279 transformed.js:66
VM279 transformed.js:13839 The above error occurred in the <Link> component:
    in Link (created by Sidebar)
    in li (created by Sidebar)
    in ul (created by Sidebar)
    in nav (created by Sidebar)
    in Sidebar (created by App)
    in div (created by App)
    in App

sidebar.js

import React from 'react'
import ReactDOM from 'react-dom'
import { IndexLink, Link } from 'react-router'
//import { BrowserRouter, IndexLink, Link, Route } from 'react-router-dom'
import './Sidebar.scss'
import classNames from 'classnames'

class Sidebar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showMenu: false
        }
        this.toggleMenu = this.toggleMenu.bind(this)
    }
    componentDidMount() {
        document.addEventListener('click', this.handleClickOutside.bind(this), true);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.handleClickOutside.bind(this), true);
    }
    toggleMenu() {
        this.setState({ showMenu: !this.state.showMenu })
    }
    handleClickOutside(event) {
        const domNode = ReactDOM.findDOMNode(this);

        if ((!domNode || !domNode.contains(event.target))) {
            this.setState({
                showMenu: false
            });
        }
    }

    render() {

        const showMenu = this.state.showMenu;
        const sidebarClass = classNames({
            'sidebar': true,
            'sidebar-menu-expanded': showMenu,
            'sidebar-menu-collapsed': !showMenu
        });

        const elementsClass = classNames({
            'expanded-element': true,
            'is-hidden': !showMenu,
        });



    return (
      <nav className={sidebarClass}>
        <img
          className="menuIcon"
          src=""
          onClick={this.toggleMenu}
        />
        <ul>
          <li>
            <Link className="expandable" to="/setting" title="Setting">
              <img
                src={'https://png.icons8.com/setting/ffffff'}
                alt=""
              />
              <span className={elementsClass}>Setting</span>
            </Link>
          </li>
        </ul>
      </nav>

        )
    }
}


export default Sidebar

As you can see the actual menuIcon variable is simply not defined in the code. The author has forgotten about it — Daniel Khoroshko, Jan 02 '18 at 10:27
it is in the css? `// Sidebar.scss .menuIcon{ margin-top: 70px; cursor: pointer; }` — shorif2000, Jan 02 '18 at 10:42
Hi! That's is just a class which will be appended to the page head thanks to the bundler. It it not a url and it definitely does not turn into a variable implicitly. The `src` parameter of the `img` tag should be a url of an image (or blob). Like here https://www.w3schools.com/tags/tag_img.asp — Daniel Khoroshko, Jan 02 '18 at 10:53
because the `img` tag has `className="menuIcon"` set, the browser will render it with the menuIcon class in mind. Also let me notice, that this approach (global css being imported into global namespace) is really out of date. css modules, css-in-js or styled-components are much more preferable (I would recommend the latter) — Daniel Khoroshko, Jan 02 '18 at 10:56
can you help me with a working example please, i am trying to learn how to do this — shorif2000, Jan 02 '18 at 11:12
The quickest solution to fix this particular problem would be to find a png icon and paste it's url into this line: ` src={menuIcon}` like this: `src="http://www......./icon.png"`. Ideally you should upload the icon to your server. — Daniel Khoroshko, Jan 02 '18 at 11:17
He is using react-router to arrange navigation inside an app. So what you would need to do is either replace tags with regular `` or follow this guide on setting up react router in your react application https://reacttraining.com/react-router/web/example/basic — Daniel Khoroshko, Jan 02 '18 at 11:24

menuIcon is not defined in react app when loading scss file

0 Answers0