myxvisual / react-uwp

📱⌨ React Components that Implement Microsoft's UWP Design & Fluent Design.
https://react-uwp.com
MIT License
1.18k stars 78 forks source link

bug in ssr in version 1.1.1 #16

Closed prateekrastogi closed 7 years ago

prateekrastogi commented 7 years ago

Hi, I recently updated the dependency to 1.1.1 and it seems there is bug in it while performing ssr due use of document to generate default style if none is present. Here is the code i ran:


 <ApolloProvider client={this.apollo}>
          <UWPThemeProvider
            theme={getTheme({
              themeName: 'dark', // set custom theme
              accent: '#0078D7', // set accent color
              useFluentDesign: true, // sure you want use new fluent design.
              userAgent: this.props.userAgent
            })}>
          <ComposedComponent {...this.props}/>
          </UWPThemeProvider>
        </ApolloProvider>

The error thrown while fetching the ssr page is:

ReferenceError: document is not defined at StyleManager.setupStyleElement (C:\Code\consert\frontend\node_modules\react-uwp\styles\StyleManager.js:37:38) at new StyleManager (C:\Code\consert\frontend\node_modules\react-uwp\styles\StyleManager.js:120:14) at Theme._this.bindNewThemeMethods (C:\Code\consert\frontend\node_modules\react-uwp\Theme\index.js:130:32) at Theme.render (C:\Code\consert\frontend\node_modules\react-uwp\Theme\index.js:326:14) at C:\Code\consert\frontend\node_modules\react-dom\lib\ReactCompositeComponent.js:795:21

Note that issue happens only while doing ssr. While this code works perfectly fine with version 1.1.0

myxvisual commented 7 years ago

@prateekrastogi Thanks for feedback, I will be in the next version of the server rendering to fix this bug.

myxvisual commented 7 years ago

@prateekrastogi hi, i think i fixed this bugs, if you have tested your project without error, you can close this issue, ty.

prateekrastogi commented 7 years ago

Yeah, it's working properly. Thanks a lot

prateekrastogi commented 7 years ago

@myxvisual Hi, I have a doubt in docs about ssr it is written to use this flag too needGenerateAcrylic={false} . But, I am using acrylic texture in my ui layout . Also, right now i didn't set it to any value i.e. default. Is it necessary to set to false? What are the implications of it being true on ssr?

myxvisual commented 7 years ago

@prateekrastogi Because the effect of acrylic material is generated by the canvas, the Node environment does not support canvas, should be unable to generate and error.

prateekrastogi commented 7 years ago

Thanks