Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Support SSR #177

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Support SSR #177

wants to merge 1 commit into from

Conversation

kagol
Copy link

@kagol kagol commented Feb 22, 2022

@viljamis
When I use enquire.js in a Vite project, the following error was reported when building production package:

✓ building client + server bundles...
✖ rendering pages...
build error:
 ReferenceError: window is not defined

I found that the reason for the error was that the MediaQueryDispatch method in the mediaquerydispatch.js file don't make judgments about the client environment.

When in the SSR situation, the code is running in nodeJS environment, no window variables, so the error will be reported.

I fixed the issue by adding

if (typeof window === 'undefined') {
  return;
}

It works well, please merge this PR and release a new version.

Thanks! Best wishs for you!

@kagol
Copy link
Author

kagol commented Feb 22, 2022

@viljamis
You can reproduce this problem by following these steps:

Step 1: Create Vite project and install deps

pnpm create vite vite-demo-enquire -- --template=vue-ts
pnpm i vitepress enquire.js

Step 2: Create docs/index.md

Create file docs/index.md

Hello enquire.js

Step 3: Configure vitepress, import enquire.js and use it

Create file docs/.vitepress/config.ts

const config = {
  title: 'enquire.js'
}

export default config

Create file docs/.vitepress/theme/index.ts

import Theme from 'vitepress/dist/client/theme-default'

// import enquire.js and use it
import * as enquire from 'enquire.js'
console.log('enquire:', enquire)

export default {
  ...Theme
}

Step 4: Add docs:build and build docs

Add docs:build script to package.json

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "docs:dev": "vitepress dev docs",

    // Added
    "docs:build": "vitepress build docs",

    "preview": "vite preview"
  },

And run build:docs

pnpm docs:build

Then the issue is reported as follows:

✓ building client + server bundles...
✖ rendering pages...
build error:
 ReferenceError: window is not defined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant