Gissues: How to preserve whitespace in Vue 3 and vue-cli (in slots) after PR #1600 is merged?

antoniandre

May 29th 2021

Version

3.0.11

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8cHJlPlxuICAgIExpbmUgMVxuICAgIExpbmUgMlxuICA8L3ByZT5cbiAgICBcbiAgPHByZWNvZGU+XG4gICAgTGluZSAxIFxuICAgIExpbmUgMiBcbiAgPC9wcmVjb2RlPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmltcG9ydCBQcmVjb2RlIGZyb20gXCIuL3ByZWNvZGUudnVlXCJcblxuZXhwb3J0IGRlZmF1bHQge1xuICBuYW1lOiBcIkFwcFwiLFxuICBjb21wb25lbnRzOiB7IFByZWNvZGUgfVxufVxuPC9zY3JpcHQ+IiwicHJlY29kZS52dWUiOiI8dGVtcGxhdGU+XG4gIDxwcmU+XG4gICAgPHNsb3Q+PC9zbG90PlxuICA8L3ByZT5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQ+XG5leHBvcnQgZGVmYXVsdCB7XG4gIFxufVxuPC9zY3JpcHQ+XG4iLCJ2dWUuY29uZmlnLmpzIjoiZXhwb3J0IGRlZmF1bHQge1xuICBwdWJsaWNQYXRoOiAndHJ1YycsXG4gIGNoYWluV2VicGFjazogKGNvbmZpZykgPT4ge1xuICAgIGNvbmZpZy5tb2R1bGVcbiAgICAgIC5ydWxlKFwidnVlXCIpXG4gICAgICAudXNlKFwidnVlLWxvYWRlclwiKVxuICAgICAgLmxvYWRlcihcInZ1ZS1sb2FkZXJcIilcbiAgICAgIC50YXAob3B0aW9ucyA9PiB7XG4gICAgICAgIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS92dWVqcy92dWUtbmV4dC9wdWxsLzE2MDBcbiAgICAgICAgb3B0aW9ucy5jb21waWxlck9wdGlvbnMud2hpdGVzcGFjZSA9IFwicHJlc2VydmVcIlxuICAgICAgICByZXR1cm4gb3B0aW9uc1xuICAgICAgfSlcbiAgfVxufVxuIn0=

Steps to reproduce

in the codesandbox https://codesandbox.io/s/interesting-cookies-dy7wn?file=/src/App.vue, open the app file and see that the new line is preserved in pre
but not preserved through a slot which renders inside a pre.

the slot does not keep the whitespaces entered by the user.

What is expected?

The whitespaces would be preserved.

What is actually happening?

The whitespaces are not preserved.

This is observable at

If there is anything I am missing, it would be very helpful to have a documentation about it for other users facing the same issue.

antoniandre

May 29th 2021

In Vite it works in version vue@3.1.0-beta.6, with explicit load of "@vue/compiler-sfc": "3.1.0-beta.6" with this config:

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'preserve'
        }
      }
    })
  ]

🙏 :rocket:

But it doesn't in vue-cli with this config:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        // https://github.com/vuejs/vue-next/pull/1600
        options.compilerOptions.whitespace = 'preserve'
        return options
      })
  }
}

HcySunYang

May 31st 2021

If it works correctly in vite, then it should not be a problem with Vue, please make sure you install the correct dependencies when using with vue-cli.

aztack

Jul 26th 2021

In Vite it works in version vue@3.1.0-beta.6, with explicit load of "@vue/compiler-sfc": "3.1.0-beta.6" with this config:

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'preserve'
        }
      }
    })
  ]

🙏 🚀

But it doesn't in vue-cli with this config:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        // https://github.com/vuejs/vue-next/pull/1600
        options.compilerOptions.whitespace = 'preserve'
        return options
      })
  }
}

I changed vue.config.js exactly like yours. But options.compilerOptions' is undefined. I add compilerOptionsto theoptions` manually. But I got this error:

 ERROR  Failed to compile with 1 error 

 error  in ./src/App.vue

Syntax Error: TypeError: Cannot read property 'parseComponent' of undefined


 @ ./src/main.ts 7:0-28 10:13-16
 @ multi (webpack)-dev-server/client?http://10.76.44.154:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

The project is created with vue create command. Following is package.json of the project:

{
  "name": "vue3-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "typescript": "~4.1.5"
  }
}

@vue/cli 4.5.13