Webpack錯誤嘗試運行Bundle.js時

Question

我對Webpack很陌生，我只是想在這里開展一個簡單的項目。 我有運行應用程序所需的所有依賴項，但是當我在broswer中運行bundle.js時，我收到以下錯誤：

未捕獲的ReferenceError：在commitAllLifeCycles的commitLifeCycles（react-dom.development.js？61bb：17288）的App.componentDidMount（index.js？0607：17）中未定義asyncFunc（react-dom.development.js？61bb：18690）在位於invokeGuardedCallback（react-dom.development.js？61bb：256）的Object.invokeGuardedCallbackDev（react-dom.development.js？61bb：199）上的HTMLUnknownElement.callCallback（react-dom.development.js？61bb：149）at at在eval（react-dom.development.js？61bb：20372）的commitRoot（react-dom.development.js？61bb：20372）處於完成時的Object.unstable_runWithPriority（scheduler.development.js？3069：255）（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文件

您可以在項目的路徑中添加名為.babelrc的文件。 添加此行也可用於react / es6轉換。

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

編輯1

你可能需要這座橋。 嘗試這個

紗線添加babel-core@7.0.0-bridge.0

你也可以在這里看到一個關於這個問題的好github問題。

Answer 2

嘗試安裝@babel/core 。 此外，請確保所有包都遵循相同的順序。

例如。

babel-loader到@babel/loader 。

並更新.babelrc

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