shellscape / webpack-manifest-plugin

webpack plugin for generating asset manifests
MIT License
1.44k stars 184 forks source link

Uncaught SyntaxError: Unexpected token < #29

Closed ksharifbd closed 8 years ago

ksharifbd commented 8 years ago

I've found this package 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')
ksharifbd commented 8 years ago

This issue is asked in Stack Overflow.

It is solved by this answer.

Closing this issue.