Preact-cli: Duplicate preact instance while prerendering breaking options

[marvinhagemeister]

Ported over from: https://github.com/developit/preact-render-to-string/issues/86#issuecomment-492325953

Do you want to request a _feature_ or report a _bug_?

bug

What is the current behaviour?

Prerendering will throw an undefined error:

TypeError: Cannot read property '__H' of undefined

This is caused by loading multiple instances of preact which can't see each others option-hooks. There are a total of 2 instances at play:

1) included in the generated ssr-bundle.js
2) one inside prerender.js: https://github.com/developit/preact-cli/blob/bd464043dac8646183ed9a8cfab677778f73b4f7/packages/cli/lib/lib/webpack/prerender.js#L28

Both instances have their own options variable which ultimately leads to this error.

If the current behaviour is a bug, please provide the steps to reproduce.

{
  "scripts": {
    "build": "preact build"
  },
  "devDependencies": {
    "preact-cli": "^3.0.0-rc.1",
    "preact-render-to-string": "^5.0.3"
  },
  "dependencies": {
    "preact": "^10.0.0-beta.1"
  }
}

import { useState } from "preact/hooks";

export default () => {
  const [a, b] = useState("c");
  return <h1>Hello, World! {a}</h1>;
};

What is the expected behaviour?

It should not throw.

Please mention other relevant information.

• Node version: 11.7
• npm version 6.5.0
• Operating system: Linux Debian Sid
• CLI version: 3.0.0-rc.1
• Browser: doesn't matter

[prateekbh]

// @lukeed

[lukeed]

We can do without the require('preact') that @marvinhagemeister linked. I think the solution is to modify the entry.js file w/ ENV keys for build-time manipulation. We want to be able to just do this:

return renderToString( App({ ...params, url }) );

[marvinhagemeister]

@lukeed That's likely not enough. preact is inlined into the ssr-bundle file. preact-render-to-string imports straight from node_modules so we'll end up with 2 instances again :S

[lukeed]

Ah, true. Making it external for SSR bundle should probably do the trick. Then no change needed for entry at all

[prateekbh]

glad i was in right direction for the solution.. :) will try it out

[prateekbh]

@marvinhagemeister I was able to make it work by making preact external and updating preact to beta 10.
However the [email protected] return <Undefined/>.

I tried updating it to [email protected] but this update breaks it again with the same error

TypeError: Cannot read property '__H' of undefined

[prateekbh]

I have the fix ready, will open the PR soon 👍