CODEWITHSUNDEEP
reactjsexpresswebpackwebpack-dev-server
Manu
Manu

Reputation: 1662

Express Uncaught SyntaxError: Unexpected token <

My webpack-dev-server works just fine but I wanted to achieve something similar with express.js. However, I'm getting an Uncaught SyntaxError: Unexpected token < error.

Below is my server.js:

const express = require('express');
const webpack = require('webpack');
const path = require('path');
const open = require('open');

const port = 3000;
const app = express();

app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, '../app/index.html'));
});

app.listen(port, function (err) {
  if (err) {
    console.log(err);
  } else {
    open(`http://localhost:${port}`);
  }
});

And below is my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Yes boy</title>
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript" src="transformed.js"></script>
</body>
</html>

Index.js code:

/* eslint-disable no-unused-vars */

import React from 'react';
const ReactDOM = require('react-dom');
const routes = require('./routes');
const GlobalCSS = require('./styles/main.scss');

/* eslint-disable no-unused-var */

ReactDOM.render(routes, document.getElementById('app'));

routes.js

const routes = ( // eslint-disable-line no-extra-parens
  <Router history={browserHistory} onUpdate={hashLinkScroll}>
    <Route path="/" component={App} />
    <Route path="nav" component={Nav} />
    <Route path="hero" component={Hero} />
    <Route path="about" component={About} />
    <Route path="/" component={Contact} />
    <Route path="footer" component={Footer} />
    <Route path="building" component={Building} />
    <Route path="*" component={NotFound} />
  </Router>
);

module.exports = routes;

My folder structure looks like:

project
  app/
    components/
      App.js
    index.html
    index.js
    routes.js
  build/
    index.html
    transformed.js
  tools/
    server.js
  webpack.config.js

Let me know if you guys have any suggestions.

Thanks!

Upvotes: 0

Views: 1729

Answers (1)

Manu
Manu

Reputation: 1662

Ok, it's all working now. The problem was with my assets which were not served from the memory. The solution was using webpack-dev-middleware in my case.

This is what I've added to my server.js:

app.use(require('webpack-dev-middleware')(compiler, { publicPath: config.output.publicPath }));

compiler is your webpack export:

const webpack = require('webpack'); const config = require('../webpack.config'); const compiler = webpack(config);

publicPath should point to your output in your webpack.config which gets you your assets:

output: { path: path.join(__dirname, 'build'), publicPath: '/', filename: 'transformed.js' },

Upvotes: 1

Related Questions