Unexpected token "indent" on Vue 3 template

[yst138451]

Vue version: 3.0.1

Related issue: vuejs/rollup-plugin-vue#86

With the default indentation style of 2 spaces on templates, I'm getting the following issue:

    1|
  > 2|   div(:class="styleClasses")
-------^
    3|     span(
    4|       contenteditable
    5|       ref="textField"

unexpected token "indent"

This doesn't seem to happen on version 2 though.

--

Possible solution #17

[xxSkyy]

Same problem, cant use beautifier due of this. Should be fixed as vue3 coming fast to get as daily.

[ilyavaiser]

When can this be fixed?

[guillaumebriday]

Hey 👋 @yyx990803 Could you take a look at this issue please? Pug users cannot upgrade to Vue 3 with this bug :/

Thank you!

[xxSkyy]

The solution are pretty simple, if using VSCode switch to Volar plugin and it's formatter. Honestly I forgot about this problem since.

Also I recommend migrating from Webpack to Vite

[doutatsu]

I've wanted to update to Vue 3, but the issue of indentation makes it really hard. I understand that not indenting is more performant for the source maps, but I'd like to keep indenting if possible. Any solutions for this?

[linhntaim]

I found a temporary solution for it: Not put the indent at the first line in template and it works well.

[Karinemoreira]

I found a temporary solution for it: Not put the indent at the first line in template and it works well.

Thank u! It works.

[infostatus]

Is there already a solution to keep the indentation?
Some option that we can configure Pug so this warning doesn't show?

[doutatsu]

@infostatus Not that I am aware - I had to cave in and just go with the indentation

[ColtHands]

This is a problem with the actual pug compiler since root components can't start with an indent.

[TokugawaTakeshi]

Vue 3.X is in "latest" channel now while this problem still unsolved.
Just checked with newest packages.

I did not understand what it is the actual cause of this problem. Pug? Vue3? @vue/compiler-sfc? Webpack? vue-loader?

[ColtHands]

@TokugawaTakeshi it's a problem with vue3, compiler and Pug all together and not actually a problem at all.

Vue 3 now adds indent token when you start your html template with an indent, pug on the other hand can't start with indent, it needs to start with a tag.

Imo it's not even a problem, just a code style change. Since and vue3 compiler and pug are both not wrong in this case.

[TokugawaTakeshi]

Because Mr. Guillaume Briday already tried to call mr. Evan You in fourth comment, I suppose it's meaningless to try this again.
Also, since the Vue is the open source project, we can't demand the fixes commandingly.

Which other options we have? Hire some freelancer ask him to create the pull request fixing this issue?
My acquaintance has created good pull request for the Vue2.X and it has been ignored, so I afraid it will happen again.

[webdiscus]

@TokugawaTakeshi you can use the @webdiscus/pug-loader.

This Pug loader supports for an indent (spaces and tabs) in Vue template:

<template lang='pug'>
    h1 Hello Pug!
    p Use the '@webdiscus/pug-loader'.
</template>

This Pug loader works with Vue 3. Here is source of usage example.
See please how to setup Pug loader.

[ColtHands]

@webdiscus what code changes have you made from original pug-loader to yours?

[webdiscus]

@webdiscus what code changes have you made from original pug-loader to yours?

I have written completely new code, it is not a fork from original pug-loader.

What can the @webdiscus/pug-loader:

• trim an indent at first level
• better resolving of required resources (images, scss, js, json, pug, etc.)
• has 3 compilation methods:
  • compile - same as result of original pug-loader - it's useful for load Pug in JS with passing custom data
  • render - render Pug into HTML at compile time, not require the html-loader for Webpack
  • html - render Pug into pure HTML string, same as result of pug-plain-loader
• watching of changes in all dependencies (pug, scss, js, json, etc), the original loader watch only main Pug files
• has embedded useful Pug filters, e.g.: :highlight, :markdown with highlighting of code blocks, here is source of example
• this loader is much faster then original loader

[TokugawaTakeshi]

@webdiscus

Thank you for the suggestion. Looks like great, but I need some help with the configuration for my needs.
I can flood here; will I be answered by your team if ask the question on Stack Overflow? Or it's better to open the issue on @webdiscus/pug-loader?

[webdiscus]

@webdiscus

Thank you for the suggestion. Looks like great, but I need some help with the configuration for my needs. I can flood here; will I be answered by your team if ask the question on Stack Overflow? Or it's better to open the issue on @webdiscus/pug-loader?

@TokugawaTakeshi

For a question you can open new discussion.
For a bug or feature request open new issue.
For help with a configuration, create a repo and new issue with link to the repo.

[wj-111]

I solved it by downgrading node version from 16.15.1 to 14.2.0, but I'm not quite sure why this happens

[avinmaster]

Is this problem resolved?

[TokugawaTakeshi]

@avinmaster

According my newest information, in Vue 3 - no.
Current workaround is @webdiscus/pug-loader.

If resolved, I am sorry at advance.

[khashayarghajar]

Is this problem resolved ?

[rudolfbyker]

Note that for some of you, coming from a search engine, as for me, this error might not be related to this repo! This is the stack trace I got with nuxt3 + vue3 + pug and an SFC component, with the contents of <template lang="pug> being indented:

unexpected token "indent"
  Plugin: vite:vue
  File: …/pages/index.vue
      at makeError (…/node_modules/pug-error/index.js:34:13)
      at Parser.error (…/node_modules/pug-parser/index.js:56:15)
      at Parser.parseExpr (…/node_modules/pug-parser/index.js:280:14)
      at Parser.parse (…/node_modules/pug-parser/index.js:115:25)
      at parse (…/node_modules/pug-parser/index.js:12:20)
      at Object.parse (…/node_modules/pug/lib/index.js:137:11)
      at Function.loadString [as string] (…/node_modules/pug-load/index.js:54:21)
      at compileBody (…/node_modules/pug/lib/index.js:82:18)
      at Object.exports.compile (…/node_modules/pug/lib/index.js:269:16)
      at …/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:2382:59

The only packages involved here are:

• @vue/compiler-sfc
• pug
• pug-load
• pug-parser
• pug-error

In my case, I think @vue/compiler-sfc should dedent the code before sending it to the pug library.

• I made a minimal reproduction repository for the problem: https://github.com/rudolfbyker/vue-pug-indent-reproduction
• Here is an old PR trying to address the problem: fix(compiler-sfc): remove first-line indent for pug or jade vuejs/core#3842
• Here is my new PR: Test and support indented pug templates vuejs/core#7723

[kjxbyz]

same issue.

The code cannot be formatted, otherwise this error will appear.

[webdiscus]

@kjxbyz

try to use the @webdiscus/pug-loader. This pug loader works with formatted pug templates.

[kjxbyz]

@webdiscus Is there a corresponding vite plugin?

[webdiscus]

@kjxbyz

this loader is not for Vite, only for Webpack