fix: apolloclient ssg generation issue

cypress/.gitignore

@@ -1,3 +1,4 @@
 fixtures
 plugins
-support
+support
+downloads

package.json

@@ -10,7 +10,8 @@
  "test": "vitest",
  "test:e2e": "cypress open",
  "test:unit": "vitest",
- "typecheck": "vue-tsc --noEmit"
+ "typecheck": "vue-tsc --noEmit",
+ "postinstall": "esmo scripts/patch.ts"
  },
  "dependencies": {
  "@apollo/client": "^3.6.2",
@@ -22,6 +23,7 @@
  "nprogress": "^0.2.0",
  "pinia": "^2.0.13",
  "prism-theme-vars": "^0.2.2",
+ "react": "^18.1.0",
  "vue": "^3.2.33",
  "vue-demi": "^0.12.5",
  "vue-i18n": "^9.1.10",
@@ -42,6 +44,7 @@
  "cypress": "^9.6.0",
  "eslint": "^8.14.0",
  "eslint-plugin-cypress": "^2.12.1",
+ "esno": "^0.14.1",
  "https-localhost": "^4.7.1",
  "markdown-it-link-attributes": "^4.0.0",
  "markdown-it-prism": "^2.2.4",

scripts/patch.ts

@@ -0,0 +1,66 @@
+import fs from 'fs'
+import path from 'path'
+
+const patchPkg = (name: string, data: any) => {
+ const pkgPath = path.resolve('node_modules', name, 'package.json')
+
+ const pkg = JSON.parse(fs.readFileSync(pkgPath, { encoding: 'utf-8' }))
+
+ if (typeof pkg.exports !== 'undefined')
+ return
+
+ const patchedPkg = {
+ ...pkg,
+ ...data,
+ }
+
+ fs.writeFileSync(pkgPath, JSON.stringify(patchedPkg, null, 2), { encoding: 'utf-8' })
+}
+
+patchPkg('@vue/apollo-composable', {
+ type: 'module',
+ sideEffects: false,
+ exports: {
+ '.': {
+ require: './dist/index.js',
+ import: './dist/index.esm.js',
+ types: 'dist/index.d.ts',
+ },
+ },
+})
+
+patchPkg('@apollo/client/core', {
+ exports: {
+ '.': {
+ require: './core.cjs',
+ import: './index.js',
+ types: './index.d.ts',
+ },
+ },
+})
+
+patchPkg('@apollo/client', {
+ exports: {
+ '.': {
+ import: './index.js',
+ require: './main.cjs',
+ types: './index.d.ts',
+ },
+ './core': {
+ import: './index.js',
+ require: './core.cjs',
+ types: './index.d.ts',
+ },
+ './react': {
+ import: './react/index.js',
+ require: './react/react.cjs',
+ types: './react/index.d.ts',
+ },
+ './react/context': {
+ import: './react/context/index.js',
+ require: './react/context/context.cjs',
+ types: './react/context/index.d.ts',
+ },
+ './*': './*',
+ },
+})

src/common/ApolloClient.ts

@@ -1,4 +1,4 @@
-import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core/index.js'
+import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'
 
 // HTTP connection to the API
 const httpLink = createHttpLink({

src/components.d.ts

@@ -10,6 +10,8 @@ declare module '@vue/runtime-core' {
  CarbonLanguage: typeof import('~icons/carbon/language')['default']
  CarbonLogoGithub: typeof import('~icons/carbon/logo-github')['default']
  CarbonMoon: typeof import('~icons/carbon/moon')['default']
+ CarbonMusic: typeof import('~icons/carbon/music')['default']
+ CarbonPedestrian: typeof import('~icons/carbon/pedestrian')['default']
  CarbonSun: typeof import('~icons/carbon/sun')['default']
  Counter: typeof import('./counter/components/Counter.vue')['default']
  Footer: typeof import('./common/components/Footer.vue')['default']