Я следую простому туториалу React, код которого можно увидеть здесь (в настоящее время в версии 3.2). Я пытаюсь создать простой компонент React в моем файле index.js. Оттуда я визуализирую его в index.ejs в div с именем Root. Есть еще один div, который берет содержимое из моего server.js файла. В настоящее время отправляется только «...»
Проблема в том, что компонент App не отображается на странице, и консоль регистрирует ошибку:
Uncaught Error: Target container is not a DOM element.
at Object.render (react-dom.development.js?61bb:24828)
at eval (index.js?b635:4)
at Module../src/index.js (bundle.js:229)
at __webpack_require__ (bundle.js:20)
at bundle.js:84
at bundle.js:87
Между тем, многоточие из server.js отображается без проблем.
Мой index.js файл
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<h2>
Hello React Components!
</h2>
);
};
ReactDOM.render(
<App />,
document.getElementById('Root'),
);
Мой index.ejs файл
<%- include('header') -%>
<div id="Root"></div>
<div><%- content -%></div>
<%- include('footer') -%>
Захватываются верхний и нижний колонтитулы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello EJS+JSX</title>
</head>
<body>
<script src="/bundle.js" charset="utf-8"></script>
</body>
</html>
Мой server.js файл
import config from './config';
import apiRouter from './api';
import express from 'express';
const server = express();
server.set('view engine', 'ejs');
server.get('/', (req, res) => {
res.render('index', {
content: '...',
});
});
server.use('/api', apiRouter);
server.use(express.static('public'));
server.listen(config.port, () => {
console.info('Express listening on port', config.port);
});
И, наконец, поскольку я использую пользовательский webpack.config, вот и он
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}
]
}
}