Gatsby: Upgrading gatsby from 2.0.31 to 2.0.34 causes a Typerror

Created on 30 Oct 2018 · 23Comments · Source: gatsbyjs/gatsby

Not sure what's causing this, it may be a plugin but I'm not sure where to even start.

Description

Upgrading gatsby from 2.0.31 to 2.0.34 causes a typerror:

$ gatsby develop                                                                                                                                               [75/2399]
success open and validate gatsby-configs — 0.011 s
error value must be an array of bytes


  TypeError: value must be an array of bytes

  - v35.js:29 generateUUID
    [jonleopard.com]/[uuid]/lib/v35.js:29:38

  - create-node-id.js:16 createNodeId
    [jonleopard.com]/[gatsby]/dist/utils/create-node-id.js:16:10

  - load.js:131 processPlugin
    [jonleopard.com]/[gatsby]/dist/bootstrap/load-plugins/load.js:131:13

  - load.js:148 config.plugins.forEach.plugin
    [jonleopard.com]/[gatsby]/dist/bootstrap/load-plugins/load.js:148:20

  - Array.forEach

  - load.js:147 module.exports
    [jonleopard.com]/[gatsby]/dist/bootstrap/load-plugins/load.js:147:20

  - index.js:56
    [jonleopard.com]/[gatsby]/dist/bootstrap/load-plugins/index.js:56:21

  - Generator.next

  - debuggability.js:313 Promise._execute
    [jonleopard.com]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:483 Promise._resolveFromExecutor
    [jonleopard.com]/[bluebird]/js/release/promise.js:483:18

  - promise.js:79 new Promise
    [jonleopard.com]/[bluebird]/js/release/promise.js:79:10

  - index.js:96
    [jonleopard.com]/[gatsby]/dist/bootstrap/load-plugins/index.js:96:17


error UNHANDLED REJECTION


  TypeError: value must be an array of bytes

  - v35.js:29 generateUUID
    [jonleopard.com]/[uuid]/lib/v35.js:29:38

  - create-node-id.js:16 createNodeId
    [jonleopard.com]/[gatsby]/dist/utils/create-node-id.js:16:10

  - load.js:131 processPlugin
    [jonleopard.com]/[gatsby]/dist/bootstrap/load-plugins/load.js:131:13

  - load.js:148 config.plugins.forEach.plugin
    [jonleopard.com]/[gatsby]/dist/bootstrap/load-plugins/load.js:148:20

  - Array.forEach

  - load.js:147 module.exports
    [jonleopard.com]/[gatsby]/dist/bootstrap/load-plugins/load.js:147:20

  - index.js:56
    [jonleopard.com]/[gatsby]/dist/bootstrap/load-plugins/index.js:56:21

  - Generator.next

  - debuggability.js:313 Promise._execute
    [jonleopard.com]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:483 Promise._resolveFromExecutor
    [jonleopard.com]/[bluebird]/js/release/promise.js:483:18

  - promise.js:79 new Promise
    [jonleopard.com]/[bluebird]/js/release/promise.js:79:10

  - index.js:96
    [jonleopard.com]/[gatsby]/dist/bootstrap/load-plugins/index.js:96:17

Steps to reproduce

Upgraded all my gatsby plgugins as well as gatsby/gatsby-cli to the latest versions.

Expected result

gatsby develop should start with no errors.

Actual result

Received TypeError: value must be an array of bytes

Environment

System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Shell: 5.6.2 - /usr/local/bin/zsh
Binaries:
Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
Browsers:
Chrome: 69.0.3497.100
Firefox: 63.0
Safari: 12.0
npmPackages:
gatsby: ^2.0.34 => 2.0.34
gatsby-cli: ^2.4.4 => 2.4.4
gatsby-codemods: ^1.0.6 => 1.0.6
gatsby-plugin-google-analytics: ^2.0.7 => 2.0.7
gatsby-plugin-netlify: ^2.0.3 => 2.0.3
gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1
gatsby-plugin-sharp: ^2.0.10 => 2.0.10
gatsby-plugin-sitemap: ^2.0.2 => 2.0.2
gatsby-plugin-styled-components: ^3.0.1 => 3.0.1
gatsby-remark-prismjs: ^3.0.3 => 3.0.3
gatsby-source-contentful: ^2.0.9 => 2.0.9
gatsby-source-filesystem: ^2.0.6 => 2.0.6
gatsby-transformer-json: ^2.1.5 => 2.1.5
gatsby-transformer-remark: ^2.1.11 => 2.1.11
gatsby-transformer-sharp: ^2.1.7 => 2.1.7

Source

jonleopard

👍6

Most helpful comment

I had the same issue, in gatsyb-config.js file I had this:

module.exports = {
plugins: [
{
      resolve: `gatsby-plugin-sitemap`,
},
...
]

instead of simply

plugins: ['gatsby-plugin-sitemap', ...]

Greegko on 30 Oct 2018

👍7 ❤3 🎉2

All 23 comments

@jonleopard would you be able to provide a reproduction?

For context, this is the line that appears to be throwing:

function createNodeId(id, namespace) {
  return uuidv5(id, uuidv5(namespace, seedConstant)); // here
}

DSchau on 30 Oct 2018

I had the same issue, in gatsyb-config.js file I had this:

module.exports = {
plugins: [
{
      resolve: `gatsby-plugin-sitemap`,
},
...
]

instead of simply

plugins: ['gatsby-plugin-sitemap', ...]

Greegko on 30 Oct 2018

👍7 ❤3 🎉2

Thanks @Greegko, that worked for me! Mind if I ask how you managed to trace down that issue?

jonleopard on 30 Oct 2018

@jonleopard Put console.log() with related context parameters before every createNodeId imported and called, at one place there was an undefined and more console log until I found it iterated over all plugins which gave me the plugin name. Just saw the differences between plugin declaration afterwards.

Greegko on 30 Oct 2018

Nice find @Greegko! Looks like you have to either use the shorthand syntax or at least supply an empty options object. Is that intentional? I was using the object syntax exclusively since having a uniform style made it clearer to read the plugins list.

zvinless on 30 Oct 2018

I can confirm that the fix provided by @Greegko fixes the issue.

Before

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-relative-images`,
        options: {
          name: 'assets'
        }
      },
      {
        resolve: `gatsby-remark-images`,
      },
    ],
  },
}

After

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-relative-images`,
        options: {
          name: 'assets'
        }
      },
      `gatsby-remark-images`, // changed
    ],
  },
}

kinduff on 30 Oct 2018

🎉1

Yeah, so to sum up here, it looks like leaving options off a plugin with resolve reliably throws the error, correct?

We should fix it! Anyone want to jump on this? I'll close this one out and create a new issue in a second :)

DSchau on 30 Oct 2018

👍3

Thank you @Greegko, this was very helpful!

t2ca on 30 Oct 2018

Thank you @kinduff !!

ken0x0a on 31 Oct 2018

@DSchau Hmm, I'm getting the same error after an update to Gatsby 2.0.35. For me it's unrelated to the shape of the gatsby-config object. Instead I get it when I include a local plugin in the config. My local plugin was working prior to the upgrade on Gatsby 2.0.19.

Edit: regression introduced in 2.0.33

jedrichards on 31 Oct 2018

Local plugin stopped working with same error since 2.0.33. Problem persists after 2.0.35 update. The @Greegko solution does not apply because local plugin contains options.

cmsbased on 31 Oct 2018

@jedrichards @cmsbased just to clarify, by a local plugin you mean a project level plugins folder (e.g. plugins/gatsby-plugin-example) that is then declared/used in gatsby-config.js correct?

Do either of you have a reproduction handy? Otherwise I'll just make one quickly to confirm!

Also here's the diff between 2.0.32 and 2.0.33

DSchau on 31 Oct 2018

I've attempted to reproduce the issue here (using gatsby 2.0.35), and unable to do so. Possible there's a misunderstanding here, so would either of you be able to reproduce here? I've added you both as collaborators.

DSchau on 31 Oct 2018

@DSchau @cmsbased I've managed to repro a bug. Here's a PR demoing it:

https://github.com/DSchau/gatsby-9559/pull/1

Looks like it occurs for me when package.json in the local plugin is the empty object {}. The docs currently advise this:

https://www.gatsbyjs.org/docs/plugin-authoring/#what-files-does-gatsby-look-for-in-a-plugin

jedrichards on 31 Oct 2018

@DSchau It is a local plugin \gatsby-siteplugins\gatsby-source-custom

gatsby-config.js is set like this:

    {
      resolve: 'gatsby-source-custom',
      options: {
        baseUrl: 'http://custom.local',
      },
    },

Need to roll it back to version 2.0.31 to make it work. Problem persists with empty plugin.

cmsbased on 31 Oct 2018

@jedrichards so the issue there is due to this change

We just need to tweak that logic a bit.

@cmsbased I don't think it's config related, do you also have an empty package.json?

DSchau on 31 Oct 2018

@DSchau Yes. Empty package.json with {}

cmsbased on 31 Oct 2018

Right, so the logic to tweak here is pretty simple!

In this file

we need to get the name up front, and then use it, e.g. like so:

const name = packageJSON.name || pluginName
return {
  resolve: resolvedPath,
  name,
  id: createNodeId(name, `Plugin`),
  version:
    packageJSON.version || createFileContentHash(resolvedPath, `**`),
}

either of you want to PR that? I'd appreciate it, otherwise I'll get to it soon!

DSchau on 31 Oct 2018

👍3 ❤1

@DSchau Here you go, in case it's needed:

https://github.com/gatsbyjs/gatsby/pull/9636

jedrichards on 1 Nov 2018

Fixed in [email protected]. I like to run yarn upgrade-interactive to grab the latest versions of things, but yarn add gatsby@^2.0.37 should do the trick, too!

DSchau on 1 Nov 2018

@DSchau thanks for checking this out! I'm still seeing the same error in 2.0.37. Here's my gatsby-config.js:

module.exports = {
    plugins: [
        {
            resolve: 'gatsby-plugin-react-helmet'
        }
    ]
}

adding an empty options object still fixes it, too

zvinless on 1 Nov 2018

@zvinless that seems like a separate issue! Interesting in fixing it? It's probably a regression introduced in the same release (2.0.33) I posted above!

DSchau on 1 Nov 2018

Sure, I'll give it a shot

zvinless on 1 Nov 2018

Was this page helpful?

0 / 5 - 0 ratings