Infinite loop in vue-template-compiler

[oguimbal]

Version

2.6.10

Reproduction link

https://github.com/oguimbal/vuebug

Steps to reproduce

git clone git@github.com:oguimbal/vuebug.git
npm i
npm start

Wait a couple of seconds, and your compilation process will be frozen.

If you attach a debugger to the node process, you will see the infinite loop in generateCodeFrame() method of vue-template-compiler:

What is expected?

I would expect the compiler not to freeze

What is actually happening?

The compiler is freezing

[posva]

Hey, in order to check we need a boiled down repro without any extra dependency (like storybook). Ping me when you get a boiled down repro so I can get a look

[oguimbal]

@posva No problem...

https://github.com/oguimbal/vuebug-simple

git clone git@github.com:oguimbal/vuebug-simple.git
cd vuebug-simple
npm i
code .

Then hit F5 (if using vscode, otherwise npm start) => freeze.

nb: I know that i forgot to include pug loader ... but thats the point, it freezes without error.

[edit] NB: The tight loop is in generateCodeFrame(), where line 16-17 seems fishy to me

[posva]

It shows an error instead of freezing:

ERROR in ./bug.vue?vue&type=template&id=20e40a56&lang=pug& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./bug.vue?vue&type=template&id=20e40a56&lang=pug&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)

  Errors compiling template:

  Component template requires a root element, rather than just text.

  1  |
     |
  2  |  div Whatever
     |  ^^^^^^^^^^^^
  3  |

 @ ./bug.vue?vue&type=template&id=20e40a56&lang=pug& 1:0-202 1:0-202
 @ ./bug.vue
 @ ./main.js

The error comes from vue-loader though. It could maybe display a warning if the specified lang does not contain a rule in the webpack config but at the same time the need of using pre processors is explained on the very first paragraph

[oguimbal]

Not on my machine oO' (see screenshot as "proof")

However, if you look at this , it is kind of obvious that this loop can never finish in some circumstances.

For me, with my repo, it gets called that way:

generateCodeFrame(`
div Whatever
`, 2, 16)

Which freezes: https://codesandbox.io/embed/xenodochial-roentgen-5dbbq

[oguimbal]

@posva I know know if you dont believe me or if you dont have the time to look at it, but I think it is probably due to the fact that I'm on Windows and you might not: My line breaks are \r\n instead of \n ...

Thus generateCodeFrame() gets called with "16" as length in the example above (which should be 14 without \r's)

The split const lines = source.split(/\r?\n/); removes those two caracters.

But the line count += lineLength + 1; does not take them into account (only adds 1 line return character), and there is no check that gets execution out of this infinite loop.

Anyway I wont bother you further with that, the problem is solved for me anyway :)

[posva]

I see, you should use LF ending. It can be enforced through eslint via linebreak-style.
Let me check a bit more about this

[posva]

Even when using CRLF endings in the bug.vue file (on osx), I get the same error as before, no infinite loop 🤔

[haoqunjiang]

I just reproduced this issue… The repository URL in OP is different from the one in the screenshot. The correct one is https://github.com/oguimbal/vuebug-simple
After cloning this repo & change the line endings I can reproduce the frozen output bug.

[haoqunjiang]

So… I believe this is a bug. PR's welcome.

[haoqunjiang]

Well I have found the culprit 😂

vue/src/compiler/codeframe.js

Line 8 in d2db6af

end: number = source.length

This line.
There're many warnings that do not provide the end position.
For those warnings, end is calculated by source.length. However, in the following for-loop, count is incremented by lineLength + 1, which is incorrect if the line ends with CRLF. Thus the infinite loop.

Also, this only happens when the template does not have an indentation because otherwise Vue would have normalized the template source during de-indentation

[haoqunjiang]

The fix is as simple as

end: number = source.replace(/\r\n/g, '\n').length