CODEWITHSUNDEEP
node.jsexpresswebpackpug
ksharifbd
ksharifbd

Reputation: 5262

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

Upvotes: 3

Views: 3466

Answers (2)

Madole
Madole

Reputation: 1

Are you using Webpack dev server or just building the files statically?

If you are using Webpack dev server, the manifest won't be built into a static file but instead be served from memory on a different port specified in your dev server config. If this is the case, you can use something like node-fetch to fetch the manifest.

Also, could you log what you get back from manifest['main.js'] just to see if the reading the file is the culprit?

I do remember seeing an issue like this before but I can't jog my memory to figure out what the fix was. I'll keep digging in the meantime.

Upvotes: 0

Freyja
Freyja

Reputation: 40904

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

Upvotes: 1

Related Questions