8000 With `whitespace: 'condense'`, elements contain only   and spaces are condensed into empty tags · Issue #10485 · vuejs/vue · GitHub
[go: up one dir, main page]
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
tobyzerner opened this issue Sep 6, 2019 · 6 comments · Fixed by #11065
Closed

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

tobyzerner opened this issue Sep 6, 2019 · 6 comments · Fixed by #11065
Labels
bug feat:compiler has PR

Comments

@tobyzerner
Copy link

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.
@haoqunjiang haoqunjiang changed the title   in SFC template is ignored elements contains only   and spaces are condensed into empty tags Sep 6, 2019
@haoqunjiang haoqunjiang transferred this issue from vuejs/vue-cli Sep 6, 2019
@haoqunjiang haoqunjiang changed the title elements contains only   and spaces are condensed into empty tags With whitespace: 'condense', elements contains only   and spaces are condensed into empty tags Sep 6, 2019
@haoqunjiang
Copy link
Member

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

@haoqunjiang haoqunjiang changed the title With whitespace: 'condense', elements contains only   and spaces are condensed into empty tags With whitespace: 'condense', elements contain only   and spaces are condensed into empty tags Sep 6, 2019
@christian-nils christian-nils mentioned this issue Oct 22, 2019
Closed
@andreasvirkus andreasvirkus mentioned this issue Nov 12, 2019
Closed
@aimozg aimozg mentioned this issue Jan 29, 2020
Closed
@jameswragg jameswragg mentioned this issue Jan 29, 2020
Open
@despreston despreston mentioned this issue Feb 2, 2020
Merged
12 tasks
@naton
Copy link
naton commented Mar 31, 2020 •
edited
Loading

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

edit: sorry, didn't see the issue link

@LinusBorg
Copy link
Member
LinusBorg commented Mar 31, 2020 •
edited
Loading

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

@chrisnicola
Copy link
Contributor

@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
Copy link
Contributor

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.

@posva posva added the has PR label Jul 23, 2020
@posva posva mentioned this issue Aug 3, 2020
Open
@antoniandre
Copy link

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?

@JHeLiu JHeLiu mentioned this issue Nov 3, 2020
Open
@antoniandre antoniandre mentioned this issue May 25, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug feat:compiler has PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(compiler): avoid converting &nbps; to spaces despreston/vue
7 participants
@tobyzerner @chrisnicola @naton @posva @LinusBorg @haoqunjiang @antoniandre
0