[英]Webpack required throwing Target container is not a DOM element when using Create-React-App?
I'm trying to recreate the boilerplate and setup a fresh dev ReactJS environment which following mimic this repo , by using Create-React-App
. 我正在尝试通过使用
Create-React-App
重新创建样板并设置一个新的dev ReactJS开发环境, 该环境在模仿此仓库之后。
I've made sure that I can see the default landing page on http://localhost:3000/
before proceed making the changes. 在进行更改之前,我已经确保可以在
http://localhost:3000/
上看到默认的登录页面。
Below are the steps I've gone thru: 以下是我经过的步骤:
src
folder src
文件夹中的所有文件 npm install react-redux redux
index.js
at src
folder src
文件夹中添加index.js
components
, reducers
directory at src
folder src
文件夹中添加components
, reducers
目录 app.js
at src/components/
folder src/components/
文件夹中添加app.js
index.js
at src/reducers/
folder src/reducers/
文件夹中添加index.js
Below are the content of the files 以下是文件的内容
src/index.js
src / index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import App from './components/app';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>
, document.querySelector('.container'));
src/reducers/index.js
src / reducers / index.js
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
state: (state = {}) => state
});
export default rootReducer;
src/components/app.js
src / components / app.js
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div>React simple starter</div>
);
}
}
And I'm hitting error below 我在下面遇到错误
UPDATES 更新
Based on the feedbacks, i'm including my index.html
as below 根据反馈,我将
index.html
包含如下
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq06l5RUVfib62IYRQacLc-KAy0XIWAVs"></script>
</head>
<body>
<div class="container"></div>
</body>
<script src="/bundle.js"></script>
</html>
If you use react-create-app, it generates an HTML-file, where no document.querySelector('.container')
. 如果使用react-create-app,它将生成一个HTML文件,其中没有
document.querySelector('.container')
。 Instead of it, this html file has <div id="root"></div>
, so you can try to change from document.querySelector('.container')
to document.querySelector('#root')
. 取而代之的是,该html文件具有
<div id="root"></div>
,因此您可以尝试从document.querySelector('.container')
更改为document.querySelector('#root')
。 If it doesn't help, show please your HTML-file. 如果没有帮助,请显示您的HTML文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.