-
-
Notifications
You must be signed in to change notification settings - Fork 148
Server side rendering issues [aliases not working] #299
Comments
I was able to fix this issue by forking |
Hi there! It looks like your aliasing on the server is actually not taking effect - you can tell because there are React internals included in the stack trace you posted. It's likely you're using Preact + Preact-compat to render your app, but the libraries you're pulling in are actually using React. Can you give any details about how you're doing the aliasing on the server? For what it's worth, the best (maybe only) way I'm aware of to properly alias require('module-alias').addAliases({
'react' : 'preact-compat',
'react-dom': 'preact-compat'
}); or, specify this in your "_moduleAliases": {
"react": "preact-compat",
"react-dom": "preact-compat"
} ... and install the hook: require('module-alias/register'); |
Not sure if this will help you but... We have this compiling on the server with webpack and had to make sure to exclude the correct modules from externals e.g.
Without the |
@mikestead are you aliasing outside webpack to handle that then? interested to know how that works. |
Nope just aliasing in the webpack config as usual.
Because webpack picks up the alias and is processing react imports it seems to swap out react for preact compat, just like for the client, and all seems to work fine. |
nice! |
@hanford where did we end up with this? Definitely looked like an aliasing issue to me (the fact that Alternatively - you might actually just be able to alias |
Yeah, cant make this work - every single module says it can not find react. That function gives webpack 2 a bunch of errors as well I have added to package.json, added to aliasing for webpack, added everything. react-helmet wasnt working so i stopped using it then I started getting react-router errors which i obviously am not about to remove and re-do the entire app for :( |
@bradennapier If anything is saying it can't find React, that means your aliases are not being used. Can you elaborate on how you did the aliasing? One common mistake I see is that people alias via Webpack, but then run their code without bundling directly in Node (which doesn't know anything about Webpack aliases). |
Yeah, my problem was that that was where I was looking but I had that part correct. Just figured it out. I had a few modules being built into a vendor dll so when we moved into the client they were not aliased. |
ahhh yeah, that sounds about right. if there was something funky required to alias that DLL by all means post it here. I think we need to add some details to the aliasing section of the preact website to cover these cases. |
I just removed them all together, it was only for development anyway so I am using the dll for lodash and friends only. |
Ahh, ok. I think we can probably safely say webpack DLL's are not aliasable, that's at least good to know. |
Am having the same issue here, and I referred to #242 in which I found a quick solution to get
Am about to try with
|
Problem solved with |
Still seeing this issue. The easiest workaround is to symlink |
solved my issue on server side (preact 10.4.0) there was a problem with using |
Yes, for Node/SSR module-alias is a good solution with the configuration @sedlukha posted. |
@sedlukha Can you help how to patch |
@rodynenko I don't use preact-cli. You need to add In my case I use razzle for ssr. So my target file is |
@rodynenko This shouldn't be needed for |
@sedlukha @marvinhagemeister Thanks. It seems to be en error in my code. |
Is this resolved? No longer relevant to me / happy to close if it's resolved |
Hello! Thanks again for making such an amazing little framework. preact-compat has been a dream to work with, and I'm excited to integrate. I've just run into one little issue, that I hope isn't a blocker, because the performance gains are tremendous! 🔥
I'll add as much code as possible, if it's relevant, note that our application runs fine in the browser, where this code isn't executed.
So we server side render everything with React and things work fine. The code looks like this:
So we're using
react-helmet
, for the tags, however I don't think that's the issue. This runs fine in a node environment, and returns HTML when the function is invoked in a purely react environment (without the preact aliasing). However, when I introduced the preact & webpack aliasing, I started seeing this error:So, investigating this stack trace, the first error points to
react/lib/onlyChild
which is this function:weirdly, the
children
in this argument are we're failing the ternaryReactElement.isValidElement
, here is what the children arg is:After doing some investigation, commenting out the
onlyChild
ternary fixes server side rendering, however I don't think forkingreact-redux
andreact
is the best solution here.the
ReactElement
call appears to be checking for$$typeof: Symbol(react.element)
Annnnd the whole reason any of this is called is because we're rendering
<Provider />
fromreact-redux
The text was updated successfully, but these errors were encountered: