Gatsby: [gatsby-plugin-preact]: location and history is undefined in layout component

[vinaypuppal]

Description

I am trying to use gatsby-plugin-preact plugin but when running gatsby build it's failing at Building static HTML for pages part

Steps to reproduce

1. Use gatsby default starter gatsby new gatsby-example-site
2. Install gatsby-plugin-preact and add it to list of plugins in gatsby-config.js

3. Change layout component in src/layouts/index.js to:

   const TemplateWrapper = ({ children, location, history }) => {
     console.log(location, history);
     const { pathname } = location;
     const { goBack } = history;
     return (
       <div>
         <Helmet
           title="Gatsby Default Starter"
           meta={[
             { name: 'description', content: 'Sample' },
             { name: 'keywords', content: 'sample, something' },
           ]}
         />
         <Header />
         <div
           style={{
             margin: '0 auto',
             maxWidth: 960,
             padding: '0px 1.0875rem 1.45rem',
             paddingTop: 0,
           }}>
           {children()}
         </div>
       </div>
     );
   };
   
   TemplateWrapper.propTypes = {
     children: PropTypes.func,
   };
   
   export default TemplateWrapper;
   

4. Then build the site using npm run build
5. You will see error mentoned below

Expected result

What should happen?
The build should succeed without any errors

Actual result

What happened.
The building is failing with below error

⠠ Building static HTML for pages{ pathname: '/404/', search: '', hash: '' } { createHref: [Function],
  action: 'POP',
  location: { pathname: '/404/', search: '', hash: '' },
  push: [Function],
  replace: [Function],
  go: [Function],
  goBack: [Function],
  goForward: [Function],
  listen: [Function],
  block: [Function] }
undefined undefined
undefined undefined
undefined undefined

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

   8 | const TemplateWrapper = ({ children, location, history }) => {
   9 |   console.log(location, history);
> 10 |   const { pathname } = location;
     |           ^
  11 |   const { goBack } = history;
  12 |   return (
  13 |     <div>


  WebpackError: Cannot read property 'pathname' of undefined

  - index.js:10 TemplateWrapper
    src/layouts/index.js:10:11

  - preact-compat.js:257 cl.render
    ~/preact-compat/dist/preact-compat.js:257:1

  - preact-compat.js:496 callMethod
    ~/preact-compat/dist/preact-compat.js:496:1

  - preact-compat.js:507 cl.render
    ~/preact-compat/dist/preact-compat.js:507:1

  - index.js:155 renderToString
    ~/preact-render-to-string/dist/index.js:155:1

  - index.js:162 renderToString
    ~/preact-render-to-string/dist/index.js:162:1

  - index.js:162 renderToString
    ~/preact-render-to-string/dist/index.js:162:1

  - index.js:162 renderToString
    ~/preact-render-to-string/dist/index.js:162:1

  - index.js:162 renderToString
    ~/preact-render-to-string/dist/index.js:162:1

  - static-entry.js:126 module.exports
    .cache/static-entry.js:126:31


error An unexpected error occurred: "Command failed.
Exit code: 1

Environment

• Gatsby version (npm list gatsby): ^1.9.231
• gatsby-cli version (gatsby --version): 1.1.40
• Node.js version: v8.9.4
• Operating System: macOS v10.13.3

File contents (if changed):

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: ['gatsby-plugin-react-helmet', 'gatsby-plugin-preact'],
};

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^1.9.231",
    "gatsby-link": "^1.6.39",
    "gatsby-plugin-preact": "^1.0.17",
    "gatsby-plugin-react-helmet": "^2.0.7",
    "gatsby-plugin-react-next": "^1.0.11",
    "query-string": "^5.1.0",
    "react-helmet": "^5.2.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.11.0"
  }
}

gatsby-node.js: not changed
gatsby-browser.js: not changed
gatsby-ssr.js: not changed

[m-allanson]

Hey @vinaypuppal I reproduced your issue locally so can confirm this looks like a bug. (I was going to push up my reproduction but I seem to have deleted it 😖).

It'd be great to see Preact working as a drop-in replacement. If you'd like to try and fix this up, check out the contributing docs.

I could be way off, but investigating from the commands/build.js might be one place to start.

[vinaypuppal]

@m-allanson Thanks for confirming. Yeah, sure I will look into it.

[EnKrypt]

Just chiming in to say that I have the same problem too.

Looks like for now, until a fix is released, there are a couple of things we can do.

• Wrap the offending entities around an if statement as such:
  if (location) { //... code using location }
• Simply not use the gatsby-plugin-preact module.

[DanielRuf]

Simply not use the gatsby-plugin-preact module.

Do we have some more info to fix this? Otherwise I would have to switch back to React.

[EnKrypt]

@DanielRuf Well that's what I did.

Turns out, it wasn't just this particular issue.
Last I checked, Preact simply does not play well with Gatsby, and has some undesirable and unpredictable side effects on its own when used independently as well. It did not emulate React's behavior exactly, which as a React dev, can be nasty.

I gave up and switched, but if you decide not to, and stick with Preact, do document your process. I'm curious about how it would go.

[DanielRuf]

cc @developit I guess we are just missing some binding(s) in the plugins.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍