Uncaught SyntaxError: Unexpected token _ in JSON at JSON.parse

[NekoSensei06]

Hello,

i'm trying to use Sass-graph-viz, as a command line, but i get the same error of "Unexpected token _ in JSON" on most of my files; I tried to use it on a smaller file, with two imports : @import '../base/variables'; @import '../base/mixins';

it works if the imports are on the same folder. It's a big project, so I need to have folders.

Here is the Json of that smaller file : [{"id":"programmation-nationale","label":"programmation-nationale","color":{"background":"#CCC","border":"#BBB","highlight":{"background":"#CCC","border":"#BBB"}}},{"id":"..\\base\\_variables","label":"..\\base\\_variables","color":{"background":"#9edb9b","border":"#57cc45","highlight":{"background":"#9edb9b","border":"#57cc45"}}},{"id":"..\\base\\_mixins","label":"..\\base\\_mixins","color":{"background":"#9edb9b","border":"#57cc45","highlight":{"background":"#9edb9b","border":"#57cc45"}}}]

[nicoespeon]

Hi @AurelienJean 👋

I'm not sure to understand your situation: what file are you trying to analyze? Is it a something.scss file that has the 2 imports inside?

For example, I tried to run the library on the following structure:

📂base/
  |
  |__ variables.scss
  |__ mixins.scss
📂 src/
  |__ index.scss

With index.scss being:

@import '../base/variables';
@import '../base/mixins';

I ran npx sass-graph-viz . from the src/ folder, and I got the following graph:

Could you give me a repro of the error?

[NekoSensei06]

hi,

I tried the same simple example, on a new folder; nothing in the files, expect the import in index.scss :

I ran npx sass-graph-viz . from src / No error on the npx command, but I get a blank page on chrome and an error in the chrome console :

Firefox :

Here is the line 21 from index :

</style><link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" defer><link href="preloader.css" rel="stylesheet"><link href="vis.4.21.0.min.css" rel="stylesheet" defer><script>var nodes = JSON.parse('[{"id":"index","label":"index","color":{"background":"#CCC","border":"#BBB","highlight":{"background":"#CCC","border":"#BBB"}}},{"id":"..\\base\\variables","label":"..\\base\\variables","color":{"background":"#CCC","border":"#BBB","highlight":{"background":"#CCC","border":"#BBB"}}},{"id":"..\\base\\mixins","label":"..\\base\\mixins","color":{"background":"#CCC","border":"#BBB","highlight":{"background":"#CCC","border":"#BBB"}}}]');

when I remove the import, or if I put the files on the same folder, it works :

I'm on Windows 10, Vs Code; I ran npx on cmd, tried powershell and git bash.

[NekoSensei06]

I tried it on a debian WSL, and it works; so it seems like a Windows problem.

So, at least I can use it that way :)

[nicoespeon]

Thanks for the details @AurelienJean, that was helpful.

So yeah, I know what the problem is. And yep, it's Windows-specific.

On Windows, paths use the backslash symbol instead of the regular slash. Thus, we end up with the following string:

'[{"id":"index","label":"index","color":{"background":"#CCC","border":"#BBB","highlight":{"background":"#CCC","border":"#BBB"}}},{"id":"..\\base\\variables","label":"..\\base\\variables","color":{"background":"#CCC","border":"#BBB","highlight":{"background":"#CCC","border":"#BBB"}}},{"id":"..\\base\\mixins","label":"..\\base\\mixins","color":{"background":"#CCC","border":"#BBB","highlight":{"background":"#CCC","border":"#BBB"}}}]'

This can't be passed into JSON.parse(). We need to escape the backslashes again, so we have \\\\ instead of \\.

I'll see what I can do 👍

[nicoespeon]

@AurelienJean I released v2.3.1 with an attempt to fix this. I think it's OK but I don't have a Windows OS, so I can't confirm.

Can you tell me if it works now?

[NekoSensei06]

It's working !

Thanks a lot for the fix and your product, it will help me optimize my scss architecture :)