Skip to content
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.

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

[Question] nullish coalescing (??) only work for Node.js version >= 14 #29

Open
LYSSION opened this issue Dec 31, 2021 · 2 comments
Open
Labels
question Further information is requested

Comments

@LYSSION
Copy link

LYSSION commented Dec 31, 2021

  • [yes ] Would you like to work on a fix?

Current behavior

// your code goes here
<div>输出:{{info.aaa ?? 'empty'}}</div>

https://github.com/LYSSION/vue-demo

环境:nodejs12.22.1

复现步骤
1.拉取仓库代码
2.npm run serve
3.向app.vue中添加

输出:{{info.aaa ?? 'empty'}}

4.输出错误

 ERROR  Failed to compile with 1 error                                                                        3:47:11 PM

 error  in ./src/App.vue?vue&type=template&id=7ba5bd90&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)

  Errors compiling template:

  invalid expression: Unexpected token '?' in

    "输出:"+_s(info.aaa ?? 'empty')

  Raw expression: 输出:{{info.aaa ?? 'empty'}}


  2  |  <div id="app">
  3  |    <img alt="Vue logo" src="./assets/logo.png">
  4  |    <div>输出:{{info.aaa ?? 'empty'}}</div>
     |         ^^^^^^^^^^^^^^^^^^^^^^^^^^
  5  |    <!-- <div>输出:{{info.title ?? 'empty'}}</div> -->
  6  |    <!-- <div>输出:{{info?.title?.text}}</div> -->


 @ ./src/App.vue?vue&type=template&id=7ba5bd90& 1:0-396 1:0-396
 @ ./src/App.vue
 @ ./src/main.js
@JuniorTour
Copy link
Owner

感谢你的反馈,似乎确实是个 bug,

如果你有兴趣排查,定位问题,并发个MR 修复的话,可以参考这个文档:https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/CONTRIBUTING.md

有任何疑问可以随时联系我😁

@JuniorTour JuniorTour added Priority: P3 bug Something isn't working contribution welcome Good for newcomers and removed need triage labels Jan 1, 2022
@JuniorTour
Copy link
Owner

JuniorTour commented Jan 5, 2022

The root cause is vue-template-compiler use new Function(("return " + exp))to detect if js expression is valid.

https://github.com/vuejs/vue/blob/6aa11872c88481dfa2da151536317176c48f226c/packages/vue-template-compiler/build.js#L4548-4551

eg: "_s(null ?? 'Nullish Coalescing enabled') will be convert to new Function and throw an error in Node.js V12

SyntaxError: Unexpected token '?'
    at new Function (<anonymous>)
    at checkExpression (build.js:4550)
    at checkNode (build.js:4508)
    at checkNode (build.js:4504)
    at checkNode (build.js:4504)
    at detectErrors (build.js:4479)
    at Object.compile (build.js:4808)
    at compileTemplate (index.js:160)
    at actuallyCompile (compileTemplate.js:72)
    at compileTemplate (compileTemplate.js:33)
    at Object.module.exports (templateLoader.js:46)
    at LOADER_EXECUTION (LoaderRunner.js:119)
    at runSyncOrAsync (LoaderRunner.js:120)
    at iterateNormalLoaders (LoaderRunner.js:232)
    at iterateNormalLoaders (LoaderRunner.js:221)
    at LoaderRunner.js:236

But actually this code snippet of code will work after this compiler.

So maybe we can disable this expression check?


Temp workaround is:

  1. update Node to v14+;
  2. Don't use Nullish coalescing;

@JuniorTour JuniorTour added question Further information is requested and removed bug Something isn't working contribution welcome Good for newcomers Priority: P3 labels Jan 5, 2022
@JuniorTour JuniorTour changed the title [Bug] 在低版本nodejs中无法编译成功 [Question] nullish coalescing (??) only work for Node.js version >= 14 Jan 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants