Svelte: Uncaught SyntaxError: Unexpected token <

Created on 8 Aug 2019 · 42Comments · Source: sveltejs/svelte

Got this error in console after running
npm run dev

Logs
Uncaught SyntaxError: Unexpected token <

To Reproduce
"svelte": "^3.0.0"

Node js version
v12.4.0

OS and Browser
Ubuntu 19.04
Chrome: Version 75.0.3770.142 (Official Build) (64-bit)

Source

php7webmob

👍2

Most helpful comment

Had this same issue. Some sort of caching issue I think because when I opened in an incognito window everything just worked. Looking into a solution, assuming it has something to do with rollup?

Update: Setting the cache to disabled in the browser network tab worked for me. Not a long term solution, but works for now. cc @antony @php7webmob

Screen Shot 2019-08-16 at 1 13 19 PM

dabit3 on 16 Aug 2019

👍8 🚀2

All 42 comments

Do you have a reproduction? This isn't enough information to debug.

pngwn on 8 Aug 2019

what else do you need?

php7webmob on 8 Aug 2019

@php7webmob it looks like you are trying to run the Svelte compiler itself.

See the Getting Started section on the Svelte site, or, in a pinch:

npx degit sveltejs/template my-svelte-project
cd my-svelte-project

npm install
npm run dev

antony on 8 Aug 2019

@antony followed the exact same steps form the official doc.

php7webmob on 8 Aug 2019

@php7webmob Which is the official doc you are referring to?

antony on 8 Aug 2019

https://svelte.dev/

php7webmob on 8 Aug 2019

I've just tried them to sanity check and it works fine. Can you tell us what exactly your browser is referring to with '<' (hint: check developer console / network traffic)

antony on 8 Aug 2019

To Reproduce
To help us help you, if you've found a bug please consider the following:

If you can demonstrate the bug using https://svelte.dev/repl, please do.

If that's not possible, we recommend creating a small repo that illustrates the problem.

Reproductions should be small, self-contained, correct examples – http://sscce.org.

pngwn on 8 Aug 2019

@antony got this issue in bundle.js:1

php7webmob on 8 Aug 2019

maybe it's a webpack thing?

php7webmob on 8 Aug 2019

@php7webmob can you just provide us more information. What is the code surrounding the < character? We need detail in order to fix your issue.

Svelte template doesn't use webpack, it uses rollup.

antony on 8 Aug 2019

okay. when I click the error in console it takes me to the bundle.js file. I assume that bundle.js:1 means line no. 1 is the problem.

<!doctype html>
<html>
<head>
    <meta charset='utf8'>
    <meta name='viewport' content='width=device-width'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/bundle.css'>

    <script defer src='/bundle.js'></script>
</head>

<body>
</body>
</html>

php7webmob on 8 Aug 2019

Can you describe in as much detail as possible the steps you took for this error to occur. Nothing should be left out.

pngwn on 8 Aug 2019

just to clarify - are you sure you are running dev and not start

secondly, download bundle.js and paste the contents here.

antony on 8 Aug 2019

@pngwn I have followed the exact steps bellow. Doesn't even changed a single latter names also are the same.

npx degit sveltejs/template my-svelte-project
cd my-svelte-project

npm install
npm run dev

php7webmob on 8 Aug 2019

@php7webmob can you recreate it on https://codesandbox.io/ then, as we aren't able to get anywhere from here.

antony on 8 Aug 2019

Can you show the full output of your terminal console when the error occurs?

pngwn on 8 Aug 2019

@antony Yes I am running npm run dev not npm run start

here's content of the bundle.js file:

unfortunately, my bundle.js file seems to be empty.

php7webmob on 8 Aug 2019

@pngwn Okay I will post a screenshot here.

php7webmob on 8 Aug 2019

Screenshot from 2019-08-08 17-41-45
@pngwn Okay I will post a screenshot here.

php7webmob on 8 Aug 2019

Please post a screenshot of your terminal, the thing you use to type in the commands.

pngwn on 8 Aug 2019

Please post a screenshot of your terminal, the thing you use to type in the commands.

I am so sorry. my mistake.
Screenshot from 2019-08-08 17-45-57

php7webmob on 8 Aug 2019

It looks like your bundle is not being created

Can you try npm run build and paste the output?

antony on 8 Aug 2019

It looks like your bundle is not being created

Can you try npm run build and paste the output?

Screenshot from 2019-08-08 18-30-45

php7webmob on 8 Aug 2019

It looks like your bundle is not being created
Can you try npm run build and paste the output?

var app=function(){"use strict";function t(){}function n(t){return t()}function e(){return Object.create(null)}function o(t){t.forEach(n)}function r(t){return"function"==typeof t}function a(t,n){return t!=t?n==n:t!==n||t&&"object"==typeof t||"function"==typeof t}function c(t,n){t.appendChild(n)}function u(t){return document.createTextNode(t)}let s;function f(t){s=t}const i=[],l=[],d=[],$=[],p=Promise.resolve();let m=!1;function h(t){d.push(t)}function g(){const t=new Set;do{for(;i.length;){const t=i.shift();f(t),y(t.$$)}for(;l.length;)l.pop()();for(let n=0;n<d.length;n+=1){const e=d[n];t.has(e)||(e(),t.add(e))}d.length=0}while(i.length);for(;$.length;)$.pop()();m=!1}function y(t){t.fragment&&(t.update(t.dirty),o(t.before_update),t.fragment.p(t.dirty,t.ctx),t.dirty=null,t.after_update.forEach(h))}const b=new Set;function _(t,n){t.$$.dirty||(i.push(t),m||(m=!0,p.then(g)),t.$$.dirty=e()),t.$$.dirty[n]=!0}function x(a,c,u,i,l,d){const $=s;f(a);const p=c.props||{},m=a.$$={fragment:null,ctx:null,props:d,update:t,not_equal:l,bound:e(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map($?$.$$.context:[]),callbacks:e(),dirty:null};let y=!1;var x,v,w;m.ctx=u?u(a,p,(t,n)=>{m.ctx&&l(m.ctx[t],m.ctx[t]=n)&&(m.bound[t]&&m.bound[t](n),y&&_(a,t))}):p,m.update(),y=!0,o(m.before_update),m.fragment=i(m.ctx),c.target&&(c.hydrate?m.fragment.l((w=c.target,Array.from(w.childNodes))):m.fragment.c(),c.intro&&((x=a.$$.fragment)&&x.i&&(b.delete(x),x.i(v))),function(t,e,a){const{fragment:c,on_mount:u,on_destroy:s,after_update:f}=t.$$;c.m(e,a),h(()=>{const e=u.map(n).filter(r);s?s.push(...e):o(e),t.$$.on_mount=[]}),f.forEach(h)}(a,c.target,c.anchor),g()),f($)}class v{$destroy(){var n,e;e=1,(n=this).$$.fragment&&(o(n.$$.on_destroy),n.$$.fragment.d(e),n.$$.on_destroy=n.$$.fragment=null,n.$$.ctx={}),this.$destroy=t}$on(t,n){const e=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return e.push(n),()=>{const t=e.indexOf(n);-1!==t&&e.splice(t,1)}}$set(){}}function w(n){var e,o,r,a;return{c(){var t,c,s,f;t="h1",e=document.createElement(t),o=u("Hello "),r=u(n.name),a=u("!"),c=e,s="class",null==(f="svelte-i7qo5m")?c.removeAttribute(s):c.setAttribute(s,f)},m(t,n){!function(t,n,e){t.insertBefore(n,e||null)}(t,e,n),c(e,o),c(e,r),c(e,a)},p(t,n){var e,o;t.name&&(e=r,o=""+(o=n.name),e.data!==o&&(e.data=o))},i:t,o:t,d(t){var n;t&&(n=e).parentNode.removeChild(n)}}}function E(t,n,e){let{name:o}=n;return t.$set=(t=>{"name"in t&&e("name",o=t.name)}),{name:o}}return new class extends v{constructor(t){super(),x(this,t,E,w,a,["name"])}}({target:document.body,props:{name:"world"}})}();
//# sourceMappingURL=bundle.js.map

php7webmob on 8 Aug 2019

The hint I see above is that path, /opt/lampp/htdocs/…

This makes me wonder if maybe a different Web server is being used. Maybe this error appears in the browser console when trying to open the index.html file as served by an ordinary web server rather than by the Svelte dev tooling.

kylecordes on 8 Aug 2019

The hint I see above is that path, /opt/lampp/htdocs/…

This makes me wonder if maybe a different Web server is being used. Maybe this error appears in the browser console when trying to open the index.html file as served by an ordinary web server rather than by the Svelte dev tooling.

I am positive that no other server is running other than a Gatsby server on port 8000. and port 5000 is allocated to svelte.

php7webmob on 8 Aug 2019

@kylecordes you can spot the url used in one of the earlier screenshots though, so ruling that out.

It seems like your bundle is built if you run npm run build. Can you try npm run autobuild to see if that also builds a bundle.

I'm sorry to say that this seems very specific to your machine - not entirely sure what's going on, but your output from npm run dev shows that a bundle isn't being built, and livereload isn't starting. For Comparison, here's the expected output:

  Your application is ready~! 🚀

  - Local:      http://localhost:5000

────────────────── LOGS ──────────────────

rollup v1.19.4
bundles src/main.js → public/bundle.js...
LiveReload enabled
created public/bundle.js in 235ms

[2019-08-08 14:29:25] waiting for changes...

antony on 8 Aug 2019

Guess I have to test this on different machine.

php7webmob on 8 Aug 2019

Had this same issue. Some sort of caching issue I think because when I opened in an incognito window everything just worked. Looking into a solution, assuming it has something to do with rollup?

Update: Setting the cache to disabled in the browser network tab worked for me. Not a long term solution, but works for now. cc @antony @php7webmob

Screen Shot 2019-08-16 at 1 13 19 PM

dabit3 on 16 Aug 2019

👍8 🚀2

After 11 days I thought I should give it another try and it worked! I don't know how but it worked. Did not even require incognito mode.

php7webmob on 19 Aug 2019

I can reproduce this every time by running npm start after install. After that npm run dev will also produce this error. However, this only happens if you run the start command first.

So it seems to have something to do with running sirv public --single without building first perhaps?
Disable cache fixes it as @dabit3 said.

AndreasSundman on 30 Aug 2019

I know the issue is closed, but I thought I'd shed a little light on this as it was discussed on Discord.

The problem occurs because sirv public --single decides to send index.html for any route/resource that doesn't exist in the public directory. You'll know right away that you have a problem when you are requesting, say, an image and you get back 200 text/html response instead of a 404.

The browser will try to parse the index.html content as though it were an image (or script in the case of this bug) and barf out. Even worse is that the cache is now polluted with garbage data for that URL and the only way to fix it is to clear the cache or disable the cache completely.

Hope that helps... I know it drove me nuts for a while!

dkondrad on 30 Aug 2019

👍7 😄2

Still got this error when following the guidance. When I run start script and no bundle created, I got Uncaught SyntaxError: Unexpected token '<' error, but in incognito mode it works. ps: disable cache is not working...

JerryYuanJ on 29 Sep 2019

I've just reproduced the issue, on my first contact with Svelte. disabled cache on chrome fixed it.
I've enabled back and it worked too. It would be nice to fix this