Webpack-dev-server: "Syntax error: Unexpected token <" with webpack-dev-server and HotModuleReplacingPlugin

Created on 23 Mar 2015 · 10Comments · Source: webpack/webpack-dev-server

Duplicating https://github.com/babel/babel-loader/issues/43 here too, 'cause I really cannot figure out what's causes that issue and it looks like webpack's stuff.

Source

voronianski

Most helpful comment

<script src="/bundle.js"></script> not <script src="bundle.js"></script>

ghost on 10 Mar 2017

👍3 🎉1

All 10 comments

Can you compare your setup with https://github.com/gaearon/react-hot-boilerplate?

gaearon on 23 Mar 2015

@gaearon I did it.. The only difference is that I'm using CLI instead of Node.js API.

voronianski on 23 Mar 2015

@gaearon @sokra demo repo with reproducible bug might help - https://github.com/voronianski/webpack-trouble-demo

voronianski on 23 Mar 2015

I just realized you have two servers. Here's _what I guess_ to be your problem: your app runs on other port than WebpackDevServer but the publicPath is /build/, so Webpack runtime requests hot updated script at /build/, which is served by your Express app.

Setting publicPath explicitly to http://localhost:8080/build/ should help. I think there's also some other more idiomatic way of doing this but this is what I can help with.

gaearon on 24 Mar 2015

👍4

@gaearon yep, setting publicPath explicitly to http://localhost:8080/build/ solved this error :+1:

voronianski on 24 Mar 2015

👍1

Added to troubleshooting. https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#syntax-error-unexpected-token-

gaearon on 24 Mar 2015

@gaearon thanks! Probably now issue can be closed.

voronianski on 24 Mar 2015

<script src="/bundle.js"></script> not <script src="bundle.js"></script>

ghost on 10 Mar 2017

👍3 🎉1

@voronianski , I got the similar issue on production, I don't think the same approach works here for me. Any help?

My html page looks like below.

<!doctype html>
<html lang=en>

<head>
    <title>My Site</title>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
</head>

<body>
    <div id=root style="height: 100%">
        <h4 style="text-align: center" class=loader>Page is loading...</h4>
    </div>
    <script type=text/javascript src=/assets/js/manifest.60b7f228ef509010b4c4.js></script>
    <script type=text/javascript src=/assets/js/vendor.60b7f228ef509010b4c4.js></script>
    <script type=text/javascript src=/assets/js/app.60b7f228ef509010b4c4.js></script>
</body>

</html>