Question

我是Webpack的新手，我只是想在这里开始一个简单的项目。我拥有运行该应用程序所需的所有依赖关系，但我在浏览器中运行bundle.js时遇到以下错误：

未捕获的ReferenceError：在以下位置未定义asyncFunc 在commitLifeCycles上的App.componentDidMount（index.js？0607：17）（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） at的invokeGuardedCallback（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')
);

我该怎么办？

Answer 1

您需要一个带有预设的.babelrc文件

您可以在项目的路线中添加一个名为function accept(userId) { var nodeRef = firebase.database().ref("/user/" + userId + "/listing/status"); return nodeRef.set('accept'); }的文件。还要添加此行以进行react / es6翻译。

.babelrc

编辑1

您可能需要桥接。试试这个

纱线添加babel-core@7.0.0-bridge.0

您还可以看到有关此问题https://datathirst.net/blog/2019/3/7/databricks-connect-finally的好github问题。

Answer 2

尝试安装@babel/core。另外，请确保所有程序包都遵循相同的顺序。

例如。

babel-loader至@babel/loader。

并更新.babelrc

{
   "presets": ["@babel/preset-env"]
}

尝试运行Bundle.js时出现Webpack错误

2 个答案:

编辑1