Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Version 2.x throws Module build failed: SyntaxError #273

Closed
cah-alexsukhodolsky opened this issue Mar 29, 2016 · 6 comments
Closed

Version 2.x throws Module build failed: SyntaxError #273

cah-alexsukhodolsky opened this issue Mar 29, 2016 · 6 comments

Comments

@cah-alexsukhodolsky
Copy link

I've been trying to use the latest version of html-webpack-plugin (2.15.0) alongside webpack (1.12.14).

See below for a copy of my webpack.config.js file.

When I run webpack I get the following error:

ERROR in ./~/html-webpack-plugin/lib/loader.js!./public/app/index.html
Module build failed: SyntaxError: /Users/johnsmith/Dev/testapp/public/app/index.html: Unexpected token (1:1)
<!doctype html>
<html>
  <head>
    <title>Test App</title>
    at Parser.pp.raise (/Users/johnsmith/Dev/testapp/node_modules/babylon/index.js:1378:13)

Downgrading to version 1.7.0 fixed the issue.

Any reason why this might be happening?

Thanks!

webpack.config.js:

const LiveReloadPlugin = require('webpack-livereload-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'public/app')
  //build: path.join(__dirname, 'build')
};

module.exports = {
  entry: [
    './public/app/index.js'
  ],
  output: {
    path: __dirname + '/public/dist/js',
    // publicPath: '/public/dist/js/',
    filename: 'bundle.js'

    // filename: process.env.NODE_ENV !== 'development' ? '[name].js' : '[name]-[hash].js',
    // chunkFilename: process.env.NODE_ENV !== 'development' ? '[name].js' : '[name]-[chunkhash].js'
  },
  module: {
    preLoaders: [
      {
        test: /\.js?$/,
        loaders: ['eslint'],
        // define an include so we check just the files we need
        include: [PATHS.app]
      }
    ],
    loaders: [
      {
        debug: true,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css$/, // Only .css files
        loader: 'style!css' // Run both loaders
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css!postcss-loader!sass'),
        debug: true
      }]
  },
  postcss: function () {
    return [autoprefixer];
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  stats: {
    assets: true,
    colors: true,
    version: true,
    hash: true,
    timings: true,
    chunks: true,
    chunkModules: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      filename: 'index.html',
      template: __dirname + '/public/app/index.html'
    }),
    new ExtractTextPlugin('../css/style.css', {
      allChunks: true
    }),
    new LiveReloadPlugin({
      appendScriptTag: process.env.NODE_ENV === 'development'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
};
@cah-alexsukhodolsky cah-alexsukhodolsky changed the title Latest version (2.15.0) throws Module build failed: SyntaxError Version 2.0.0+ throws Module build failed: SyntaxError Mar 29, 2016
@jantimon
Copy link
Owner

I guess because of your babel loader setting the fallback loader does not work.
The easiest fix would be to specify a loader (e.g. the html-loader):
template: 'html!' + __dirname + '/public/app/index.html'

@jantimon jantimon changed the title Version 2.0.0+ throws Module build failed: SyntaxError Version 2.x throws Module build failed: SyntaxError Mar 30, 2016
@cah-alexsukhodolsky
Copy link
Author

Thanks for your suggestion @jantimon. The issue mentioned above has been resolved but now I have two additional issues:

1 The generated index.html file now takes the form of a JS script:

"use strict";

module.exports = "<!DOCTYPE html>\n<html>\n  <head>\n    <title>Test App</title>\n    <link href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\">\n  <link href="style.css?3925fc50893e74083462" rel="stylesheet"></head>\n  <body>\n    <div id=\"root\">\n    </div>\n    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js\"></script>\n    <script src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js\"></script>\n  <script src="bundle.js?3925fc50893e74083462"></script></body>\n</html>\n";

2 The generated link and script element point to the wrong location. The path should be prepended with "dist/" for both files.

@jantimon
Copy link
Owner

looks like the loader is executed twice.
for the dist path try publicPath: 'dist/'.

@cah-alexsukhodolsky
Copy link
Author

Thanks for your quick reply! I've got it all working per your suggestions.

I actually ended up removing the 'html!' part of the string from the 'template' reference and simply kept the loader definition under the 'loaders' section:
{ test: /\.html$/, loader: 'html' }

And adding publicPath: 'dist/' to the module.exports.output section prepended the paths to the stylesheet and js files with 'dist/'.

@jantimon
Copy link
Owner

cool :)

@lock
Copy link

lock bot commented May 31, 2018

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators May 31, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jantimon @cah-alexsukhodolsky