Webpack + angular2

Question

What is the meaning of this error ? After bundling angular2 app with webpack
"Uncaught SyntaxError: Unexpected token <" in bundel.js 1.

What is that I am missing. I have added all the necessary loaders.

// webpack.config.js
'use strict';

var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

//const TARGET = process.env.npm_lifecycle_event;

module.exports = {
  //context: __dirname + '/public',
  entry: './public/components/boot/boot.ts',
  output: {
    path: path.resolve('dist/'), // This is where images AND js will go
    publicPath: 'public/', // This is used to generate URLs to e.g. images
    filename: 'bundle.js'
  },
  plugins: [
    new ExtractTextPlugin("bundle.css")
  ],
  module: {
    //
    loaders: [
      {
        test: /\.json/,
        loader: 'json-loader',
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, // inline base64 for <=8k images, direct URLs for the rest
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style", "css!postcss")
      },
      {
        test: /\.scss$/,
        exclude: [/node_modules/],
        loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded")
      },
      // fonts and svg
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" },
      {
        test: /\.(ico|jpe?g|png|gif)$/,
        loader: 'file'
      } // inline base64 for <=8k images, direct URLs for the rest
    ]
  },
  postcss: function(webpack) {
    return [
      autoprefixer({browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']})
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, "node_modules")]
  },
  resolve: {
    // now require('file') instead of require('file.coffee')
    extensions: ['', '.ts', '.webpack.js', '.web.js', '.js', '.json', 'es6']
  },
  devtool: 'source-map'
};

Not able to debug this error

The error doesn't seem to be there. How does your index look like? — Eric Martinez
– Eric Martinez, Commented Mar 21, 2016 at 12:47
Are you seeing the error at runtime or build time? If it's the former it could simply be that your server is incorrectly serving your index.html instead of the bundle.js so the browser tries to evaluate html as js? — Richard Scarrott
– Richard Scarrott, Commented May 10, 2016 at 8:40
You should share your bundle.js if it's created. This could be caused by anything. Internal or external libraries as you are bundling the whole thing. — Venkata Dorisala
– Venkata Dorisala, Commented May 20, 2016 at 16:32

basarat · Accepted Answer · 2016-03-21 23:07:16Z

4

Uncaught SyntaxError: Unexpected token <

This is most likely an error:

in your TypeScript
being raised as a compiler error to webpack
being reported to you.

answered Mar 21, 2016 at 23:07

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shettyh · Accepted Answer · 2016-06-06 08:29:52Z

Check this good Angular2 Webpack sample

Angular 2 Webpack sample

This github project demonstrates how to use Webpack with Angular2 with minimal configurations.

Here is the sample of Webpack config from this project

module.exports = {
    entry: "./main.ts",
    output: {
        path: __dirname,
        filename: "./dist/bundle.js"
    },
    resolve : {
        extentions: ['','.js','.ts']
    },
    module: {
        loaders : [{
            test: /\.ts/, loaders : ['ts-loader'],exclude: /node_modules/
        }]
    }
};

Koronos · Accepted Answer · 2016-05-26 02:21:51Z

0

In my experience, that error appears because in some import, the name or the file type is wrong.

Do you have html imports?

answered May 26, 2016 at 2:21

Koronos

5571 gold badge4 silver badges16 bronze badges

Comments

Edmar Miyake · Accepted Answer · 2016-09-08 22:04:13Z

0

Try adding <!doctype html> on top of your template (HTML).

answered Sep 8, 2016 at 22:04

Edmar Miyake

12.4k3 gold badges40 silver badges39 bronze badges

Collectives™ on Stack Overflow

Webpack + angular2

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related