Vue: With `whitespace: 'condense'`, elements contain only   and spaces are condensed into empty tags

Created on 6 Sep 2019 · 6Comments · Source: vuejs/vue

Version

4.0.0-rc.1

Reproduction link

https://github.com/tobyzerner/vue-cli-nbsp-bug

Environment info

Environment Info:
  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.17.3 - ~/.npm-global/bin/yarn
    npm: 6.11.3 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  4.0.0-rc.1
    @vue/babel-preset-jsx:  1.1.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  4.0.0-rc.1
    @vue/cli-plugin-babel: ^4.0.0-rc.1 => 4.0.0-rc.1
    @vue/cli-plugin-eslint: ^4.0.0-rc.1 => 4.0.0-rc.1
    @vue/cli-service: ^4.0.0-rc.1 => 4.0.0-rc.1
    @vue/cli-shared-utils:  4.0.0-rc.1
    @vue/component-compiler-utils:  3.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 4.0.0-rc.1

Steps to reproduce

Clone the repo, npm install && npm run serve

What is expected?

The template contains a span containing a   character. This span has a red background. Thus you should see a small red box on the page.

What is actually happening?

The   in the template is being ignored and converted into a normal space, which means the span element is not displayed.

I cannot replicate this bug in a plain Vue jsfiddle, nor a project using vue-loader without vue-cli. Thus I think something in vue-cli may be the culprit rather than vue-template-compiler or Vue itself.

bug compiler has PR

Source

tobyzerner

👍5

Most helpful comment

I've transferred this issue to the vue repository because I believe it's a bug introduced in https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

See another bug report at https://github.com/vuejs/vue/issues/9208#issuecomment-477811927

Current workaround:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

sodatea on 6 Sep 2019

👍11 🎉1

All 6 comments

I've transferred this issue to the vue repository because I believe it's a bug introduced in https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

See another bug report at https://github.com/vuejs/vue/issues/9208#issuecomment-477811927

Current workaround:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

sodatea on 6 Sep 2019

👍11 🎉1

Would it be possible to ignore hairspaces (&hairsp;) as well..?

_edit: sorry, didn't see the issue link_

naton on 31 Mar 2020

@naton as mentioned, this should be discussed in the vue repo. Sodatea linked the issue

LinusBorg on 31 Mar 2020

@LinusBorg isn't this the Vue repo? The linked issue is the original change to add 'condense' is it not? It is also closed.

We just ran into this today and are trying to figure out how to work around it. We've built in some localization automation that assumes the 'condense' setting (based on Evan's suggestion that this would be default in 3.x and because I agree with the condense behaviour). So it makes it difficult to just swap back to preserve without potential side effects.

chrisnicola on 9 Apr 2020

Ok it seems that simply not including the nbsp; inside an element by itself solves the issue. Adding this as a note for anyone else who runs into this.

chrisnicola on 9 Apr 2020

I've transferred this issue to the vue repository because I believe it's a bug introduced in e1abedb

See another bug report at #9208 (comment)

Current workaround:
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

This doesn't seem to work anymore with Vue 3, it throws the error: "TypeError: Cannot set property 'whitespace' of undefined". Any workaround for Vue 3?