Variable is undefine - React JS

Question

I have this global variable for config values that I require in index.js

import React from 'react';
import ReactDOM from 'react-dom';

// Config
const Dir = require('./Config/dir.jsx');

// Components
import Header from './Components/Header.jsx';

ReactDOM.render(<Header />, document.getElementById('app'));

this is the content of my dir.jsx

module.exports = {
    css: 'public/css/',
    js: 'public/js/',
    img: 'public/img/'
}

When I accesssed the config variable in my header.jsx components using { Dir.css } it gives me an error "Dir is not defined".

Here's the header.jsx:

import React from 'react';

require('./../Stylesheets/header.scss');

class Header extends React.Component {
    render() {
        return (
            <div>
                <nav className="navbar navbar-default">
                    <div className="container-fluid">
                        <div className="navbar-header">
                            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span className="sr-only">Toggle navigation</span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                            </button>
                        <a className="navbar-brand" href="#">{ Dir.img }</a>
                        </div>
                        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul className="nav navbar-nav">
                                <li className="active"><a href="#">Link <span className="sr-only">(current)</span></a></li>
                                <li><a href="#">Link</a></li>
                            </ul>
                            <ul className="nav navbar-nav navbar-right">
                                <li><a href="#">Link</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        );
    }
}

export default Header;

Here's the screenshot:

You say it's undefined in your Header component, you should post that code and the actual line its crashing on — azium
– azium, Commented Sep 14, 2016 at 5:29
The first thing I notice is your defining Dir in the file you posted but it's being used in Header. This really isn't doing you any good and you need to make sure that either you pass Dir as props to the header component or require Dir inside the Header component file but without seeing the Header file I can't give more insight — finalfreq
– finalfreq, Commented Sep 14, 2016 at 5:40

Aatif Bandey · Accepted Answer · 2016-09-14 07:02:59Z

2

Import Dir inside the Header component as import Dir from './Config/dir.jsx'

answered Sep 14, 2016 at 7:02

Aatif Bandey

1,14511 silver badges15 bronze badges

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

Comments

Pranesh Ravi · Accepted Answer · 2016-09-14 06:47:56Z

1

I presume you're using webpack to build your project

webpack won't import files unless there're used. In your case, you're just importing Dir and not using anywhere. webpack will skip this import for obvious reason.

There are 2 things you can do:

Import Dir inside the Header component
Pass the Dir as a prop to the Header component. Like this <Header dir={Dir} />. This can be accessed by this.props.dir inside the Header component.

I'll prefer the 1st way of doing.

P.S. You shouldn't use import and require together.

edited Sep 14, 2016 at 6:47

answered Sep 14, 2016 at 6:37

Pranesh Ravi

19.2k10 gold badges51 silver badges70 bronze badges

2 Comments

Pranesh Ravi Over a year ago

You can refer this webpack config to make your scss compilation better

Sydney Loteria Over a year ago

what does it do, sorry im not yet that familiar in this kind of stack.

Collectives™ on Stack Overflow

Variable is undefine - React JS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related