Razvan Alex Razvan Alex - 2 months ago 22
Node.js Question

webpack + express.js doesn't load bundle.js

I'm looknig to create an app with node + express js as backend and react + webpack as front end, but I'm still getting errors and the bundle.js doesn't load. This is how my folders looks like: In the root directory I have the node_modules, src folder that containst main.js and compoenents subfolder, package.json and wepback config.js. This is how my root folder looks like:

enter image description here

//// webpack.config.js

module.exports = {
entry: './src/main.js',
output: {
path: './src',
filename: 'bundle.js'
},
devServer: {
port: 3000,
inline: true
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react','es2015']
}
}]
}
};


//server.js

const express = require('express');
const webpack = require('webpack');
const config = require('./webpack.config.js');
const webpackMiddleware = require("webpack-dev-middleware");
const app = express();
const compiler = webpack(config);

const PORT = 3000 || process.env.port;

app.use(webpackMiddleware(compiler, {
noInfo: false,
quiet: false,
lazy: true,
watchOptions: {
aggregateTimeout: 300,
poll: true
},
publicPath: "/assets/",
index: "index.html",
headers: { "X-Custom-Header": "yes" },
stats: {
colors: true
}
reporter: null,
serverSideRender: false,
}));

app.get('/', (req, res) => {
res.sendFile(__dirname + '/src/index.html');

});

app.listen(PORT)


///index.html

<!DOCTYPE html>
<html>
<head>
<title>React</title>
</head>
<body>
<div id="app"></div>
</body>
<script src='bundle.js'></script>
<script src="https://cdn.socket.io/socket.io-1.4.8.js"></script>
</html>


///main.js

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

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


///console error

reporter: null,
^^^^^^^^

SyntaxError: Unexpected identifier
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3


All I need is to get express working with react and webpack, I'm kinda new to webpack..

Answer

The middleware configuration uses /assets/ as publicPath, but you're not setting a public path in your Webpack configuration.

I would suggest setting publicPath in webpack.config.js:

const path = require('path');
...

output: {
  path       : path.resolve('./src'), // always use absolute paths
  filename   : 'bundle.js',
  publicPath : '/assets/'
}

And reuse its value for the middleware configuration:

app.use(webpackMiddleware(compiler, {
  publicPath : config.output.publicPath,
  ...
});

Lastly, make sure the URL in your HTML is pointing to the correct URL:

<script src='/assets/bundle.js'></script>
Comments