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

Question

I'm trying to recreate the boilerplate and setup a fresh dev ReactJS environment which following mimic this repo , by using Create-React-App .

I've made sure that I can see the default landing page on http://localhost:3000/ before proceed making the changes.

Below are the steps I've gone thru:

Delete all files inside src folder
npm install react-redux redux
Add index.js at src folder
Add components , reducers directory at src folder
Add app.js at src/components/ folder
Add index.js at src/reducers/ folder

Below are the content of the files

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>
    );
  }
}

And I'm hitting error below

UPDATES

Based on the feedbacks, i'm including my index.html as below

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>

Answer 1

If you use react-create-app, it generates an HTML-file, where no 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') . If it doesn't help, show please your HTML-file.

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

Question

1 answers

solution1
2 2018-07-25 11:43:09

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

Question

1 answers

solution1 2 2018-07-25 11:43:09

solution1
2 2018-07-25 11:43:09