vitepress

vitepress copied to clipboard

Hi there, great work! I'm writing this because I can't add some env variables on my vue components that I would use with giscus comment app. Since there are some sensitive github id data (data-repo-id and data-category-id in particular) I would like to load them as environment variables. For some reason import.meta.env contains only the default variables:

{
    "BASE_URL": "/",
    "MODE": "development",
    "DEV": true,
    "PROD": false,
    "SSR": false
}

My .env file:

VITE_GISCUS_DATA_REPO="trincadev/my-repo-name"
VITE_GISCUS_DATA_REPO_ID="github-repo-id"
VITE_GISCUS_DATA_CATEGORY="Announcements"
VITE_GISCUS_DATA_CATEGORY_ID="github-category-id"

Right now I'm trying using to load these env variables in a giscus.paths.ts file, without any success. Can you explain me what I'm doing wrong?

I'm using this the giscus.paths.js file:

import { loadEnv } from 'vitepress'

const env = loadEnv('', process.cwd())

export default {
  variables() {
    return {
      giscus_repo_id: env.VITE_GISCUS_DATA_REPO_ID,
      giscus_category_id: env.VITE_GISCUS_DATA_CATEGORY_ID
    }
  }
}

Importing this file I got this error:

giscus.paths.js:1 Uncaught SyntaxError: The requested module '/@fs/path/to/repository/cv-static-pages/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vitepress/dist/client/index.js?v=893a6587' does not provide an export named 'loadEnv' (at giscus.paths.js:1:10)

In past I used to expose my environment variables via vite.config.ts but now it doesn't work anymore. My vite.config.ts:

import { defineConfig, Plugin } from 'vite'
import _fs from 'fs'
import path from 'path'

const fs = _fs.promises

export default defineConfig({
  clearScreen: false,
  plugins: [
    ...(process.env.NETLIFY ? [] : [copyPiniaPlugin()]),
  ],
  optimizeDeps: {
    exclude: ['vue-demi', '@vueuse/shared', '@vueuse/core', 'pinia'],
  },
})

function copyPiniaPlugin(): Plugin {
  return {
    name: 'copy-pinia',
    async generateBundle() {
      const filePath = path.resolve(__dirname, '../pinia/dist/pinia.mjs')

      // throws if file doesn't exist
      await fs.access(filePath)

      this.emitFile({
        type: 'asset',
        fileName: 'pinia.mjs',
        source: await fs.readFile(filePath, 'utf8'),
      })
    },
  }
}

My package.json:

{
  "name": "cv-static-pages",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "pnpm i --frozen-lockfile && vitepress build docs && cp ./presentations/*.html ./docs/.vitepress/dist/",
    "docs:serve": "vitepress serve docs",
    "docs:preview": "vitepress preview docs --port 5173",
    "docs:test": "npx playwright test --workers 1"
  },
  "type": "module",
  "dependencies": {
    "@geoman-io/leaflet-geoman-free": "^2.16.0",
    "@vue-leaflet/vue-leaflet": "^0.10.1",
    "core-js": "^3.37.0",
    "dotenv": "^16.4.5",
    "leaflet": "^1.9.4",
    "leaflet.markercluster": "^1.5.3",
    "photoswipe": "^5.4.3",
    "pinia": "^2.1.7",
    "playwright": "^1.43.1",
    "vitepress": "1.1.4",
    "vue": "^3.4.26"
  },
  "devDependencies": {
    "@playwright/test": "^1.43.1",
    "@tsconfig/recommended": "^1.0.6",
    "@types/geojson": "^7946.0.14",
    "@types/leaflet": "^1.9.12",
    "@types/leaflet.markercluster": "^1.5.4",
    "playwright-merge-html-reports": "^0.2.8"
  },
  "pnpm": {
    "overrides": {},
    "overrides-example": {
      "postcss@ <8.4.31": "^8.4.31"
    }
  }
}

I have dotenv as dependency because I use it in playwright tests.

Any idea?

Can you explain why you're using path loader file for this?

You don't need to call anything, it should work by default.

You need to keep .env inside docs/ if you're running vitepress dev docs

Hi @brc-dd, thank you for your response. I was using path loader because I couldn't understand how to make it work .env variable loading. My error was keeping my .env file at project root level instead than within docs folder, now it works! Thank you for your time, Alessandro