gpt4 book ai didi

javascript - 不确定为什么 React 无法呈现

转载 作者:行者123 更新时间:2023-11-30 00:15:37 25 4
gpt4 key购买 nike

全天候研究这个问题后,我不确定它是否允许使用 ReactDOM.render ,我收到有关 <DIV> 的错误消息使用无法理解 JSX 语法的 webpack + babel。

包.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>

索引.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"

^不是简单的错误消息,是否有工具可以在确切的问题中显示完整的消息?

如有任何帮助,我们将不胜感激。

编辑:这是文件夹结构。

enter image description here

最佳答案

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

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

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

关于javascript - 不确定为什么 React 无法呈现 <DIV>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34835854/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com