Isomorphic app

[moimael]

Hi,

I try to use this component with react, css-modules and server-side rendering. But server side rendering won't work because of this error :

/home/xxxx/Development/galaxy/node_modules/cq-prolyfill/cq-prolyfill.js:1440
})(window, document);
    ^

ReferenceError: window is not defined

Any workaround ?

Thanks

[ausi]

As cq-prolyfill relies on computed styles and the DOM, I think you should exclude it from the server-side part.

[RichOren]

Did you ever find a solution - I am running into the same problem with css-modules, post-css & react during a webpack build.

[sunny-g]

@RichOren to get rid of the window is not defined error when using it in webpack:

postcss: function() {
  return [
    // ... other postcss plugins here
    // (not sure if they should come before or after as I'm still struggling to get cq to work :( )
    require('cq-prolyfill/postcss-plugin')();
  ];
}

[ausi]

not sure if they should come before or after as I'm still struggling to get cq to work :(

I think this depends the other plugins having problems with :container(...). Using cq-prolyfill/postcss-plugin as the first plugin should work best in most cases.

[sunny-g]

@ausi do you mean listed first in the postcss plugins or loaded first (also not sure if there's a difference between the two with regards to the postcss webpack loader).

I've tried both and even with wrapping the container query with :global, I'm still unable to trigger the query.

[ausi]

do you mean listed first in the postcss plugins or loaded first

I meant listed as the first PostCSS plugin, so that all your other PostCSS plugins come after it.

Do you have a reduced test case or a link to a page where it is not working?

[sunny-g]

@ausi Not at the moment, though I have gotten it to work correctly (the problem was initialization of the cqApi object).

My current issue now is that reparse and reevaluate are being invoked before the components are fully built and mounted to the DOM, but I suspect that that is more of an issue with React than with this library. Thank you for your help!