Gatsby: [gatsby-plugin-preact] Uncaught TypeError: Object(...) is not a function

[rwieruch]

Description

I wanted to use gatsby-plugin-preact but I ran into an issue. So I created a minimal issue where it happens too.

Steps to reproduce

Take the gatsby-starter-blog (or I guess any other project), do the setup, and install gatsby-plugin-react. Here is a minimal application for this problem.

Expected result

The application should work.

Actual result

I get the following stack trace:

Users/mydspr/Developer/Repos/gatsby-blog/node_modules/@reach/router/es/index.js:61 Uncaught TypeError: Object(...) is not a function
    at createNamedContext (Users/mydspr/Developer/Repos/gatsby-blog/node_modules/@reach/router/es/index.js:61)
    at eval (Users/mydspr/Developer/Repos/gatsby-blog/node_modules/@reach/router/es/index.js:69)
    at Module../node_modules/@reach/router/es/index.js (commons.js:1176)
    at __webpack_require__ (commons.js:725)
    at fn (commons.js:102)
    at eval (Users/mydspr/Developer/Repos/gatsby-blog/node_modules/gatsby-link/index.js:23)
    at Object../node_modules/gatsby-link/index.js (commons.js:2608)
    at __webpack_require__ (commons.js:725)
    at fn (commons.js:102)
    at Module.eval (Users/mydspr/Developer/Repos/gatsby-blog/.cache/gatsby-browser-entry.js:8)

[kakadiadarpan]

@rwieruch Thanks for providing us with the reproduction repo. I can confirm that gatsby-plugin-preact is breaking with Gatsby v2.

Gatsby uses @reach/router for routing, and it seems like it isn't compatible with preact. Check this codesandbox where only preact and @reach/router are being used.

reach/router#9

[rwieruch]

@kakadiadarpan thanks for your response and providing a solution. Would you say this is the solution to go for or will the gatsby-preact-plugin get an update eventually and this is only a workaround?

[kakadiadarpan]

@rwieruch I'm afraid it's not a solution. If you uncomment the line number 10 then you'll see the build failing

[ArthurYidi]

Partially fixed with https://github.com/developit/preact/pull/1138 and https://github.com/developit/preact/pull/963.

Also requires aliasing hydrate = render.

However, due to type changes it introduced a bug that requires fixing:
https://github.com/developit/preact/issues/1232

After all of those fixes I was able to get local version working, hopefully everything lands in preact 8.4.

It would be helpful to document that Preact support for React 16 and Reach/Router (Gatsby 2) is broken until new updates land.

[pieh]

@ArthurYidi Would you be interested in adding warning to gatsby-plugin-react readme - it can even point to this issue to provide more context

[simonjoom]

For me i use reach router and inferno and i have no issue
https://github.com/simonjoom/gatsby-starter-inferno-master

[rrcobb]

Updating the codesandbox @kakadiadarpan to preact 8.4.2 and preact-compat 3.18.4 makes the @reach/router issues go away - (here's a forked sandbox)

Updating the version, however, does not solve the issue. Here's a fork of the minimal reproduction repo with an updated preact version. Still gets the backtrace

Uncaught TypeError: Object(...) is not a function
    at createNamedContext (Users/robert.cobb/projects/gatsby-starter-blog-with-preact/node_modules/@reach/router/es/index.js:61)
    at eval (Users/robert.cobb/projects/gatsby-starter-blog-with-preact/node_modules/@reach/router/es/index.js:69)
    at Module../node_modules/@reach/router/es/index.js (commons.js:1176)
    at __webpack_require__ (commons.js:725)
    at fn (commons.js:102)
    at eval (Users/robert.cobb/projects/gatsby-starter-blog-with-preact/node_modules/gatsby-link/index.js:23)
    at Object../node_modules/gatsby-link/index.js (commons.js:2608)
    at __webpack_require__ (commons.js:725)
    at fn (commons.js:102)
    at Module.eval (Users/robert.cobb/projects/gatsby-starter-blog-with-preact/.cache/gatsby-browser-entry.js:8)

@ArthurYidi @kakadiadarpan any thoughts on why this would be?

Planning to do a little more digging, but it seems like the incompatibility demonstrated by the codesandbox is no longer the basic problem. There must be something else!

[rrcobb]

Looks like the other issues are dependencies on react's context api (still mostly from @reach/router, since that uses a ton of the new react 16 features).

https://github.com/developit/preact/pull/963 is the preact core issue tracking adding support, and
https://github.com/developit/preact-compat/issues/475 is the issue to follow on the preact-compat side.

As mentioned in this comment there's still a big hack you have to do to make preact-compat export a viable createContext function.

In this commit I tried to do the set of updates needed to load a working version of the plugin, but things are still broken with those, in the following ways:

npm run dev yields no errors, but somehow yields a page with the following html:

<div id="___gatsby"><undefined></undefined></div>

🤔 🤔 🤔

npm run build also doesn't fail, and serving it promisingly shows the starter's homepage! However, there are errors in the console, and trying to visit any of the other pages fails.

Uncaught TypeError: o is not a function
    at production-app.js:127

Digging into the source around that point, it looks like something with the renderer:

const renderer = apiRunner(
        `replaceHydrateFunction`,
        undefined,
        ReactDOM.hydrate
      )[0]

      domReady(() => {
        renderer(
          <NewRoot />,
          typeof window !== `undefined`
            ? document.getElementById(`___gatsby`)
            : void 0,
          () => {
            apiRunner(`onInitialClientRender`)
          }
        )
      })

I have not uncovered what this means or what's wrong, but maybe this is what @ArthurYidi meant by

Also requires aliasing hydrate = render.

Adding documentation of how this is broken to the plugin seems like a good idea.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!