Question

在围绕时钟研究这个问题后，我不确定它是否允许使用ReactDOM.render，我收到有关<DIV>的错误消息，其中webpack + babel无法理解JSX语法

的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"

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

非常感谢任何帮助。

编辑：这是文件夹结构。

Answer 1

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

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

我发现由于各种语法错误/拼写错误而发生此错误。

不确定为什么React无法呈现<div>？

1 个答案: