Как правильно прикрепить код react к html? (Я получаю ошибку "Целевой контейнер не является элементом DOM")

#reactjs #webpack

Вопрос:

Я пытаюсь настроить веб-приложение react с помощью webpack 4, но я не могу заставить его работать, я получаю «Неперехваченное инвариантное нарушение: целевой контейнер не является элементом DOM». ошибка консоли.

Я провел последние 2 дня, пробуя все, и я прочитал все подобные проблемы здесь, в stackoverflow, но у меня ничего не получилось.

Это должна быть глупая ошибка (опечатка или неправильная конфигурация), но я ее не вижу, по какой-то причине он не может найти мой html-файл или элемент div с идентификатором ‘app’.

Структура моего проекта:

Структура

Это сгенерированный html с помощью плагина html webpack:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <div id='app'></div>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

Мой html-шаблон:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <div id='app'></div>
  </body>
</html>

index.js:

 import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

App.js:

 import React from 'react';

const App = () => {

  return (
    <div>
      {'foobar'}
    </div>
  );
};

export default App;

конфигурация webpack:

 const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: `./src/index.html`,
      filename: `index.html`
    })
  ]
};

1. Есть ли причина, по которой вы не используете create-react-app ? Он делает все это за вас

2. @Hybrid Я знаю, я уже выполнил несколько проектов с использованием create-react-app, и теперь для этого я хочу сделать его с нуля, чтобы лучше понять, но, похоже, я не могу пройти первый уровень.

3. @Понятно! К сожалению, у меня нет ответа на ваш вопрос, но на вашем месте я бы запустил новое create-react-app, а затем запустил npm run eject , чтобы просмотреть все выведенные файлы. Я уверен, что вы могли бы многому научиться из этого!

Ответ №1:

Я скопировал предоставленный вами код с той же файловой структурой (не включая файлы jest и eslint), которые у вас были, и он успешно запустился. Поэтому, вероятно, причиной ошибки являются несоответствия в ваших версиях webpack или babel. Может быть, вы можете попробовать посмотреть мой package.json по сравнению с вашим. Надеюсь, это поможет!

package.json

 {
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" amp;amp; exit 1",
    "start": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel": "^6.23.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "http-server": "^0.11.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

.babelrc

 {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Ответ №2:

Я нашел решение. Я импортировал компонент из одного из моих проектов пользовательского интерфейса в App.js , Я удалил его, и теперь он работает нормально.