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

[tobyzerner]

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.

[sodatea]

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'
          })
  }
}

[naton]

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

edit: sorry, didn't see the issue link

[LinusBorg]

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

[chrisnicola]

@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]

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.

[antoniandre]

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?