unplugin / unplugin-vue2-script-setup

💡 Bring `<script setup>` to Vue 2.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

pug compile error

besfir opened this issue · comments

An error occurs when using <script setup> and <template lang='pug'> together. The following error message was printed.

 WARN  [SSR] Error transforming /Users/hwan/WebstormProjects/colawork-back-office/front-end/pages/index.vue: require is not defined                                                                                          11:05:58

  at /Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin-vue2-script-setup/dist/nuxt.mjs:423:15
  at parseSFC (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin-vue2-script-setup/dist/nuxt.mjs:427:7)
  at transformVue (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin-vue2-script-setup/dist/nuxt.mjs:905:17)
  at transform (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin-vue2-script-setup/dist/nuxt.mjs:889:16)
  at TransformContext.transform (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin-vue2-script-setup/dist/nuxt.mjs:945:24)
  at TransformContext.plugin.transform (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin/dist/index.mjs:645:25)
  at Object.transform (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:53)
  at async doTransform (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/vite/dist/node/chunks/dep-f5552faa.js:52060:29)

To check what the problem was, I directly modified the nuxt.mjs file mentioned in the error message and put the phrase import {compile} from 'pug'. This time, an indent error message was printed, and after removing the indentation on the first line in the template block, it was finally available normally.

 WARN  [SSR] Error transforming /Users/hwan/WebstormProjects/colawork-back-office/front-end/pages/index.vue: /Users/hwan/WebstormProjects/colawork-back-office/front-end/pages/index.vue:2:1                                 11:15:56
    1| 
  > 2|   div
-------^
    3|     div does it works?
    4| 

unexpected token "indent"

  1|
  > 2|   div
  -------^
  3|     div does it works?
  4|
  
  unexpected token "indent"
  at makeError (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/pug-error/index.js:34:13)
  at Parser.error (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/pug-parser/index.js:56:15)
  at Parser.parseExpr (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/pug-parser/index.js:280:14)
  at Parser.parse (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/pug-parser/index.js:115:25)
  at parse (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/pug-parser/index.js:12:20)
  at Object.parse (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/pug/lib/index.js:137:11)
  at Function.loadString [as string] (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/pug-load/index.js:54:21)
  at compileBody (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/pug/lib/index.js:82:18)
  at exports.compile (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/pug/lib/index.js:269:16)
  at /Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin-vue2-script-setup/dist/nuxt.mjs:426:15
  at parseSFC (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin-vue2-script-setup/dist/nuxt.mjs:428:7)
  at transformVue (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin-vue2-script-setup/dist/nuxt.mjs:906:17)
  at transform (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin-vue2-script-setup/dist/nuxt.mjs:890:16)
  at TransformContext.transform (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin-vue2-script-setup/dist/nuxt.mjs:946:24)
  at TransformContext.plugin.transform (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/unplugin/dist/index.mjs:645:25)
  at Object.transform (/Users/hwan/WebstormProjects/colawork-back-office/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:53)

And this is a vue file that causes the above error.

<script setup lang="ts"></script>

<template lang="pug">
  div
    div does it works?
</template>

To summarize what I want to request, it is as follows.

  1. Preventing the occurrence of a 'require is not defined' error in the phrase 'require ("pug").
  2. Making the first line indentation optionally available within the pug template block.

Thank you.