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

[Bug]: plugin-preview components that don't support SSR would break the SSG build due to sideEffects #553

Open
SoonIter opened this issue Jan 16, 2024 · 4 comments
Labels
🐞 bug Something isn't working 👏 PR welcome

Comments

@SoonIter
Copy link
Member

Version

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 94.38 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 120.0.6099.216
    Chrome Canary: 122.0.6250.0
    Safari: 17.2.1
  npmPackages:
    @rspress/plugin-preview: latest => 1.9.3 
    rspress: ^1.0.0 => 1.9.3

Details

image
 docs/guide/index.mdx
# Error 

```tsx
console.log(window)        <---- break the SSG build
function App() {
  return (
    <div>
      <span>Hello World</span>
    </div>
  );
}

export default App;
\```

Solutions

I came up with three solutions

  1. rspress-plugin-preview support the components with sideEffect in some way

  2. Add error messages to encourage users to improve the quality of their components to support SSR.

  3. Add error messages to let users who temporarily cannot resolve component SSR support turn off the ssg: false

Reproduce link

https://github.com/SoonIter/rspress-preview-demo

Reproduce Steps

pnpm i
npm run build
@SoonIter SoonIter added the 🐞 bug Something isn't working label Jan 16, 2024
@sanyuan0704
Copy link
Collaborator

cc @10Derozan

@10Derozan
Copy link
Member

It has been fixed in #578

@SoonIter
Copy link
Member Author

<code src="./A.tsx"/> still have this problem.

# mdx
<code src="./Comp.tsx" />
// Comp.tsx
console.log(window)
const A = () => <div>12321</div>
export default A;

@SoonIter SoonIter reopened this Apr 23, 2024
@SoonIter
Copy link
Member Author

SoonIter commented May 13, 2024

We can use await import to solve it

<code src="./Comp.tsx" />
⬇️
const Comp = React.lazy(() => import('./Comp.tsx'));

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working 👏 PR welcome
Projects
None yet
Development

No branches or pull requests

3 participants