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

CommonJS build do not include compiler #817

Closed
yabab-dev opened this issue Mar 11, 2020 · 0 comments
Closed

CommonJS build do not include compiler #817

yabab-dev opened this issue Mar 11, 2020 · 0 comments

Comments

@yabab-dev
Copy link

yabab-dev commented Mar 11, 2020

Version

3.0.0-alpha.8 / master branch

Reproduction link

https://github.com/chymz/vue-next-cjs-full-issue

Steps to reproduce

Just use vue@next package in a NodeJS environment, setup a component with only a template string.

What is expected?

Compiling template works

What is actually happening?

An HTML comment is rendered instead of the expected markup and a warning message is displayed:

[Vue warn]: Component provides template but the build of Vue you are running does not support runtime template compilation. Either use the full build or pre-compile the template using Vue CLI.

I've dig the code a bit, If I understand correclty, vue package is now a full-build (runtime-dom + compiler-dom).
I think the main issue here come from the __RUNTIME_COMPILE__ build variable.

Full-build works with ESM & Global builds, all the needed packages are built with __RUNTIME_COMPILE__ to true and bundled together in one file by rollup.
But this behavior fail for CommonJS build, because vue/dist/vue.cjs.js require @vue/runtime-core with a __RUNTIME_COMPILE__ set to false.

Maybe this leads to another issue: we cannot register a compiler on runtime.
If we take this part of the code: https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/component.ts#L420-L447

let compile: CompileFunction | undefined

// exported method uses any to avoid d.ts relying on the compiler types.
export function registerRuntimeCompiler(_compile: any) {
  compile = _compile
}

function finishComponentSetup(
  instance: ComponentInternalInstance,
  parentSuspense: SuspenseBoundary | null,
  isSSR: boolean
) {
  // More code here...

  if (__RUNTIME_COMPILE__ && Component.template && !Component.render) {
    // __RUNTIME_COMPILE__ ensures `compile` is provided
    Component.render = compile!(Component.template, {
      isCustomElement: instance.appContext.config.isCustomElement || NO
    })
    // mark the function as runtime compiled
    ;(Component.render as RenderFunction).isRuntimeCompiled = true
  }

  // More code here...
}

With __RUNTIME_COMPILE__ to false and after rollup tree-shaking, the output code will be:

function registerRuntimeCompiler(_compile) {
}
function finishComponentSetup(instance, parentSuspense, isSSR) {
  // More code here...
}

As you can see, compile variable which hold the compiler function is totally deleted of the source code.

What I've tried:

  • Using directly @vue/{runtime,compiler}-dom but problem was the same, theses builds use __RUNTIME_COMPILE__ to false
  • Trying to remove __RUNTIME_COMPILE__ from packages, everytinh works, but 3 tests fails now. Sample commit here

Maybe it's an intended behavior or a bad usage, I'm sorry to wasting your time 😄

@github-actions github-actions bot locked and limited conversation to collaborators Nov 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant