Preact: Preact X, Preact render to string & Styled Components

[nephix]

Hey,

I'm trying to get [email protected] to work with [email protected] and preact-render-to-string. But I'm always getting an error saying that react could not be found. Not sure if this is a bug or my configuration is wrong.

Steps:

1. Check sandbox on https://codesandbox.io/s/ojv1j96739

Expected Result:

• Renders h1 tag
• Writes stylesheets into console

Actual Result:

Could not find dependency: 'react' relative to '/node_modules/styled-components/dist/styled-components.browser.cjs.js'

Styled Components Doc on SSR: https://www.styled-components.com/docs/advanced#server-side-rendering

[JoviDeCroock]

Have you got an entry in your webpack like this:

````
resolve: {
alias: {
react: 'preact/compat', // first try it with compat you can try preact after if it works
}
}

[marvinhagemeister]

@JoviDeCroock yeah the codesandbox link has a the correct alias' set up :+1:

[nephix]

Didn't work with preact/compat alias @JoviDeCroock, already tried this. Still thanks for your thoughts on this!

[marvinhagemeister]

Ok, so I tried various different aliasing options and the only one that worked in node for me: module-alias.

The setup code is fairly small. It doesn't seem to support the node resolution algo and one needs to point it to a specific file instead.

1. Add require("module-alias/register") at the top of your code
2. Add this to package.json:

{
  "name": "my-package",
  "//": "...",
  "_moduleAliases": {
    "react": "./node_modules/preact/compat/dist/compat.js",
    "react-dom": "./node_modules/preact/compat/dist/compat.js"
  },
}

With aliasing now working correctly we run into https://github.com/developit/preact-render-to-string/issues/73 because contextType is not yet supported in preact-render-to-string. I hacked into it to work around it locally and then I seem to run into a bug in styled-component where they access an invalid property on a StyleSheet object.

[nephix]

Hey @marvinhagemeister ,

thanks a bunch for looking into this! I'll look into your path of changes and try to find workarounds or create a ticket at styled-components if necessary!

[JoviDeCroock]

Is this a problem with how .mjs is interpreted?
Because now that .mjs is being standardized to .js it could be avoided it by publishing a .js as module.

[marvinhagemeister]

That's unlikely. module-alias doesn't support node's module resolution for both .js and .mjs files.

[jlaustill]

I think I am running into the same thing, so I created a bare bones razzle 3 repo to test. I am just trying to get compat in core to work with beta.1, nothing more. So I removed everything I could and am just trying to render a single div with some text. I added the alias to weback and babel. I could very possibly be doing something wrong, so here's the repo to pull if you want to play.

razzle3-preact-x

EDIT:
I created a branch no-mo-compat and converted to preact and it is working, so I'm thinking this is just an issue with preact/compat at this point.

[marvinhagemeister]

@jlaustill That's a different issue than what the original poster is running into. Extracted your comment into #1601 .

[marvinhagemeister]

Just released [email protected] which includes support for the createContext-API :tada:

https://github.com/developit/preact-render-to-string/releases/tag/5.0.3