Target container is not a DOM element.エラー

React初心者です

このたぐいのエラーをはじめて見たので調べたのですが、
原因があまり理解できず、
divタグをつけろとの指示があり、
<MuiThemeProvider>
を試してみたのでダメでした、

Error: Target container is not a DOM element.
render
node_modules/react-dom/cjs/react-dom.development.js:24828
Module../src/index.js

index.js


import React from 'react';
import ReactDOM from 'react-dom';
import EventNew from './components/event_new';
import EventIndex from './components/event_index';
import EventShow from './components/event_show';
import registerServiceWorker from './registerServiceWorker';
import {createStore,applyMiddleware} from 'redux'
import {Provider} from 'react-redux'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import reducer from './reducers'
import thunk from 'redux-thunk'
import {BrowserRouter, Route,Switch} from 'react-router-dom'
import {composeWithDevTools} from 'redux-devtools-extension'

const enhancer = process.env.NOOOE_ENV === 'development' ?
composeWithDevTools(applyMiddleware(thunk)) : applyMiddleware(thunk)
const store= createStore(reducer, enhancer)

ReactDOM.render(
<MuiThemeProvider>
  <Provider store={store}>
    <BrowserRouter>
    <Switch>
     <Route exact path='/event/new' components={EventNew}/>
      <Route path='/event/:id' components={EventShow} />
      <Route exact path='/' components={EventIndex} />
      <Route exact path='/events' components={EventIndex} />
    </Switch>
    </BrowserRouter>
   </Provider>
</MuiThemeProvider>,
document.getElementById('root')
   );

  registerServiceWorker();

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="./bundle.js"></script>

  </body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

[React Uncaught Error: Target container is not a DOM element [duplicate]

](https://stackoverflow.com/questions/50833694/react-uncaught-error-target-container-is-not-a-dom-element)

似たような事例がありましたが、これではないですか？
HTML側で<script src="./bundle.js"></script>を呼び出しますが、その記述がdocument.getElementById()の対象タグ(質問例でいうところのroot)より前に書かれているため、対象タグが見つからないことが原因のようです。

投稿2020/08/26 01:31