簡體   English   中英

Webpack要求使用Create-React-App時拋出目標容器不是DOM元素嗎?

[英]Webpack required throwing Target container is not a DOM element when using Create-React-App?

我正在嘗試通過使用Create-React-App重新創建樣板並設置一個新的dev ReactJS開發環境, 環境在模仿倉庫之后。

在進行更改之前,我已經確保可以在http://localhost:3000/上看到默認的登錄頁面。

以下是我經過的步驟:

  1. 刪除src文件夾中的所有文件
  2. npm install react-redux redux
  3. src文件夾中添加index.js
  4. src文件夾中添加componentsreducers目錄
  5. src/components/文件夾中添加app.js
  6. src/reducers/文件夾中添加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

import { combineReducers } from 'redux';

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

export default rootReducer;

src / components / app.js

import React, { Component } from 'react';

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

我在下面遇到錯誤

在此處輸入圖片說明

更新

根據反饋,我將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>

如果使用react-create-app,它將生成一個HTML文件,其中沒有document.querySelector('.container') 取而代之的是,該html文件具有<div id="root"></div> ,因此您可以嘗試從document.querySelector('.container')更改為document.querySelector('#root') 如果沒有幫助,請顯示您的HTML文件。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM