React中的导入不一致（create-react-app）

Question

一段时间以来第一次返回React，遇到一些奇怪的问题，我无法解决。 似乎我的进口货物行为不一，我不确定为什么会这样。 这是有问题的文件：

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}) => {
      debugger;
      })
     .catch((errors)=>{
       console.log(errors)
     })
    }


   render() {
    return (
     <div>
      {VanillaPuddingApi}
     </div>
     );
   }
  }

export default Clients;

该文件由默认create-react-app目录中的App.js文件正确呈现在页面上。 此外， VanillaPuddingApi的值已在DOM上正确呈现。 componentDidMount()调用中的第一个调试器存在问题-如果在该行的控制台中检查VanillaPuddingApi的值， VanillaPuddingApi收到以下错误消息：

`Uncaught ReferenceError: VanillaPuddingApi is not defined
    at eval (eval at componentDidMount (Clients.js:15), <anonymous>: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`

然而，在下一行中，此值已按预期发出警报。 真正的问题是Axios无法正常工作。 尝试在调试器中手动运行axios.get行时，出现与上述相同的错误。 我进行了一些挖掘，发现遇到类似问题的人的webpack.config.js文件有问题，但是我的情况看起来与他们的不同，而且这似乎无法解释我的本地导入问题。

//webpack.config.js
module.exports = {
 module: {
  rules: [
   {
    test: /\.pug$/,
    use: [
    "pug-loader?self",
    ]
   },
   {
    test: /\.css$/,
    use: [
     "style-loader",
     "css-loader"
    ],
   }
  ]
 }
};

还有我的package.json文件：

//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"
 }
}

最后

// components.constants
export const VanillaPuddingApi = "http://localhost:5000/"

任何帮助，不胜感激，谢谢。