Webpack ReferenceError：运行 bundle.js 时未定义 asyncFunc答案

【问题标题】：Webpack ReferenceError: asyncFunc is not defined when running bundle.jsWebpack ReferenceError：运行 bundle.js 时未定义 asyncFunc
【发布时间】：2019-03-20 14:49:33
【问题描述】：

我对 Webpack 还是很陌生，我只是想在这里开始一个简单的项目。我拥有运行应用程序所需的所有依赖项，但是在浏览器中运行 bundle.js 时出现以下错误：

未捕获的 ReferenceError: asyncFunc 未定义在 App.componentDidMount (index.js?0607:17) 在 commitLifeCycles (react-dom.development.js?61bb:17288) 在 commitAllLifeCycles (react-dom.development.js?61bb:18690) 在 HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149) 在 Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199) 在调用GuardedCallback (react-dom.development.js?61bb:256) 在评估时的 commitRoot (react-dom.development.js?61bb:18902) (react-dom.development.js?61bb:20372) 在 Object.unstable_runWithPriority (scheduler.development.js?3069:255) 在 completeRoot (react-dom.development.js?61bb:20371)

这是我的webpack.config.js：

const config = {
  entry:['./lib/components/index.js'], 
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude:/node_modules/, use: 'babel-loader' }
    ]
  }
};

module.exports = config;

我的package.json中的依赖：

"babel": {
    "presets": [
      "react",
      "env",
      "stage-2"
    ]
  },
  "dependencies": {
    "@babel/core": "^7.4.0",
    "babel-cli": "^6.26.0",
    "babel-loader": "^7.1.5",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "ejs": "^2.6.1",
    "express": "^4.16.4",
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  },

这是我的index.js：

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

import App from './app';

ReactDOM.render(<App />, document.getElementById('content'));

这里是index.js：

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


class App extends React.Component{

    asyncFunc = ()=>{

        return 4;
    }

    componentDidMount(){
        asyncFunc();
    }

    render(){
        return <h2>Hello from React</h2>;
    }
}


ReactDOM.render(
    <App/>,
    document.getElementById('root')
);

我怎样才能搞定这件事？

【问题讨论】：

我看到的第一个错误，将 package.json 的依赖项移到 babel 属性之外。将 babel 模块依赖项移动到新属性 devDependencies。在这里查看 package.json 的基本配置：docs.npmjs.com/files/package.json，这是最小的 React Webpack 安装：github.com/rwieruch/minimal-react-webpack-babel-setup
我认为你必须在comoponentDidMount中添加this.asyncFunc，这是webpack在你的代码中发现的错误，它只是说asyncFunc没有被声明

标签： webpack babeljs

【解决方案1】：

您不能直接调用函数，而是需要将此添加到函数中以在任何生命周期方法或渲染中调用

只要 this.asyncFunc() 就可以了

【讨论】：