WebStorm (v2.3.1): Live reload after file change (html) does not work. SyntaxError: Unexpected token < in JSON at position 0

[webia1]

possible bug ? Windows 7, npm 4.0.1, node v6.8.1, TypeScript 2.0.10

Initial seed, nothing has been changed. Work-around here does not work.

That's the Chrome Console:

VM661:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at http://localhost:5555/app/system-config.js:1:20(anonymous function) @ system-config.ts:2

    System.config(JSON.parse('<%= SYSTEM_CONFIG_DEV %>'));
    //# sourceMappingURL=system-config.js.map

(index):48 (SystemJS) Unexpected token <
    SyntaxError: Unexpected token <
        at eval (<anonymous>)
    Evaluating http://localhost:5555/app/main
    Error loading http://localhost:5555/app/main Not expecting this error? Report it at https://github.com/mgechev/angular-seed/issues

As already mentioned here safe-write is activated:

[mgechev]

I don't have webstorm installed, neither a license so it'll be hard to reproduce...

[webia1]

You can always download an early access version (30 Days) here: https://confluence.jetbrains.com/display/WI/WebStorm+EAP

At reloading-time the '<%= SYSTEM_CONFIG_DEV %>' cannot be interpreted, whatever the problem is, it is time or order-related.

The message Unexpected token < stands for < of '<%= SYSTEM_CONFIG_DEV %>'

[TheDonDope]

Sounds a hell lot like https://github.com/mgechev/angular-seed/issues/1625#issuecomment-260276901

[webia1]

I've asked the question at stackoverflow.

[mgechev]

@webia1 I tried it with https://www.jetbrains.com/webstorm/download/ on macOS and it works great. Maybe it's something Windows related? Can you reproduce it with VSCode?

[webia1]

@mgechev Yes, you're right; no Problems on macOS and Unix/Linux,..

[webia1]

Can "inotify" be the problem on Windows7 ? See here the update at Windows10.

Could that here help?

Almost all the big (Banks/Insurance/Governmental/..) companies use still Windows 7 in Austria and in Germany. We have to solve this problem or in worst case change the seed :/

[ultimatedion]

1) Did you try to edit the HTML files outside of webstorm to see if the same problem happens?

This should tell us if it's WebStorm related or not.

2) How do you launch your app with live reload?

I might not have the same versions of node, npm etc) but I am using PhpStorm on Windows 7. I don't have any issues.

[mgechev]

@webia1 yes, definitely we should fix the problem. @ultimatedion good questions, @webia1 would you follow up?

[lifaon74]

I have something realy similar.

I use the last version of webstorm (2.3.1, windows 10) and ng2-seed, and since ~2 weeks ago I detect some strange compilation behaviour : one of my ts file (always the same, only containing one enum, and massivelly used) partially compiles sometimes (1 times on 2 some enums values are missing but the file is always valid) and it always produces a external map file even if the sourceMappingURL is inlined into the js file. It's like if this file was cached and loading from a realy old version or than typescript was removing randomly some enum constants... just for this particular file. I'll try to inspect a maximum this problem today (problem from webstrom, lib update ?...).

Concerning @webia1 I encountered the same problem just one time, I just did another npm start and never saw it again (and I hope it will continue ;) )

[sangecz]

I have the same issue as @webia1 but on macOS (10.12.1) with webstorm (2016.3.1) but also with mcedit, so this is not webstorm related

[sangecz]

interesting is that this occurs only if I edit html file and save it, but it recovers (no need to new npm start) when I edit ts file.

[webia1]

yes, the problem occurs only by editing html files, no matter within WebStorm or Notepad. I can remember, there was a similar problem but an another reason.

At the time of reloading that-one cannot be evaluated: <%= SYSTEM_CONFIG_DEV %> Maybe a precompiler | ejs would help?

The difference by Reloading, as you can see here, is "server.start:

Maybe a "server-reload" step can be integrated into the build.dev?

Also following options would be interesting:

nodemon node-supervisor forever

By the way I would integrate "@types/gulp-typescript": "^0.0.32", into package.json

[alaevka]

same problem started some hours ago. after then i update html got this error. my editor is sublime

[mgechev]

@alaevka again on Windows?

[alaevka]

@mgechev on mac os.

[artemverbo]

+1 on MacOS, Sublime Text, so not a WebStorm issue... running via npm run start or serve.dev. I believe started to happen after a complete node_modules reinstall a couple of days ago.

[webia1]

Could that be a reciprocal interference issue between npm and yarn? Or maybe git changes linux/windows CR/LF,.. ? Changes in node_modules could also be the reason? I've never versioned npm_modules till today,..

Current Solution: I do versioning node_modules (i.e. removed it from .gitignore) too and try not to mix npm and yarn. After I am trying to monitor every changes at the file system, the problem does not dare to appear :) If I find out the reason, I would inform you here.

Contra: Configuring git to not push node_modules is a dirty trick

EDIT: After a git pull from remote is the error back, rm -rf node_modules , yarn and npm start afterwards help,.. It is definitively about file-formats, exchanging data/files between different operating systems is most probably the reason.

[mgechev]

This is definitely weird. @webia1 thanks for pointing out your experience. I'm happy to hear that it's not an issue in the seed and scared that we don't know the exact cause.

[ultimatedion]

I had a similar trouble that started today... Took me a few hours to sort it out and debug it.

It was caused by PhpStorm... Somehow, the Typescript compiler(inside intelliJ) got activated... This create .js files and these js files get copied to dist/dev when updating an html file. When updating a ts file, these js files gets overwrited by the build and fix the problem.

I thought at first that it was not related to PhpStorm because I tried to edit html file outside the IDE. It still happenned because the problem was with already generated .js by Phpstorm... I had to remove them all.

Don't be mistaken, these JS files compiled doesn't show up in the IDE.

Maybe, you had the same issue or it might help you to solve yours.

Solution: Make sure to disable the TypeScript Compiler in PHPStorm...

[webia1]

Hi @mgechev

We have still this problem, disabling of TypeScript Compiler does not solve the problem.

The starting point of the problem is here (src/client/app/system-config.ts):

System.config(JSON.parse('<%= SYSTEM_CONFIG_DEV %>'));

This template beginning with <%= ... is not being evaluated at reload after html change:

'<%= SYSTEM_CONFIG_DEV %>'

What kind of templating is that? EJS ? Where is this dependency in the seed? I've 2 suspicions:

1) Express server on Windows has problems with reloading of EJS templates ? 2) EJS will not be evaluated because of injection order of js-libraries ?

That is currently a big problem in our environment, my team members do not want to use this seed because of this problem on Windows (p.s no problems on Mac & Linux).

Thank you for your answers, merry Christmas,..

[mgechev]

We're using gulp-template which behind the scene uses lodash/underscore templates. You can find where we're using it here.

[ultimatedion]

This is not the problem. Of course that '<%= SYSTEM_CONFIG_DEV %>' is not evaluated... <%= SYSTEM_CONFIG_DEV %> is replaced at build time. It won't evaluate at runtime. It need to be replaced in the build process

Look at dist/dev/app/system-config.js You should not see <%= SYSTEM_CONFIG_DEV %> in this file.

Disabling typescript compiler is not the only part of the solution. Make sure you don't have system-config.js in your source folder.

[webia1]

hmm, ok, I've modified start.deving.ts und now it works also in windows:

gulp.task('watch.while_deving', function () {
  watchAppFiles('**/!(*.ts)', (e: any, done: any) =>
    runSequence('build.assets.dev', 'build.html_css', 'build.js.dev', 'build.index.dev', () => { notifyLiveReload(e); done(); }));
  watchAppFiles('**/(*.ts)', (e: any, done: any) =>
    runSequence('build.js.dev', 'build.index.dev', () => {
      notifyLiveReload(e);
      runSequence('build.js.test', 'karma.run.with_coverage', done);
    }));
});

[skolli853780]

I am having the same issue..

Error: (SystemJS) Unexpected token < in JSON at position 0 SyntaxError: Unexpected token < in JSON at position 0 at Object.parse () at Object.eval (http://localhost:5555/app/shared/config/env.config.js:2:23) at eval (http://localhost:5555/app/shared/config/env.config.js:4:4) at eval (http://localhost:5555/app/shared/config/env.config.js:5:3) at eval () at Object.eval (http://localhost:5555/app/shared/index.js:11:10) at eval (http://localhost:5555/app/shared/index.js:15:4) at eval (http://localhost:5555/app/shared/index.js:16:3) at eval () Evaluating http://localhost:5555/app/shared/config/env.config.js Evaluating http://localhost:5555/app/shared/index.js Evaluating http://localhost:5555/app/app.component.js Evaluating http://localhost:5555/app/app.module.js Evaluating http://localhost:5555/app/main.js Error loading http://localhost:5555/app/main.js at Object.parse () at Object.eval (http://localhost:5555/app/shared/config/env.config.js:2:23) at eval (http://localhost:5555/app/shared/config/env.config.js:4:4) at eval (http://localhost:5555/app/shared/config/env.config.js:5:3) at eval () at Object.eval (http://localhost:5555/app/shared/index.js:11:10) at eval (http://localhost:5555/app/shared/index.js:15:4) at eval (http://localhost:5555/app/shared/index.js:16:3) at eval () Evaluating http://localhost:5555/app/shared/config/env.config.js Evaluating http://localhost:5555/app/shared/index.js Evaluating http://localhost:5555/app/app.component.js Evaluating http://localhost:5555/app/app.module.js Evaluating http://localhost:5555/app/main.js Error loading http://localhost:5555/app/main.js "Report this error at https://github.com/mgechev/angular2-seed/issues"

[skolli853780]

issue is resolved by deleting js files from src