javascript - 不确定为什么React无法渲染<DIV>吗？

在不停地研究此问题之后，我不确定它是否不能与ReactDOM.render一起使用，我收到了有关无法使用JSX语法的webpack + babel与<DIV>有关的错误消息。

Package.json

  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-redux": "^4.0.0",
    "redux": "^3.0.4"
  }
}

webpack.config.js

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    contentBase: './'
  }
};

的HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="bundle.js"></script>
</html>

index.js

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

const App = function() {
  return <div>Hello React! </div>;
}

ReactDOM.render(<App />, document.querySelector('.container'));

Chrome控制台（错误）

Uncaught Error: Cannot find module "./src/index.js"

^而不是简单的错误消息，是否有工具来显示确切问题中的完整消息？

任何帮助将不胜感激。

编辑：这是文件夹结构。

javascript - 不确定为什么React无法渲染<DIV>吗？-LMLPHP

最佳答案

了解这些错误消息的一种好方法是查看您的终端以检查npm启动过程。

向上滚动，您会发现一条更详细，格式正确的错误消息，其中包含确切的文件和代码所在的行。

我发现此错误是由于各种语法错误/错别字引起的。

关于javascript - 不确定为什么React无法渲染<DIV>吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34835854/