SSR: Using useSSRContext causes SyntaxError

[bernessco]

Describe the bug

Using useSSRContext() in component causes:

SyntaxError: Identifier 'useSSRContext' has already been declared (58:9)

After research found this code which may cause this to happen:

vite/packages/plugin-vue/src/main.ts

Line 141 in 2900a9a

`import { useSSRContext } from 'vue'`,

Reproduction

https://github.com/bernessco/vite-ssr-bug

System Info

• vite version: 2.1.2
• Operating System: macOS Catalina 10.15.7 (19H15)
• Node version: v15.0.1
• Package manager (npm/yarn/pnpm) and version: yarn 1.22.5

Logs (Optional if provided reproduction)

1. Run yarn build
2. yarn run v1.22.5
   $ yarn build:client && yarn build:server
   $ vite build --ssrManifest --outDir dist/client
   vite v2.1.2 building for production...
   ✓ 16 modules transformed.
   dist/client/index.html 0.47kb
   dist/client/ssr-manifest.json 1.16kb
   dist/client/assets/index.ccce2ca3.css 0.16kb / brotli: 0.10kb
   dist/client/assets/Home.2629c120.js 0.18kb / brotli: 0.15kb
   dist/client/assets/Home.e828a3b2.css 0.05kb / brotli: 0.05kb
   dist/client/assets/index.215828c7.js 2.02kb / brotli: 0.91kb
   dist/client/assets/vendor.5ea2a6b5.js 70.72kb / brotli: 24.71kb
   $ vite build --ssr src/entry-server.js --outDir dist/server
   vite v2.1.2 building SSR bundle for production...
   ✓ 2 modules transformed.
   [rollup-plugin-dynamic-import-variables] Identifier 'useSSRContext' has already been declared (58:9)
   file: /Users/mantas/Projects/github/vite-ssr-bug/src/App.vue:58:9
   error during build:
   SyntaxError: Identifier 'useSSRContext' has already been declared (58:9)
   at Object.pp$4.raise (/Users/mantas/Projects/github/vite-ssr-bug/node_modules/rollup/dist/shared/rollup.js:15591:13)
   at Object.pp$5.declareName (/Users/mantas/Projects/github/vite-ssr-bug/node_modules/rollup/dist/shared/rollup.js:15665:26)
   at Object.pp$2.checkLValSimple (/Users/mantas/Projects/github/vite-ssr-bug/node_modules/rollup/dist/shared/rollup.js:14481:48)
   at Object.pp$1.parseImportSpecifiers (/Users/mantas/Projects/github/vite-ssr-bug/node_modules/rollup/dist/shared/rollup.js:14198:10)
   at Object.pp$1.parseImport (/Users/mantas/Projects/github/vite-ssr-bug/node_modules/rollup/dist/shared/rollup.js:14154:28)
   at Object.pp$1.parseStatement (/Users/mantas/Projects/github/vite-ssr-bug/node_modules/rollup/dist/shared/rollup.js:13457:47)
   at Object.pp$1.parseTopLevel (/Users/mantas/Projects/github/vite-ssr-bug/node_modules/rollup/dist/shared/rollup.js:13340:21)
   at Object.parse (/Users/mantas/Projects/github/vite-ssr-bug/node_modules/rollup/dist/shared/rollup.js:13142:15)
   at Function.parse (/Users/mantas/Projects/github/vite-ssr-bug/node_modules/rollup/dist/shared/rollup.js:13163:35)
   at Graph.contextParse (/Users/mantas/Projects/github/vite-ssr-bug/node_modules/rollup/dist/shared/rollup.js:19240:38)
   error Command failed with exit code 1.
   info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
   error Command failed with exit code 1.
   info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[patak-dev]

Could you give more context for the use case of useSSRContext inside your Vue component?

[bernessco]

I would like to pass additional context on the setup method on the server. I did some testing right now and it seems it makes sense on the server-side to use it, but it opens new problems, like hydration sync

[ygj6]

@bernessco change your code as follows can avoid the duplicate import error.

import { useSSRContext as __useSSRContext} from "vue";
export default {
  setup() {
    __useSSRContext();
  },
};

Also I have submited a PR to fix this.