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

Question

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')

Frxstrem · Accepted 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',
})

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

Tags:

node.js

webpack

express

pug

ksharifbd

1 Answers

Frxstrem

Recent Activity

Donate For Us