使用Create-React-App时,Webpack需要抛出Target容器不是DOM元素?

问题描述 投票:0回答:1

我正在尝试重新创建样板并设置一个新的开发ReactJS环境,后面使用this repo来模仿Create-React-App

我确保在继续进行更改之前,我可以在http://localhost:3000/上看到默认登录页面。

以下是我走过的步骤:

  1. 删除src文件夹中的所有文件
  2. npm install react-redux redux
  3. index.js文件夹中添加src
  4. components文件夹中添加reducerssrc目录
  5. app.js文件夹中添加src/components/
  6. index.js文件夹中添加src/reducers/

以下是文件的内容

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 /减速器/ index.js

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  state: (state = {}) => state
});

export default rootReducer;

SRC /组件/ app.js

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>React simple starter</div>
    );
  }
}

我在下面遇到错误

enter image description here

更新

根据反馈,我包括我的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>
javascript reactjs
1个回答
2
投票

如果您使用react-create-app,它会生成一个HTML文件,其中没有document.querySelector('.container')。而不是它,这个html文件有<div id="root"></div>,所以你可以尝试从document.querySelector('.container')更改为document.querySelector('#root')。如果它没有帮助,请显示您的HTML文件。

© www.soinside.com 2019 - 2024. All rights reserved.