ksharifbd ksharifbd - 2 months ago 36
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: [
'./modules/index.js'
],
output: {
path: path.join(__dirname, 'public/build'),
filename: 'bundle.[hash].js'
},
module: {
noParse: [
/aws\-sdk/,
],
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: [
path.resolve(__dirname)
]
},

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

new webpackManifestPlugin()

],

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


The following is my
manifest.json
output:

{
"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
app.js
file:

'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
index.jade
:

doctype html
html(lang='en')
head
meta(charset='utf-8')
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')
body
#app
script(src=jsBundle)
script(async,src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBp0nIBIEWDsSp2lagOzOX4zdPEanFaDM8&libraries=drawing,places&callback=mapsLoaded')

Answer

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',
})
Comments