From dca4224c2cde6e67bcc3598e4a9d1728b2e7e305 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Thu, 26 Jan 2023 16:50:19 +0800
Subject: [PATCH] wip(vitest-migration): compiler-ssr tests passing

---
 .../__tests__/ssrComponent.spec.ts            | 174 ++++++++---------
 .../compiler-ssr/__tests__/ssrElement.spec.ts | 176 +++++++++---------
 .../__tests__/ssrFallthroughAttrs.spec.ts     |  14 +-
 .../__tests__/ssrInjectCssVars.spec.ts        |  22 +--
 .../compiler-ssr/__tests__/ssrPortal.spec.ts  |  30 +--
 .../compiler-ssr/__tests__/ssrScopeId.spec.ts |  32 ++--
 .../__tests__/ssrSlotOutlet.spec.ts           |  62 +++---
 .../__tests__/ssrSuspense.spec.ts             |  12 +-
 .../compiler-ssr/__tests__/ssrText.spec.ts    |   8 +-
 .../__tests__/ssrTransitionGroup.spec.ts      |  16 +-
 .../compiler-ssr/__tests__/ssrVFor.spec.ts    |  46 ++---
 .../compiler-ssr/__tests__/ssrVIf.spec.ts     | 104 +++++------
 .../compiler-ssr/__tests__/ssrVModel.spec.ts  | 166 ++++++++---------
 .../compiler-ssr/__tests__/ssrVShow.spec.ts   |  74 ++++----
 14 files changed, 468 insertions(+), 468 deletions(-)

diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index d359e844b..83c5bcfc3 100644
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
@@ -3,14 +3,14 @@ import { compile } from '../src'
 describe('ssr: components', () => {
   test('basic', () => {
     expect(compile(`<foo id="a" :prop="b" />`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent("foo")
+        const _component_foo = _resolveComponent(\\"foo\\")
 
         _push(_ssrRenderComponent(_component_foo, _mergeProps({
-          id: "a",
+          id: \\"a\\",
           prop: _ctx.b
         }, _attrs), null, _parent))
       }"
@@ -20,11 +20,11 @@ describe('ssr: components', () => {
   // event listeners should still be passed
   test('event listeners', () => {
     expect(compile(`<foo @click="bar" />`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent("foo")
+        const _component_foo = _resolveComponent(\\"foo\\")
 
         _push(_ssrRenderComponent(_component_foo, _mergeProps({ onClick: _ctx.bar }, _attrs), null, _parent))
       }"
@@ -34,33 +34,33 @@ describe('ssr: components', () => {
   test('dynamic component', () => {
     expect(compile(`<component is="foo" prop="b" />`).code)
       .toMatchInlineSnapshot(`
-      "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue")
-      const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
+        "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
+        const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent("foo"), _mergeProps({ prop: "b" }, _attrs), null), _parent)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(\\"foo\\"), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
+        }"
+      `)
 
     expect(compile(`<component :is="foo" prop="b" />`).code)
       .toMatchInlineSnapshot(`
-      "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require("vue")
-      const { ssrRenderVNode: _ssrRenderVNode } = require("vue/server-renderer")
+        "const { resolveDynamicComponent: _resolveDynamicComponent, mergeProps: _mergeProps, createVNode: _createVNode } = require(\\"vue\\")
+        const { ssrRenderVNode: _ssrRenderVNode } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: "b" }, _attrs), null), _parent)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _ssrRenderVNode(_push, _createVNode(_resolveDynamicComponent(_ctx.foo), _mergeProps({ prop: \\"b\\" }, _attrs), null), _parent)
+        }"
+      `)
   })
 
   describe('slots', () => {
     test('implicit default slot', () => {
       expect(compile(`<foo>hello<div/></foo>`).code).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require("vue")
-        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode } = require(\\"vue\\")
+        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent("foo")
+          const _component_foo = _resolveComponent(\\"foo\\")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -68,8 +68,8 @@ describe('ssr: components', () => {
                 _push(\`hello<div\${_scopeId}></div>\`)
               } else {
                 return [
-                  _createTextVNode("hello"),
-                  _createVNode("div")
+                  _createTextVNode(\\"hello\\"),
+                  _createVNode(\\"div\\")
                 ]
               }
             }),
@@ -82,26 +82,26 @@ describe('ssr: components', () => {
     test('explicit default slot', () => {
       expect(compile(`<foo v-slot="{ msg }">{{ msg + outer }}</foo>`).code)
         .toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require("vue")
-        const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode } = require(\\"vue\\")
+          const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
 
-        return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent("foo")
+          return function ssrRender(_ctx, _push, _parent, _attrs) {
+            const _component_foo = _resolveComponent(\\"foo\\")
 
-          _push(_ssrRenderComponent(_component_foo, _attrs, {
-            default: _withCtx(({ msg }, _push, _parent, _scopeId) => {
-              if (_push) {
-                _push(\`\${_ssrInterpolate(msg + _ctx.outer)}\`)
-              } else {
-                return [
-                  _createTextVNode(_toDisplayString(msg + _ctx.outer), 1 /* TEXT */)
-                ]
-              }
-            }),
-            _: 1 /* STABLE */
-          }, _parent))
-        }"
-      `)
+            _push(_ssrRenderComponent(_component_foo, _attrs, {
+              default: _withCtx(({ msg }, _push, _parent, _scopeId) => {
+                if (_push) {
+                  _push(\`\${_ssrInterpolate(msg + _ctx.outer)}\`)
+                } else {
+                  return [
+                    _createTextVNode(_toDisplayString(msg + _ctx.outer), 1 /* TEXT */)
+                  ]
+                }
+              }),
+              _: 1 /* STABLE */
+            }, _parent))
+          }"
+        `)
     })
 
     test('empty attribute should not produce syntax error', () => {
@@ -116,11 +116,11 @@ describe('ssr: components', () => {
         <template v-slot:named>bar</template>
       </foo>`).code
       ).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require("vue")
-        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require(\\"vue\\")
+        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent("foo")
+          const _component_foo = _resolveComponent(\\"foo\\")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -128,7 +128,7 @@ describe('ssr: components', () => {
                 _push(\`foo\`)
               } else {
                 return [
-                  _createTextVNode("foo")
+                  _createTextVNode(\\"foo\\")
                 ]
               }
             }),
@@ -137,7 +137,7 @@ describe('ssr: components', () => {
                 _push(\`bar\`)
               } else {
                 return [
-                  _createTextVNode("bar")
+                  _createTextVNode(\\"bar\\")
                 ]
               }
             }),
@@ -153,26 +153,26 @@ describe('ssr: components', () => {
         <template v-slot:named v-if="ok">foo</template>
       </foo>`).code
       ).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require("vue")
-        const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode, createSlots: _createSlots } = require(\\"vue\\")
+        const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent("foo")
+          const _component_foo = _resolveComponent(\\"foo\\")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
             (_ctx.ok)
               ? {
-                  name: "named",
+                  name: \\"named\\",
                   fn: _withCtx((_, _push, _parent, _scopeId) => {
                     if (_push) {
                       _push(\`foo\`)
                     } else {
                       return [
-                        _createTextVNode("foo")
+                        _createTextVNode(\\"foo\\")
                       ]
                     }
                   }),
-                  key: "0"
+                  key: \\"0\\"
                 }
               : undefined
           ]), _parent))
@@ -186,11 +186,11 @@ describe('ssr: components', () => {
         <template v-for="key in names" v-slot:[key]="{ msg }">{{ msg + key + bar }}</template>
       </foo>`).code
       ).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require("vue")
-        const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, renderList: _renderList, createSlots: _createSlots } = require(\\"vue\\")
+        const { ssrRenderComponent: _ssrRenderComponent, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent("foo")
+          const _component_foo = _resolveComponent(\\"foo\\")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, _createSlots({ _: 2 /* DYNAMIC */ }, [
             _renderList(_ctx.names, (key) => {
@@ -227,11 +227,11 @@ describe('ssr: components', () => {
         </template>
       </foo>`).code
       ).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require("vue")
-        const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+        "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = require(\\"vue\\")
+        const { ssrRenderComponent: _ssrRenderComponent, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent("foo")
+          const _component_foo = _resolveComponent(\\"foo\\")
 
           _push(_ssrRenderComponent(_component_foo, _attrs, {
             foo: _withCtx(({ list }, _push, _parent, _scopeId) => {
@@ -248,12 +248,12 @@ describe('ssr: components', () => {
               } else {
                 return [
                   (_ctx.ok)
-                    ? (_openBlock(), _createBlock("div", { key: 0 }, [
+                    ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
                         (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
-                          return (_openBlock(), _createBlock("span"))
+                          return (_openBlock(), _createBlock(\\"span\\"))
                         }), 256 /* UNKEYED_FRAGMENT */))
                       ]))
-                    : _createCommentVNode("v-if", true)
+                    : _createCommentVNode(\\"v-if\\", true)
                 ]
               }
             }),
@@ -271,12 +271,12 @@ describe('ssr: components', () => {
               } else {
                 return [
                   ok
-                    ? (_openBlock(), _createBlock("div", { key: 0 }, [
+                    ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, [
                         (_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (i) => {
-                          return (_openBlock(), _createBlock("span"))
+                          return (_openBlock(), _createBlock(\\"span\\"))
                         }), 256 /* UNKEYED_FRAGMENT */))
                       ]))
-                    : _createCommentVNode("v-if", true)
+                    : _createCommentVNode(\\"v-if\\", true)
                 ]
               }
             }),
@@ -290,26 +290,26 @@ describe('ssr: components', () => {
       test('transition', () => {
         expect(compile(`<transition><div/></transition>`).code)
           .toMatchInlineSnapshot(`
-          "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+            "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-          return function ssrRender(_ctx, _push, _parent, _attrs) {
-            _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
-          }"
-        `)
+            return function ssrRender(_ctx, _push, _parent, _attrs) {
+              _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
+            }"
+          `)
       })
 
       test('keep-alive', () => {
         expect(compile(`<keep-alive><foo/></keep-alive>`).code)
           .toMatchInlineSnapshot(`
-          "const { resolveComponent: _resolveComponent } = require("vue")
-          const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+            "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
+            const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
 
-          return function ssrRender(_ctx, _push, _parent, _attrs) {
-            const _component_foo = _resolveComponent("foo")
+            return function ssrRender(_ctx, _push, _parent, _attrs) {
+              const _component_foo = _resolveComponent(\\"foo\\")
 
-            _push(_ssrRenderComponent(_component_foo, _attrs, null, _parent))
-          }"
-        `)
+              _push(_ssrRenderComponent(_component_foo, _attrs, null, _parent))
+            }"
+          `)
       })
 
       // #5352
@@ -318,11 +318,11 @@ describe('ssr: components', () => {
           compile(`<foo><transition><div v-if="false"/></transition></foo>`)
             .code
         ).toMatchInlineSnapshot(`
-          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require("vue")
-          const { ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+          "const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, createVNode: _createVNode } = require(\\"vue\\")
+          const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
 
           return function ssrRender(_ctx, _push, _parent, _attrs) {
-            const _component_foo = _resolveComponent("foo")
+            const _component_foo = _resolveComponent(\\"foo\\")
 
             _push(_ssrRenderComponent(_component_foo, _attrs, {
               default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -338,8 +338,8 @@ describe('ssr: components', () => {
                     _createVNode(_Transition, null, {
                       default: _withCtx(() => [
                         false
-                          ? (_openBlock(), _createBlock("div", { key: 0 }))
-                          : _createCommentVNode("v-if", true)
+                          ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
+                          : _createCommentVNode(\\"v-if\\", true)
                       ]),
                       _: 1 /* STABLE */
                     })
@@ -357,14 +357,14 @@ describe('ssr: components', () => {
   describe('custom directive', () => {
     test('basic', () => {
       expect(compile(`<foo v-xxx:x.y="z" />`).code).toMatchInlineSnapshot(`
-        "const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require("vue")
-        const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+        "const { resolveComponent: _resolveComponent, resolveDirective: _resolveDirective, mergeProps: _mergeProps } = require(\\"vue\\")
+        const { ssrGetDirectiveProps: _ssrGetDirectiveProps, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          const _component_foo = _resolveComponent("foo")
-          const _directive_xxx = _resolveDirective("xxx")
+          const _component_foo = _resolveComponent(\\"foo\\")
+          const _directive_xxx = _resolveDirective(\\"xxx\\")
 
-          _push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true })), null, _parent))
+          _push(_ssrRenderComponent(_component_foo, _mergeProps(_attrs, _ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true })), null, _parent))
         }"
       `)
     })
diff --git a/packages/compiler-ssr/__tests__/ssrElement.spec.ts b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
index d2046b210..65608bdd3 100644
--- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
@@ -56,26 +56,26 @@ describe('ssr: element', () => {
     test('<textarea> with dynamic v-bind', () => {
       expect(compile(`<textarea v-bind="obj">fallback</textarea>`).code)
         .toMatchInlineSnapshot(`
-        "const { mergeProps: _mergeProps } = require("vue")
-        const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+          "const { mergeProps: _mergeProps } = require(\\"vue\\")
+          const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
 
-        return function ssrRender(_ctx, _push, _parent, _attrs) {
-          let _temp0
+          return function ssrRender(_ctx, _push, _parent, _attrs) {
+            let _temp0
 
-          _push(\`<textarea\${
-            _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), "textarea")
-          }>\${
-            _ssrInterpolate(("value" in _temp0) ? _temp0.value : "fallback")
-          }</textarea>\`)
-        }"
-      `)
+            _push(\`<textarea\${
+              _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.obj, _attrs), \\"textarea\\")
+            }>\${
+              _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"fallback\\")
+            }</textarea>\`)
+          }"
+        `)
     })
 
     test('multiple _ssrInterpolate at parent and child import dependency once', () => {
       expect(
         compile(`<div>{{ hello }}<textarea v-bind="a"></textarea></div>`).code
       ).toMatchInlineSnapshot(`
-        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
           let _temp0
@@ -85,9 +85,9 @@ describe('ssr: element', () => {
           }>\${
             _ssrInterpolate(_ctx.hello)
           }<textarea\${
-            _ssrRenderAttrs(_temp0 = _ctx.a, "textarea")
+            _ssrRenderAttrs(_temp0 = _ctx.a, \\"textarea\\")
           }>\${
-            _ssrInterpolate(("value" in _temp0) ? _temp0.value : "")
+            _ssrInterpolate((\\"value\\" in _temp0) ? _temp0.value : \\"\\")
           }</textarea></div>\`)
         }"
       `)
@@ -99,11 +99,11 @@ describe('ssr: element', () => {
           isCustomElement: () => true
         }).code
       ).toMatchInlineSnapshot(`
-        "const { mergeProps: _mergeProps } = require("vue")
-        const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { mergeProps: _mergeProps } = require(\\"vue\\")
+        const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
         return function ssrRender(_ctx, _push, _parent, _attrs) {
-          _push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), "my-foo")}></my-foo>\`)
+          _push(\`<my-foo\${_ssrRenderAttrs(_mergeProps(_ctx.obj, _attrs), \\"my-foo\\")}></my-foo>\`)
         }"
       `)
     })
@@ -113,7 +113,7 @@ describe('ssr: element', () => {
     test('static attrs', () => {
       expect(
         getCompiledString(`<div id="foo" class="bar"></div>`)
-      ).toMatchInlineSnapshot(`"\`<div id="foo" class="bar"></div>\`"`)
+      ).toMatchInlineSnapshot('"`<div id=\\"foo\\" class=\\"bar\\"></div>`"')
     })
 
     test('ignore static key/ref', () => {
@@ -131,93 +131,93 @@ describe('ssr: element', () => {
     test('v-bind:class', () => {
       expect(getCompiledString(`<div id="foo" :class="bar"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div id="foo" class="\${
-            _ssrRenderClass(_ctx.bar)
-          }"></div>\`"
-      `)
+          "\`<div id=\\"foo\\" class=\\"\${
+              _ssrRenderClass(_ctx.bar)
+            }\\"></div>\`"
+        `)
     })
 
     test('static class + v-bind:class', () => {
       expect(getCompiledString(`<div class="foo" :class="bar"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div class="\${
-            _ssrRenderClass([_ctx.bar, "foo"])
-          }"></div>\`"
-      `)
+          "\`<div class=\\"\${
+              _ssrRenderClass([_ctx.bar, \\"foo\\"])
+            }\\"></div>\`"
+        `)
     })
 
     test('v-bind:class + static class', () => {
       expect(getCompiledString(`<div :class="bar" class="foo"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div class="\${
-            _ssrRenderClass([_ctx.bar, "foo"])
-          }"></div>\`"
-      `)
+          "\`<div class=\\"\${
+              _ssrRenderClass([_ctx.bar, \\"foo\\"])
+            }\\"></div>\`"
+        `)
     })
 
     test('v-bind:style', () => {
       expect(getCompiledString(`<div id="foo" :style="bar"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div id="foo" style="\${
-            _ssrRenderStyle(_ctx.bar)
-          }"></div>\`"
-      `)
+          "\`<div id=\\"foo\\" style=\\"\${
+              _ssrRenderStyle(_ctx.bar)
+            }\\"></div>\`"
+        `)
     })
 
     test('static style + v-bind:style', () => {
       expect(getCompiledString(`<div style="color:red;" :style="bar"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div style="\${
-            _ssrRenderStyle([{"color":"red"}, _ctx.bar])
-          }"></div>\`"
-      `)
+          "\`<div style=\\"\${
+              _ssrRenderStyle([{\\"color\\":\\"red\\"}, _ctx.bar])
+            }\\"></div>\`"
+        `)
     })
 
     test('v-bind:arg (boolean)', () => {
       expect(getCompiledString(`<input type="checkbox" :checked="checked">`))
         .toMatchInlineSnapshot(`
-        "\`<input type="checkbox"\${
-            (_ssrIncludeBooleanAttr(_ctx.checked)) ? " checked" : ""
-          }>\`"
-      `)
+          "\`<input type=\\"checkbox\\"\${
+              (_ssrIncludeBooleanAttr(_ctx.checked)) ? \\" checked\\" : \\"\\"
+            }>\`"
+        `)
     })
 
     test('v-bind:arg (non-boolean)', () => {
       expect(getCompiledString(`<div :id="id" class="bar"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div\${
-            _ssrRenderAttr("id", _ctx.id)
-          } class="bar"></div>\`"
-      `)
+          "\`<div\${
+              _ssrRenderAttr(\\"id\\", _ctx.id)
+            } class=\\"bar\\"></div>\`"
+        `)
     })
 
     test('v-bind:[arg]', () => {
       expect(getCompiledString(`<div v-bind:[key]="value"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div\${
-            _ssrRenderAttrs({ [_ctx.key || ""]: _ctx.value })
-          }></div>\`"
-      `)
+          "\`<div\${
+              _ssrRenderAttrs({ [_ctx.key || \\"\\"]: _ctx.value })
+            }></div>\`"
+        `)
 
       expect(getCompiledString(`<div class="foo" v-bind:[key]="value"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div\${
-            _ssrRenderAttrs({
-              class: "foo",
-              [_ctx.key || ""]: _ctx.value
-            })
-          }></div>\`"
-      `)
+          "\`<div\${
+              _ssrRenderAttrs({
+                class: \\"foo\\",
+                [_ctx.key || \\"\\"]: _ctx.value
+              })
+            }></div>\`"
+        `)
 
       expect(getCompiledString(`<div :id="id" v-bind:[key]="value"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div\${
-            _ssrRenderAttrs({
-              id: _ctx.id,
-              [_ctx.key || ""]: _ctx.value
-            })
-          }></div>\`"
-      `)
+          "\`<div\${
+              _ssrRenderAttrs({
+                id: _ctx.id,
+                [_ctx.key || \\"\\"]: _ctx.value
+              })
+            }></div>\`"
+        `)
     })
 
     test('v-bind="obj"', () => {
@@ -230,10 +230,10 @@ describe('ssr: element', () => {
 
       expect(getCompiledString(`<div class="foo" v-bind="obj"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div\${
-            _ssrRenderAttrs(_mergeProps({ class: "foo" }, _ctx.obj))
-          }></div>\`"
-      `)
+          "\`<div\${
+              _ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ctx.obj))
+            }></div>\`"
+        `)
 
       expect(getCompiledString(`<div :id="id" v-bind="obj"></div>`))
         .toMatchInlineSnapshot(`
@@ -245,20 +245,20 @@ describe('ssr: element', () => {
       // dynamic key + v-bind="object"
       expect(getCompiledString(`<div :[key]="id" v-bind="obj"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div\${
-            _ssrRenderAttrs(_mergeProps({ [_ctx.key || ""]: _ctx.id }, _ctx.obj))
-          }></div>\`"
-      `)
+          "\`<div\${
+              _ssrRenderAttrs(_mergeProps({ [_ctx.key || \\"\\"]: _ctx.id }, _ctx.obj))
+            }></div>\`"
+        `)
 
       // should merge class and :class
       expect(getCompiledString(`<div class="a" :class="b" v-bind="obj"></div>`))
         .toMatchInlineSnapshot(`
-        "\`<div\${
-            _ssrRenderAttrs(_mergeProps({
-              class: ["a", _ctx.b]
-            }, _ctx.obj))
-          }></div>\`"
-      `)
+          "\`<div\${
+              _ssrRenderAttrs(_mergeProps({
+                class: [\\"a\\", _ctx.b]
+              }, _ctx.obj))
+            }></div>\`"
+        `)
 
       // should merge style and :style
       expect(
@@ -268,7 +268,7 @@ describe('ssr: element', () => {
       ).toMatchInlineSnapshot(`
         "\`<div\${
             _ssrRenderAttrs(_mergeProps({
-              style: [{"color":"red"}, _ctx.b]
+              style: [{\\"color\\":\\"red\\"}, _ctx.b]
             }, _ctx.obj))
           }></div>\`"
       `)
@@ -277,10 +277,10 @@ describe('ssr: element', () => {
     test('should ignore v-on', () => {
       expect(
         getCompiledString(`<div id="foo" @click="bar"/>`)
-      ).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`)
+      ).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
       expect(
         getCompiledString(`<div id="foo" v-on="bar"/>`)
-      ).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`)
+      ).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
       expect(getCompiledString(`<div v-bind="foo" v-on="bar"/>`))
         .toMatchInlineSnapshot(`
         "\`<div\${
@@ -292,7 +292,7 @@ describe('ssr: element', () => {
     test('custom dir', () => {
       expect(getCompiledString(`<div v-xxx:x.y="z" />`)).toMatchInlineSnapshot(`
         "\`<div\${
-            _ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, "x", { y: true }))
+            _ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.z, \\"x\\", { y: true }))
           }></div>\`"
       `)
     })
@@ -300,10 +300,10 @@ describe('ssr: element', () => {
     test('custom dir with normal attrs', () => {
       expect(getCompiledString(`<div class="foo" v-xxx />`))
         .toMatchInlineSnapshot(`
-        "\`<div\${
-            _ssrRenderAttrs(_mergeProps({ class: "foo" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
-          }></div>\`"
-      `)
+          "\`<div\${
+              _ssrRenderAttrs(_mergeProps({ class: \\"foo\\" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
+            }></div>\`"
+        `)
     })
 
     test('custom dir with v-bind', () => {
@@ -333,8 +333,8 @@ describe('ssr: element', () => {
       ).toMatchInlineSnapshot(`
         "\`<div\${
             _ssrRenderAttrs(_mergeProps(_ctx.x, {
-              class: "foo",
-              title: "bar"
+              class: \\"foo\\",
+              title: \\"bar\\"
             }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
           }></div>\`"
       `)
diff --git a/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts b/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
index daac5b602..6032dd29e 100644
--- a/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts
@@ -3,7 +3,7 @@ import { compile } from '../src'
 describe('ssr: attrs fallthrough', () => {
   test('basic', () => {
     expect(compile(`<div/>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
@@ -13,7 +13,7 @@ describe('ssr: attrs fallthrough', () => {
 
   test('with comments', () => {
     expect(compile(`<!--!--><div/>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[--><!--!--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
@@ -40,12 +40,12 @@ describe('ssr: attrs fallthrough', () => {
   test('fallthrough component content (root with comments)', () => {
     expect(compile(`<!--root--><transition><div/></transition>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
+        }"
+      `)
   })
 
   test('should not inject to fallthrough component content if not root', () => {
diff --git a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
index 2ed04a16f..0e29fb7e4 100644
--- a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
@@ -8,8 +8,8 @@ describe('ssr: inject <style vars>', () => {
         ssrCssVars: `{ color }`
       }).code
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require("vue")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -24,7 +24,7 @@ describe('ssr: inject <style vars>', () => {
         ssrCssVars: `{ color }`
       }).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -43,11 +43,11 @@ describe('ssr: inject <style vars>', () => {
         ssrCssVars: `{ color }`
       }).code
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent } = require("vue")
-      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
+      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent("foo")
+        const _component_foo = _resolveComponent(\\"foo\\")
 
         const _cssVars = { style: { color: _ctx.color }}
         _push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`)
@@ -63,8 +63,8 @@ describe('ssr: inject <style vars>', () => {
         ssrCssVars: `{ color }`
       }).code
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require("vue")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -95,8 +95,8 @@ describe('ssr: inject <style vars>', () => {
         }
       ).code
     ).toMatchInlineSnapshot(`
-      "const { withCtx: _withCtx } = require("vue")
-      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
+      "const { withCtx: _withCtx } = require(\\"vue\\")
+      const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         const _cssVars = { style: { color: _ctx.color }}
@@ -122,7 +122,7 @@ describe('ssr: inject <style vars>', () => {
 
     expect(result.code).toMatchInlineSnapshot(`
       "(_ctx, _push, _parent, _attrs) => {
-        const _cssVars = { style: { "--hash": (_unref(dynamic)) }}
+        const _cssVars = { style: { \\"--hash\\": (_unref(dynamic)) }}
         _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
       }"
     `)
diff --git a/packages/compiler-ssr/__tests__/ssrPortal.spec.ts b/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
index 2bf6b3127..8f3dda5a6 100644
--- a/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrPortal.spec.ts
@@ -4,32 +4,32 @@ describe('ssr compile: teleport', () => {
   test('should work', () => {
     expect(compile(`<teleport :to="target"><div/></teleport>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
+        "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderTeleport(_push, (_push) => {
-          _push(\`<div></div>\`)
-        }, _ctx.target, false, _parent)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _ssrRenderTeleport(_push, (_push) => {
+            _push(\`<div></div>\`)
+          }, _ctx.target, false, _parent)
+        }"
+      `)
   })
 
   test('disabled prop handling', () => {
     expect(compile(`<teleport :to="target" disabled><div/></teleport>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
+        "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderTeleport(_push, (_push) => {
-          _push(\`<div></div>\`)
-        }, _ctx.target, true, _parent)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _ssrRenderTeleport(_push, (_push) => {
+            _push(\`<div></div>\`)
+          }, _ctx.target, true, _parent)
+        }"
+      `)
 
     expect(
       compile(`<teleport :to="target" :disabled="foo"><div/></teleport>`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderTeleport: _ssrRenderTeleport } = require("vue/server-renderer")
+      "const { ssrRenderTeleport: _ssrRenderTeleport } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _ssrRenderTeleport(_push, (_push) => {
diff --git a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
index 13465e992..3445a84fd 100644
--- a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
@@ -10,7 +10,7 @@ describe('ssr: scopeId', () => {
         mode: 'module'
       }).code
     ).toMatchInlineSnapshot(`
-      "import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
+      "import { ssrRenderAttrs as _ssrRenderAttrs } from \\"vue/server-renderer\\"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_attrs)} data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
@@ -26,11 +26,11 @@ describe('ssr: scopeId', () => {
         mode: 'module'
       }).code
     ).toMatchInlineSnapshot(`
-      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from "vue"
-      import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
+      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createTextVNode as _createTextVNode } from \\"vue\\"
+      import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent("foo")
+        const _component_foo = _resolveComponent(\\"foo\\")
 
         _push(_ssrRenderComponent(_component_foo, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -38,7 +38,7 @@ describe('ssr: scopeId', () => {
               _push(\`foo\`)
             } else {
               return [
-                _createTextVNode("foo")
+                _createTextVNode(\\"foo\\")
               ]
             }
           }),
@@ -55,11 +55,11 @@ describe('ssr: scopeId', () => {
         mode: 'module'
       }).code
     ).toMatchInlineSnapshot(`
-      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
-      import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
+      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
+      import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent("foo")
+        const _component_foo = _resolveComponent(\\"foo\\")
 
         _push(_ssrRenderComponent(_component_foo, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -67,7 +67,7 @@ describe('ssr: scopeId', () => {
               _push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
             } else {
               return [
-                _createVNode("span", null, "hello")
+                _createVNode(\\"span\\", null, \\"hello\\")
               ]
             }
           }),
@@ -84,12 +84,12 @@ describe('ssr: scopeId', () => {
         mode: 'module'
       }).code
     ).toMatchInlineSnapshot(`
-      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from "vue"
-      import { ssrRenderComponent as _ssrRenderComponent } from "vue/server-renderer"
+      "import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode } from \\"vue\\"
+      import { ssrRenderComponent as _ssrRenderComponent } from \\"vue/server-renderer\\"
 
       export function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent("foo")
-        const _component_bar = _resolveComponent("bar")
+        const _component_foo = _resolveComponent(\\"foo\\")
+        const _component_bar = _resolveComponent(\\"bar\\")
 
         _push(_ssrRenderComponent(_component_foo, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
@@ -101,7 +101,7 @@ describe('ssr: scopeId', () => {
                     _push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
                   } else {
                     return [
-                      _createVNode("span")
+                      _createVNode(\\"span\\")
                     ]
                   }
                 }),
@@ -109,10 +109,10 @@ describe('ssr: scopeId', () => {
               }, _parent, _scopeId))
             } else {
               return [
-                _createVNode("span", null, "hello"),
+                _createVNode(\\"span\\", null, \\"hello\\"),
                 _createVNode(_component_bar, null, {
                   default: _withCtx(() => [
-                    _createVNode("span")
+                    _createVNode(\\"span\\")
                   ]),
                   _: 1 /* STABLE */
                 })
diff --git a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
index a6373a0cb..f1a5945c1 100644
--- a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
@@ -4,27 +4,27 @@ import { ssrHelpers, SSR_RENDER_SLOT_INNER } from '../src/runtimeHelpers'
 describe('ssr: <slot>', () => {
   test('basic', () => {
     expect(compile(`<slot/>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
       }"
     `)
   })
 
   test('with name', () => {
     expect(compile(`<slot name="foo" />`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, "foo", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, \\"foo\\", {}, null, _push, _parent)
       }"
     `)
   })
 
   test('with dynamic name', () => {
     expect(compile(`<slot :name="bar.baz" />`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _ssrRenderSlot(_ctx.$slots, _ctx.bar.baz, {}, null, _push, _parent)
@@ -35,28 +35,28 @@ describe('ssr: <slot>', () => {
   test('with props', () => {
     expect(compile(`<slot name="foo" :p="1" bar="2" />`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
+        "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, "foo", {
-          p: 1,
-          bar: "2"
-        }, null, _push, _parent)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _ssrRenderSlot(_ctx.$slots, \\"foo\\", {
+            p: 1,
+            bar: \\"2\\"
+          }, null, _push, _parent)
+        }"
+      `)
   })
 
   test('with fallback', () => {
     expect(compile(`<slot>some {{ fallback }} content</slot>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+        "const { ssrRenderSlot: _ssrRenderSlot, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, "default", {}, () => {
-          _push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
-        }, _push, _parent)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, () => {
+            _push(\`some \${_ssrInterpolate(_ctx.fallback)} content\`)
+          }, _push, _parent)
+        }"
+      `)
   })
 
   test('with scopeId', async () => {
@@ -65,10 +65,10 @@ describe('ssr: <slot>', () => {
         scopeId: 'hello'
       }).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s")
+        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\")
       }"
     `)
   })
@@ -80,10 +80,10 @@ describe('ssr: <slot>', () => {
         slotted: false
       }).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderSlot: _ssrRenderSlot } = require("vue/server-renderer")
+      "const { ssrRenderSlot: _ssrRenderSlot } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent)
+        _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent)
       }"
     `)
   })
@@ -94,19 +94,19 @@ describe('ssr: <slot>', () => {
         scopeId: 'hello'
       }).code
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require("vue")
-      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx, renderSlot: _renderSlot } = require(\\"vue\\")
+      const { ssrRenderSlot: _ssrRenderSlot, ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_Comp = _resolveComponent("Comp")
+        const _component_Comp = _resolveComponent(\\"Comp\\")
 
         _push(_ssrRenderComponent(_component_Comp, _attrs, {
           default: _withCtx((_, _push, _parent, _scopeId) => {
             if (_push) {
-              _ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "hello-s" + _scopeId)
+              _ssrRenderSlot(_ctx.$slots, \\"default\\", {}, null, _push, _parent, \\"hello-s\\" + _scopeId)
             } else {
               return [
-                _renderSlot(_ctx.$slots, "default")
+                _renderSlot(_ctx.$slots, \\"default\\")
               ]
             }
           }),
@@ -120,10 +120,10 @@ describe('ssr: <slot>', () => {
     const { code } = compile(`<transition><slot/></transition>`)
     expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
     expect(code).toMatchInlineSnapshot(`
-      "const { ssrRenderSlotInner: _ssrRenderSlotInner } = require("vue/server-renderer")
+      "const { ssrRenderSlotInner: _ssrRenderSlotInner } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
+        _ssrRenderSlotInner(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null, true)
       }"
     `)
   })
diff --git a/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts b/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
index 2e425362b..a4d348019 100644
--- a/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
@@ -3,11 +3,11 @@ import { compile } from '../src'
 describe('ssr compile: suspense', () => {
   test('implicit default', () => {
     expect(compile(`<suspense><foo/></suspense>`).code).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent("foo")
+        const _component_foo = _resolveComponent(\\"foo\\")
 
         _ssrRenderSuspense(_push, {
           default: () => {
@@ -30,11 +30,11 @@ describe('ssr compile: suspense', () => {
       </template>
     </suspense>`).code
     ).toMatchInlineSnapshot(`
-      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require("vue")
-      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require("vue/server-renderer")
+      "const { resolveComponent: _resolveComponent, withCtx: _withCtx } = require(\\"vue\\")
+      const { ssrRenderComponent: _ssrRenderComponent, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        const _component_foo = _resolveComponent("foo")
+        const _component_foo = _resolveComponent(\\"foo\\")
 
         _ssrRenderSuspense(_push, {
           default: () => {
diff --git a/packages/compiler-ssr/__tests__/ssrText.spec.ts b/packages/compiler-ssr/__tests__/ssrText.spec.ts
index 54f9827a3..37cf2df37 100644
--- a/packages/compiler-ssr/__tests__/ssrText.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrText.spec.ts
@@ -8,7 +8,7 @@ describe('ssr: text', () => {
 
   test('static text with template string special chars', () => {
     expect(getCompiledString(`\`\${foo}\``)).toMatchInlineSnapshot(
-      `"\`\\\`\\\${foo}\\\`\`"`
+      '"`\\\\`\\\\${foo}\\\\``"'
     )
   })
 
@@ -17,7 +17,7 @@ describe('ssr: text', () => {
     // snapshot -> inline snapshot goes through two escapes
     // so that makes a total of 3 * 2 * 2 = 12 back slashes
     expect(getCompiledString(`\\$foo`)).toMatchInlineSnapshot(
-      `"\`\\\\\\$foo\`"`
+      '"`\\\\\\\\\\\\$foo`"'
     )
   })
 
@@ -43,7 +43,7 @@ describe('ssr: text', () => {
 
   test('interpolation', () => {
     expect(compile(`foo {{ bar }} baz`).code).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+      "const { ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`foo \${_ssrInterpolate(_ctx.bar)} baz\`)
@@ -56,7 +56,7 @@ describe('ssr: text', () => {
       compile(`<div><span>{{ foo }} bar</span><span>baz {{ qux }}</span></div>`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
diff --git a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
index 3c53da434..2a3b6d3b4 100644
--- a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
@@ -8,7 +8,7 @@ describe('transition-group', () => {
       compile(`<transition-group><div v-for="i in list"/></transition-group>`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -26,7 +26,7 @@ describe('transition-group', () => {
         `<transition-group tag="ul"><div v-for="i in list"/></transition-group>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<ul\${_ssrRenderAttrs(_attrs)}>\`)
@@ -44,7 +44,7 @@ describe('transition-group', () => {
         `<transition-group :tag="someTag"><div v-for="i in list"/></transition-group>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<\${
@@ -70,7 +70,7 @@ describe('transition-group', () => {
             </transition-group>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -97,13 +97,13 @@ describe('transition-group', () => {
         </transition-group>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require("vue")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<ul\${_ssrRenderAttrs(_mergeProps({
-          class: "red",
-          id: "ok"
+          class: \\"red\\",
+          id: \\"ok\\"
         }, _attrs))}></ul>\`)
       }"
     `)
diff --git a/packages/compiler-ssr/__tests__/ssrVFor.spec.ts b/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
index e76b1be6b..f34aa03d2 100644
--- a/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVFor.spec.ts
@@ -3,7 +3,7 @@ import { compile } from '../src'
 describe('ssr: v-for', () => {
   test('basic', () => {
     expect(compile(`<div v-for="i in list" />`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -18,16 +18,16 @@ describe('ssr: v-for', () => {
   test('nested content', () => {
     expect(compile(`<div v-for="i in list">foo<span>bar</span></div>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+        "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<!--[-->\`)
-        _ssrRenderList(_ctx.list, (i) => {
-          _push(\`<div>foo<span>bar</span></div>\`)
-        })
-        _push(\`<!--]-->\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<!--[-->\`)
+          _ssrRenderList(_ctx.list, (i) => {
+            _push(\`<div>foo<span>bar</span></div>\`)
+          })
+          _push(\`<!--]-->\`)
+        }"
+      `)
   })
 
   test('nested v-for', () => {
@@ -38,7 +38,7 @@ describe('ssr: v-for', () => {
           `</div>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -61,16 +61,16 @@ describe('ssr: v-for', () => {
   test('template v-for (text)', () => {
     expect(compile(`<template v-for="i in list">{{ i }}</template>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+        "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<!--[-->\`)
-        _ssrRenderList(_ctx.list, (i) => {
-          _push(\`<!--[-->\${_ssrInterpolate(i)}<!--]-->\`)
-        })
-        _push(\`<!--]-->\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<!--[-->\`)
+          _ssrRenderList(_ctx.list, (i) => {
+            _push(\`<!--[-->\${_ssrInterpolate(i)}<!--]-->\`)
+          })
+          _push(\`<!--]-->\`)
+        }"
+      `)
   })
 
   test('template v-for (single element)', () => {
@@ -78,7 +78,7 @@ describe('ssr: v-for', () => {
       compile(`<template v-for="i in list"><span>{{ i }}</span></template>`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -96,7 +96,7 @@ describe('ssr: v-for', () => {
         `<template v-for="i in list"><span>{{ i }}</span><span>{{ i + 1 }}</span></template>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -120,7 +120,7 @@ describe('ssr: v-for', () => {
     expect(code).not.toMatch(`_ctx.foo`)
     expect(code).not.toMatch(`_ctx.index`)
     expect(code).toMatchInlineSnapshot(`
-      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+      "const { ssrInterpolate: _ssrInterpolate, ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
diff --git a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
index 010a9687f..f9d81bcca 100644
--- a/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVIf.spec.ts
@@ -3,7 +3,7 @@ import { compile } from '../src'
 describe('ssr: v-if', () => {
   test('basic', () => {
     expect(compile(`<div v-if="foo"></div>`).code).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
@@ -18,65 +18,65 @@ describe('ssr: v-if', () => {
   test('with nested content', () => {
     expect(compile(`<div v-if="foo">hello<span>ok</span></div>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.foo) {
-          _push(\`<div\${_ssrRenderAttrs(_attrs)}>hello<span>ok</span></div>\`)
-        } else {
-          _push(\`<!---->\`)
-        }
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.foo) {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}>hello<span>ok</span></div>\`)
+          } else {
+            _push(\`<!---->\`)
+          }
+        }"
+      `)
   })
 
   test('v-if + v-else', () => {
     expect(compile(`<div v-if="foo"/><span v-else/>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.foo) {
-          _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
-        } else {
-          _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
-        }
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.foo) {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
+          } else {
+            _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
+          }
+        }"
+      `)
   })
 
   test('v-if + v-else-if', () => {
     expect(compile(`<div v-if="foo"/><span v-else-if="bar"/>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.foo) {
-          _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
-        } else if (_ctx.bar) {
-          _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
-        } else {
-          _push(\`<!---->\`)
-        }
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.foo) {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
+          } else if (_ctx.bar) {
+            _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
+          } else {
+            _push(\`<!---->\`)
+          }
+        }"
+      `)
   })
 
   test('v-if + v-else-if + v-else', () => {
     expect(compile(`<div v-if="foo"/><span v-else-if="bar"/><p v-else/>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.foo) {
-          _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
-        } else if (_ctx.bar) {
-          _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
-        } else {
-          _push(\`<p\${_ssrRenderAttrs(_attrs)}></p>\`)
-        }
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.foo) {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
+          } else if (_ctx.bar) {
+            _push(\`<span\${_ssrRenderAttrs(_attrs)}></span>\`)
+          } else {
+            _push(\`<p\${_ssrRenderAttrs(_attrs)}></p>\`)
+          }
+        }"
+      `)
   })
 
   test('<template v-if> (text)', () => {
@@ -97,16 +97,16 @@ describe('ssr: v-if', () => {
     // single element should not wrap with fragment
     expect(compile(`<template v-if="foo"><div>hi</div></template>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        if (_ctx.foo) {
-          _push(\`<div\${_ssrRenderAttrs(_attrs)}>hi</div>\`)
-        } else {
-          _push(\`<!---->\`)
-        }
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          if (_ctx.foo) {
+            _push(\`<div\${_ssrRenderAttrs(_attrs)}>hi</div>\`)
+          } else {
+            _push(\`<!---->\`)
+          }
+        }"
+      `)
   })
 
   test('<template v-if> (multiple element)', () => {
@@ -128,7 +128,7 @@ describe('ssr: v-if', () => {
     expect(
       compile(`<template v-if="foo"><div v-for="i in list"/></template>`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
+      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
@@ -150,7 +150,7 @@ describe('ssr: v-if', () => {
         `<template v-if="foo"><div>hi</div><div>ho</div></template><div v-else/>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         if (_ctx.foo) {
diff --git a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
index 1b27e5d54..3411aa291 100644
--- a/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVModel.spec.ts
@@ -8,42 +8,42 @@ describe('ssr: v-model', () => {
   test('<input> (text types)', () => {
     expect(compileWithWrapper(`<input v-model="bar">`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${
-          _ssrRenderAttrs(_attrs)
-        }><input\${
-          _ssrRenderAttr("value", _ctx.bar)
-        }></div>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${
+            _ssrRenderAttrs(_attrs)
+          }><input\${
+            _ssrRenderAttr(\\"value\\", _ctx.bar)
+          }></div>\`)
+        }"
+      `)
 
     expect(compileWithWrapper(`<input type="email" v-model="bar">`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${
-          _ssrRenderAttrs(_attrs)
-        }><input type="email"\${
-          _ssrRenderAttr("value", _ctx.bar)
-        }></div>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${
+            _ssrRenderAttrs(_attrs)
+          }><input type=\\"email\\"\${
+            _ssrRenderAttr(\\"value\\", _ctx.bar)
+          }></div>\`)
+        }"
+      `)
   })
 
   test('<input type="radio">', () => {
     expect(
       compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type="radio" value="foo"\${
-          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, "foo"))) ? " checked" : ""
+        }><input type=\\"radio\\" value=\\"foo\\"\${
+          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.bar, \\"foo\\"))) ? \\" checked\\" : \\"\\"
         }></div>\`)
       }"
     `)
@@ -52,32 +52,32 @@ describe('ssr: v-model', () => {
   test('<input type="checkbox">', () => {
     expect(compileWithWrapper(`<input type="checkbox" v-model="bar">`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${
-          _ssrRenderAttrs(_attrs)
-        }><input type="checkbox"\${
-          (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
-            ? _ssrLooseContain(_ctx.bar, null)
-            : _ctx.bar)) ? " checked" : ""
-        }></div>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${
+            _ssrRenderAttrs(_attrs)
+          }><input type=\\"checkbox\\"\${
+            (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
+              ? _ssrLooseContain(_ctx.bar, null)
+              : _ctx.bar)) ? \\" checked\\" : \\"\\"
+          }></div>\`)
+        }"
+      `)
 
     expect(
       compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrLooseContain: _ssrLooseContain, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type="checkbox" value="foo"\${
+        }><input type=\\"checkbox\\" value=\\"foo\\"\${
           (_ssrIncludeBooleanAttr((Array.isArray(_ctx.bar))
-            ? _ssrLooseContain(_ctx.bar, "foo")
-            : _ctx.bar)) ? " checked" : ""
+            ? _ssrLooseContain(_ctx.bar, \\"foo\\")
+            : _ctx.bar)) ? \\" checked\\" : \\"\\"
         }></div>\`)
       }"
     `)
@@ -87,13 +87,13 @@ describe('ssr: v-model', () => {
         `<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type="checkbox"\${
-          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? " checked" : ""
+        }><input type=\\"checkbox\\"\${
+          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, _ctx.foo))) ? \\" checked\\" : \\"\\"
         }></div>\`)
       }"
     `)
@@ -103,13 +103,13 @@ describe('ssr: v-model', () => {
         `<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrLooseEqual: _ssrLooseEqual, ssrIncludeBooleanAttr: _ssrIncludeBooleanAttr, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><input type="checkbox"\${
-          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, "foo"))) ? " checked" : ""
+        }><input type=\\"checkbox\\"\${
+          (_ssrIncludeBooleanAttr(_ssrLooseEqual(_ctx.baz, \\"foo\\"))) ? \\" checked\\" : \\"\\"
         }></div>\`)
       }"
     `)
@@ -118,64 +118,64 @@ describe('ssr: v-model', () => {
   test('<textarea>', () => {
     expect(compileWithWrapper(`<textarea v-model="foo">bar</textarea>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require("vue/server-renderer")
+        "const { ssrRenderAttrs: _ssrRenderAttrs, ssrInterpolate: _ssrInterpolate } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${
-          _ssrRenderAttrs(_attrs)
-        }><textarea>\${
-          _ssrInterpolate(_ctx.foo)
-        }</textarea></div>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${
+            _ssrRenderAttrs(_attrs)
+          }><textarea>\${
+            _ssrInterpolate(_ctx.foo)
+          }</textarea></div>\`)
+        }"
+      `)
   })
 
   test('<input :type="x">', () => {
     expect(compileWithWrapper(`<input :type="x" v-model="foo">`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${
-          _ssrRenderAttrs(_attrs)
-        }><input\${
-          _ssrRenderAttr("type", _ctx.x)
-        }\${
-          _ssrRenderDynamicModel(_ctx.x, _ctx.foo, null)
-        }></div>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${
+            _ssrRenderAttrs(_attrs)
+          }><input\${
+            _ssrRenderAttr(\\"type\\", _ctx.x)
+          }\${
+            _ssrRenderDynamicModel(_ctx.x, _ctx.foo, null)
+          }></div>\`)
+        }"
+      `)
 
     expect(
       compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
         }><input\${
-          _ssrRenderAttr("type", _ctx.x)
+          _ssrRenderAttr(\\"type\\", _ctx.x)
         }\${
-          _ssrRenderDynamicModel(_ctx.x, _ctx.foo, "bar")
-        } value="bar"></div>\`)
+          _ssrRenderDynamicModel(_ctx.x, _ctx.foo, \\"bar\\")
+        } value=\\"bar\\"></div>\`)
       }"
     `)
 
     expect(
       compileWithWrapper(`<input :type="x" v-model="foo" :value="bar">`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrRenderAttr: _ssrRenderAttr, ssrRenderDynamicModel: _ssrRenderDynamicModel, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
         }><input\${
-          _ssrRenderAttr("type", _ctx.x)
+          _ssrRenderAttr(\\"type\\", _ctx.x)
         }\${
           _ssrRenderDynamicModel(_ctx.x, _ctx.foo, _ctx.bar)
         }\${
-          _ssrRenderAttr("value", _ctx.bar)
+          _ssrRenderAttr(\\"value\\", _ctx.bar)
         }></div>\`)
       }"
     `)
@@ -184,26 +184,26 @@ describe('ssr: v-model', () => {
   test('<input v-bind="obj">', () => {
     expect(compileWithWrapper(`<input v-bind="obj" v-model="foo">`).code)
       .toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require("vue")
-      const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
+        "const { mergeProps: _mergeProps } = require(\\"vue\\")
+        const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        let _temp0
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          let _temp0
 
-        _push(\`<div\${
-          _ssrRenderAttrs(_attrs)
-        }><input\${
-          _ssrRenderAttrs((_temp0 = _ctx.obj, _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
-        }></div>\`)
-      }"
-    `)
+          _push(\`<div\${
+            _ssrRenderAttrs(_attrs)
+          }><input\${
+            _ssrRenderAttrs((_temp0 = _ctx.obj, _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
+          }></div>\`)
+        }"
+      `)
 
     expect(
       compileWithWrapper(`<input id="x" v-bind="obj" v-model="foo" class="y">`)
         .code
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require("vue")
-      const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require("vue/server-renderer")
+      "const { mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrRenderAttrs: _ssrRenderAttrs, ssrGetDynamicModelProps: _ssrGetDynamicModelProps } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         let _temp0
@@ -211,7 +211,7 @@ describe('ssr: v-model', () => {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
         }><input\${
-          _ssrRenderAttrs((_temp0 = _mergeProps({ id: "x" }, _ctx.obj, { class: "y" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
+          _ssrRenderAttrs((_temp0 = _mergeProps({ id: \\"x\\" }, _ctx.obj, { class: \\"y\\" }), _mergeProps(_temp0, _ssrGetDynamicModelProps(_temp0, _ctx.foo))))
         }></div>\`)
       }"
     `)
diff --git a/packages/compiler-ssr/__tests__/ssrVShow.spec.ts b/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
index 996ef896e..089d39af7 100644
--- a/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
@@ -7,12 +7,12 @@ function compileWithWrapper(src: string) {
 describe('ssr: v-show', () => {
   test('basic as root', () => {
     expect(compile(`<div v-show="foo"/>`).code).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require("vue")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${_ssrRenderAttrs(_mergeProps({
-          style: (_ctx.foo) ? null : { display: "none" }
+          style: (_ctx.foo) ? null : { display: \\"none\\" }
         }, _attrs))}></div>\`)
       }"
     `)
@@ -21,51 +21,51 @@ describe('ssr: v-show', () => {
   test('basic', () => {
     expect(compileWithWrapper(`<div v-show="foo"/>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${
-          _ssrRenderAttrs(_attrs)
-        }><div style="\${
-          _ssrRenderStyle((_ctx.foo) ? null : { display: "none" })
-        }"></div></div>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${
+            _ssrRenderAttrs(_attrs)
+          }><div style=\\"\${
+            _ssrRenderStyle((_ctx.foo) ? null : { display: \\"none\\" })
+          }\\"></div></div>\`)
+        }"
+      `)
   })
 
   test('with static style', () => {
     expect(compileWithWrapper(`<div style="color:red" v-show="foo"/>`).code)
       .toMatchInlineSnapshot(`
-      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
-      return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${
-          _ssrRenderAttrs(_attrs)
-        }><div style="\${
-          _ssrRenderStyle([
-            {"color":"red"},
-            (_ctx.foo) ? null : { display: "none" }
-          ])
-        }"></div></div>\`)
-      }"
-    `)
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${
+            _ssrRenderAttrs(_attrs)
+          }><div style=\\"\${
+            _ssrRenderStyle([
+              {\\"color\\":\\"red\\"},
+              (_ctx.foo) ? null : { display: \\"none\\" }
+            ])
+          }\\"></div></div>\`)
+        }"
+      `)
   })
 
   test('with dynamic style', () => {
     expect(
       compileWithWrapper(`<div :style="{ color: 'red' }" v-show="foo"/>`).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><div style="\${
+        }><div style=\\"\${
           _ssrRenderStyle([
             { color: 'red' },
-            (_ctx.foo) ? null : { display: "none" }
+            (_ctx.foo) ? null : { display: \\"none\\" }
           ])
-        }"></div></div>\`)
+        }\\"></div></div>\`)
       }"
     `)
   })
@@ -76,18 +76,18 @@ describe('ssr: v-show', () => {
         `<div style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
           _ssrRenderAttrs(_attrs)
-        }><div style="\${
+        }><div style=\\"\${
           _ssrRenderStyle([
-            {"color":"red"},
+            {\\"color\\":\\"red\\"},
             { fontSize: 14 },
-            (_ctx.foo) ? null : { display: "none" }
+            (_ctx.foo) ? null : { display: \\"none\\" }
           ])
-        }"></div></div>\`)
+        }\\"></div></div>\`)
       }"
     `)
   })
@@ -98,8 +98,8 @@ describe('ssr: v-show', () => {
         `<div v-bind="baz" style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
       ).code
     ).toMatchInlineSnapshot(`
-      "const { mergeProps: _mergeProps } = require("vue")
-      const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+      "const { mergeProps: _mergeProps } = require(\\"vue\\")
+      const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<div\${
@@ -107,9 +107,9 @@ describe('ssr: v-show', () => {
         }><div\${
           _ssrRenderAttrs(_mergeProps(_ctx.baz, {
             style: [
-              {"color":"red"},
+              {\\"color\\":\\"red\\"},
               { fontSize: 14 },
-              (_ctx.foo) ? null : { display: "none" }
+              (_ctx.foo) ? null : { display: \\"none\\" }
             ]
           }))
         }></div></div>\`)