Scoped Styles at Runtime

[shshaw]

Version

3.0.0-alpha.9

Reproduction link

https://codepen.io/shshaw/pen/7779e80cdcb31366bcaa5d403c7ed360?pg=vue

Steps to reproduce

1. Create a new Vue pen (beta feature) at https://codepen.io/pen/?pg=vue
2. Within the Settings > JS panel, change the Vue version to 3
3. Add <style scoped>
4. You'll receive a Uncaught TypeError: _withId is not a function

What is expected?

Styles will be scoped and component will render

What is actually happening?

Vue fails with a Uncaught TypeError: _withId is not a function error.

---

We aren't bundling Vue and the user's code together. We currently are serving a CDN version of Vue (currently https://unpkg.com/[email protected]/dist/vue.global.js; I tried the other versions but they have the same issue or aren't browser-ready ), then the Webpack compiled user component separately.

It's not clear if we need to do something on the Webpack side to ensure the styles are scoped there, or if this is something solely on the runtime side.

[shshaw]

Talked with @znck a little about this, here was the feedback:

The issue is caused by line 13. You're using a non bundler build mostly.

As the contents of withScopeId function are only included in bundler builds.

export function withScopeId(id: string): <T extends Function>(fn: T) => T {
  if (__BUNDLER__) {
    return ((fn: Function) =>
      withCtx(function(this: any) {
        pushScopeId(id)
        const res = fn.apply(this, arguments)
        popScopeId()
        return res
      })) as any
  } else {
    return undefined as any
  }
}

Snippet from packages/runtime-core/src/helpers/scopeId.ts
Ensure you're using a bundler build. Hopefully switching to a bundler build solves your issue.

However, in our current setup the Vue library isn't bundled together with the user's Component, so there isn't really a way to "bundle" together, and the CDN bundle versions don't work in browser.

I think the withScopeId code is dropped with assumption that there would be no scoped css at runtime. You have to create an issue to alter the behaviour.

[shshaw]

Confirming that the latest release (3.0.0-alpha.10) solved this. Thank you for the quick response!