title: Inconsistent Imports in React (create-react-app)
body: <p>returning to React for the first time in a while and having some strange issues I'm having trouble resolving. It seems like my imports are behaving inconsistently and I'm not sure why that might be. Here's the file in question:</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  import {VanillaPuddingApi} from '../components/constants';
  
  class Clients extends React.Component {
    constructor(props){
     super(props)
  
     this.state={
      clients: []
     }
    }
  
    componentDidMount(){
     debugger;
      alert(VanillaPuddingApi)
      axios
       .get(`${VanillaPuddingApi}/clients`)
       .then(({data}) =&gt; {
        debugger;
        })
       .catch((errors)=&gt;{
         console.log(errors)
       })
      }
  
  
     render() {
      return (
       &lt;div&gt;
        {VanillaPuddingApi}
       &lt;/div&gt;
       );
     }
    }
  
  export default Clients;
  </code></pre>
  
  <p>This file is rendered properly on the page by the <code>App.js</code> file from the default create-react-app directory. Additionally, the value of <code>VanillaPuddingApi</code> is properly rendered on the DOM. The first debugger in the <code>componentDidMount()</code> call is problematic- if I check the value of <code>VanillaPuddingApi</code> in the console on that line, I get the following error message:</p>
  
  <pre><code>`Uncaught ReferenceError: VanillaPuddingApi is not defined
      at eval (eval at componentDidMount (Clients.js:15), &lt;anonymous&gt;:1:1)
      at Clients.componentDidMount (Clients.js:15)
      at ReactCompositeComponent.js:264
      at measureLifeCyclePerf (ReactCompositeComponent.js:75)
      at ReactCompositeComponent.js:263
      at CallbackQueue.notifyAll (CallbackQueue.js:76)
      at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
      at ReactReconcileTransaction.closeAll (Transaction.js:209)
      at ReactReconcileTransaction.perform (Transaction.js:156)
      at batchedMountComponentIntoNode (ReactMount.js:126)
      at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
      at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
      at Object.batchedUpdates (ReactUpdates.js:97)
      at Object._renderNewRootComponent (ReactMount.js:319)
      at Object._renderSubtreeIntoContainer (ReactMount.js:401)
      at Object.render (ReactMount.js:422)
      at Object../src/index.js (index.js:7)
      at __webpack_require__ (bootstrap d489f093a1a431f7a956:669)
      at fn (bootstrap d489f093a1a431f7a956:87)
      at Object.0 (test.js:11)
      at __webpack_require__ (bootstrap d489f093a1a431f7a956:669)
      at bootstrap d489f093a1a431f7a956:715
      at bundle.js:719`
  </code></pre>
  
  <p>Yet, on the very next line, this value is alerted out as expected. The real issue here is that Axios isn't working. When trying to run the <code>axios.get</code> line manually in the debugger, I get the same error as above. I did some digging and found people with similar issues who had issues with their webpack.config.js files, but mine looks unlike theirs did and this doesn't seem to explain my local importing issue.</p>
  
  <pre><code>//webpack.config.js
  module.exports = {
   module: {
    rules: [
     {
      test: /\.pug$/,
      use: [
      "pug-loader?self",
      ]
     },
     {
      test: /\.css$/,
      use: [
       "style-loader",
       "css-loader"
      ],
     }
    ]
   }
  };
  </code></pre>
  
  <p>and also my package.json file:</p>
  
  <pre><code>//package.json
  {
   "name": "vanilla-pudding-frontend",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
    "axios": "^0.16.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.2.2"
   },
   "devDependencies": {
     "react-scripts": "1.0.13"
    },
   "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
   }
  }
  </code></pre>
  
  <p>and finally </p>
  
  <pre><code>// components.constants
  export const VanillaPuddingApi = "http://localhost:5000/"
  </code></pre>
  
  <p>Any help much appreciated, thank you.</p>