Unexpected token "indent" on Vue 3 template

yst138451 commented 3 years ago

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 commented 3 years ago

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

ilyavaiser commented 3 years ago

When can this be fixed?

guillaumebriday commented 2 years ago

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

Thank you!

xxSkyy commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

Karinemoreira commented 2 years ago

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 commented 2 years ago

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

doutatsu commented 2 years ago

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

ColtHands commented 2 years ago

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

TokugawaTakeshi commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

webdiscus commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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 commented 1 year ago

Is this problem resolved?

TokugawaTakeshi commented 1 year ago

@avinmaster

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

If resolved, I am sorry at advance.

khashayarghajar commented 1 year ago

Is this problem resolved ?

rudolfbyker commented 1 year ago

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: https://github.com/vuejs/core/pull/3842
Here is my new PR: https://github.com/vuejs/core/pull/7723

kjxbyz commented 12 months ago

same issue.

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

webdiscus commented 11 months ago

@kjxbyz

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

kjxbyz commented 11 months ago

@webdiscus Is there a corresponding vite plugin?

webdiscus commented 11 months ago

@kjxbyz

this loader is not for Vite, only for Webpack

yyx990803 / pug-plain-loader

Unexpected token "indent" on Vue 3 template #18