Render json is not defined in React

Question

Can anybody explain to me the following scenario in a react-js context: I work with webpack and use the presets "babel-preset-env" & "react".

On top of a file I import a config.json which I try to inspect with the developer tools and a debugger-statement.

The console.log logs an array of objects as expected. If I enter the developer-tools js-console and enter CONFIG I get an Uncaught ReferenceError: CONFIG is not defined.

import React, { Component } from 'react';
import CONFIG from './config.json';

class MyComponent extends Component{
    render(){
        //this statement logs as expected
        console.log(CONFIG);

        // the debugger stops execution, but when I enter CONFIG in the
        // dev-tools Console I get the error: Uncaught ReferenceError: 
        // CONFIG is not defined
        debugger;
    }
}

Any help is much appreciated.

lorenzo-s · Accepted Answer · 2017-08-16 07:59:16Z

1

CONFIG is defined inside the module you are writing. It's not a real global variable, it's only "global" inside that module (i.e. that file).

If you really want to make it globally available in browser, try adding window.CONFIG = CONFIG.

answered Aug 16, 2017 at 7:59

lorenzo-s

17.1k15 gold badges59 silver badges89 bronze badges

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

2 Comments

doemsche Over a year ago

Thank you! That's a good point. I can manage to get access to the config when I add it to the module in the class constructor this.config = config. But why does console.log have access to the CONF variable?

lorenzo-s Over a year ago

console.log can "see" it because it is running inside the scope of CONFIG (i.e. inside the module). If you try console.log(CONFIG) in a different module/file/component, it will fail: probably it'll print undefined or throw the same error.

Collectives™ on Stack Overflow

Render json is not defined in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related