Javascript 使用react-can'导入和要求问题；t读取属性'；渲染'；未定义的

我一直在努力让我的react项目启动。我正在使用react with babel、webpack和webpack开发服务器来快速原型化

首先，我无法让导入函数工作。我尝试通过将importes6语法转换为Node的require语法来解决这个问题，这似乎解决了“import”无法识别的问题（“找不到令牌导入”）。我真的不知道从哪里开始解决这个问题，如果可能的话，我希望能找到正确的方法

这是我的网页配置：

var HTMLWebpackPlugin = require('html-webpack-plugin');

var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: __dirname + '/main.js',
    module: {
        rules: [
    {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
    }
        ]
    },
    output: {
        filename: 'transformed.js',
        path: __dirname + '/build'
    },
    plugins: [HTMLWebpackPluginConfig]
};

我的原始代码如下所示：

const React = require('react').default;
const ReactDOM = require('react-dom');

//Components
const MainTable = require('./app/components/input_table/maintable').default;
const ButtonMenu = require('./app/components/button_menu/buttonmenu').default;

//App Logic
const onUndoAction = require('./app/undo').default;
const onRedoAction = require('./app/redo').default;
const onInputChange = require('./app/input').default;


class App extends React.Component {

    constructor(props){
      //properties
      super(props);
      this.props.inputId = 0


      //state
      this.state = {

        gridState: [
          {
          rows: 2,
          columns: 1,
          type:"cell"
          }
        ],

        cellValues: [{
          cellId: 0,
          cellValue: "first",
          type:"value"
        }],
        undo: [{rows: 2, columns: 1, type: "cell"},
        {cellId: 0, cellValue: "first", type:"value"}],
        redo: ["empty"],
      }
... additional code omitted

---

这可能是因为您的模块加载器设置不正确，通常在导入不起作用时，它会从my Expirence启动模块加载器设置。希望它有帮助

为了传输es6代码，您需要配置babel设置

---

请按照以下步骤操作网页：

一个非常好、非常有用的链接，先生！我发现了我的问题，并按照webpack的安装说明进行了修复。