Tengo un proyecto de práctica muy básico: tengo algo de contenido inicial (una cadena '...') y después de que se carga el entorno JS, quiero que React se haga cargo de div id="root y reemplace el contenido js con el reaccionar contenido (una cadena 'hola reaccionar').

Hago un npm run dev y se generan un bundle.js y un bundle.js.map. Luego hago un inicio de npm, pero cuando obtengo una vista previa de la página, solo existe el contenido de JS y, tras una inspección más detallada, el script React ni siquiera está cargado. Recibo un error 404 de falla al cargar el recurso en bundle.js a pesar de que el archivo existe en /public

Aquí está mi webpack.config.js:

 module.exports = { entry: './src/index.js', output: { path: __dirname + '/public', filename: 'bundle.js' }, module: { loaders: [ { test: /\.json$/, loader: 'json-loader' }, { test: /\.js$/, loader: 'babel-loader' } ] } };

Aquí está mi .babelrc:

 { "presets": ["react", "es2015", "stage-2"] }

Aquí está /src/index.js que contiene reactdom.render:

 import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( React.createElement('h2', null, 'Hello React'), document.getElementById('root') );

Aquí está /public/index.ejs:

 <%- include('header') -%> <div id="root"> <%- content -%> </div> <%- include('footer') -%>

Finalmente, aquí está mi server.js básico en el directorio raíz:

 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(__dirname + 'public')); server.listen(config.port, () => { console.log('Express is listening on port ' + config.port); });

He intentado buscar por todas partes una respuesta, pero no he tenido suerte. ¡Cualquier comentario es muy apreciado! ¡Gracias!