2

При запуске сервера webpack на проекте React вылезает ошибка в консоли

Target container is not a DOM element.

Вообще то это значит что нет контейнера для ReactDOM куда бы он рендерил компонент.

Но элемент который я даю здесь

ReactDom.render(
  <App />,
  document.getElementById('content')
);

оно существует.

Вот конфигурационный файл webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: "./src/main.jsx",
  output: {
    path: __dirname + '/public/build/',
    publicPath: "build/",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!autoprefixer-loader",
        exclude: [/node_modules/, /public/]
      },
      {
        test: /\.gif$/,
        loader: "url-loader?limit=10000&mimetype=image/gif"
      },
      {
        test: /\.jpg$/,
        loader: "url-loader?limit=10000&mimetype=image/jpg"
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=10000&mimetype=image/png"
      },
      {
        test: /\.svg$/,
        loader: "url-loader?limit=26000&mimetype=image/svg+xml"
      },
      {
        test: /\.jsx$/,
        loaders: ['react-hot-loader/webpack', 'babel-loader?presets[]=react'],
        exclude: [/node_modules/, /public/]
      },
      {
        test: /\.json$/,
        loader: "json-loader"
      }
    ]
  }
}

Это файл package.json.

{
  "name": "less2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.3.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "devserver": "webpack-dev-server --debug --hot --devtool eval-source-map --output-pathinfo --watch --colors --inline --content-base public --port 8090 --host 0.0.0.0"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.9",
    "file-loader": "^1.1.6",
    "json-loader": "^0.5.7",
    "postcss-loader": "^2.0.10",
    "react-hot-loader": "^3.1.3",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }
}

Не могу понять что я в конфигах пропустил?

4 ответа 4

4

Проверь, так ли у тебя выглядит index.html:

<div id="content"></div>`
<script src="bundle.js"></script>`
3

скорее всего у вас в index.html отсутствует

<div id='content'></div>
6
  • ну или console.log(document.getElementById('content')) 26 янв 2018 в 7:53
  • Как раз оно существует. 26 янв 2018 в 9:44
  • и если я делаю перед рендером console.log(document). и там оно есть 26 янв 2018 в 9:44
  • извиняюсь за дотошность, есть document или document.getElementById('content') ? 26 янв 2018 в 10:26
  • есть document и в логе в нем уже виден элемент с ид content. 26 янв 2018 в 11:11
1

Была та же ошибка, указал в index.html вместо div id="" так div class="".

0

Возможно react начинает рендерить до полной загрузки страницы, при подключении скрипта вам нужно добавить атрибут defer в script - он разрешит выполнение скрипта только после полной загрузки страницы

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.