ksharifbd ksharifbd - 1 year ago 195
Jade Question

Using webpack-manifest-plugin getting the error 'Uncaught SyntaxError: Unexpected token <'

I've found webpack-manifest-plugin yesterday and started using it following this tutorial.

When I open my app on browser it shows

Uncaught SyntaxError: Unexpected token <
. The app is loading with the correct hash. The error is pointing to
<!DOCTYPE html>

The following is my webpack configuration:

'use strict'

var webpack = require('webpack');
var path = require('path');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
var webpackManifestPlugin = require('webpack-manifest-plugin');
var autoprefixer = require('autoprefixer');

module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
output: {
path: path.join(__dirname, 'public/build'),
filename: 'bundle.[hash].js'
module: {
noParse: [
loaders: [{
test: /\.css$/,
include: [path.resolve(__dirname)],
loader: extractTextWebpackPlugin.extract('style-loader', 'css-loader!postcss-loader')

test: /\.js$/,
exclude: /node_modules/,
include: __dirname,
loaders: ['babel']

test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader?limit=10000&name=images/[name].[ext]',
include: [

test: /\.(svg|eot|woff|woff2|ttf)$/,
loader: 'url-loader?limit=10000&name=fonts/[name].[ext]',
include: [
plugins: [
new extractTextWebpackPlugin("style.css"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"

new webpackManifestPlugin()


postcss() {
return [ autoprefixer({
browsers: ['last 10 versions']

The following is my

"fonts/glyphicons-halflings-regular.eot": "fonts/glyphicons-halflings-regular.eot",
"fonts/glyphicons-halflings-regular.svg": "fonts/glyphicons-halflings-regular.svg",
"fonts/glyphicons-halflings-regular.ttf": "fonts/glyphicons-halflings-regular.ttf",
"fonts/glyphicons-halflings-regular.woff": "fonts/glyphicons-halflings-regular.woff",
"fonts/glyphicons-halflings-regular.woff2": "fonts/glyphicons-halflings-regular.woff2",
"main.css": "style.css",
"main.js": "bundle.7116359824fc577b65b9.js"


The following is my

'use strict'

import express from 'express'
import path from 'path'
import favicon from 'serve-favicon'
import { readFileSync } from 'jsonfile'

// path for manifest json file
const manifestPath = `${process.cwd()}/public/build/manifest.json`

//read the manifest.json file
const manifest = readFileSync(manifestPath);

// js and css bundle maping to objects
const jsBundle = manifest['main.js'];

//import axios from 'axios'
//import store from './modules/store'

const app = express()

// view engine setup
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'jade')

// config static dir
app.use(favicon(path.join(__dirname, 'public', 'images/favicon.ico')))
app.use(express.static(path.join(__dirname, 'public')))

// route handler
app.get('*', function (req, res) {
res.render('index', { title: 'Platform', jsBundle})

export default app

And finally this

doctype html
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1')
title= title
meta(name='description', content='')
link(rel='stylesheet', href='/build/style.css')

Answer Source

I'm guessing ManifestPlugin doesn't know the correct path to your files on your server, and just tries to use files in the same directory as the pgae. That would fail, likely rendering some HTML error page (explaining the error with unexpected <).

If this is the case, then you should just add the public path of your output directory (assuming it's accessed in http://yourserver/build/bundle.[hash].js, then the public path would be /build/) to the configuration of ManifestPlugin:

new webpackManifestPlugin({
  basePath: '/bundle',
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download