WebpackError: TypeError: urlBuilder is not a function Gatsby (on Build)

[gustavobica]

Hi!

I'm building a website with gatsby and sanity.io, on gatsby develop everything works fine, but during building I keep getting this error:

**WebpackError: TypeError: urlBuilder is not a function

• getImageUrl.js:51 buildUrl node_modules/@sanity/block-content-to-hyperscript/lib/getImageUrl.js:51:1

• serializers.js:110 ImageSerializer node_modules/@sanity/block-content-to-hyperscript/lib/serializers.js:110:1**

Does anyone know why ?

My getImageUrl.js looks like this:

"use strict";

var generateHelpUrl = require('@sanity/generate-help-url');

var urlBuilder = require('@sanity/image-url');

var objectAssign = require('object-assign');

var enc = encodeURIComponent;
var materializeError = "You must either:\n  - Pass `projectId` and `dataset` to the block renderer\n  - Materialize images to include the `url` field.\n\nFor more information, see ".concat(generateHelpUrl('block-content-image-materializing'));

var getQueryString = function getQueryString(options) {
  var query = options.imageOptions;
  var keys = Object.keys(query);

  if (!keys.length) {
    return '';
  }

  var params = keys.map(function (key) {
    return "".concat(enc(key), "=").concat(enc(query[key]));
  });
  return "?".concat(params.join('&'));
};

var buildUrl = function buildUrl(props) {
  var node = props.node,
      options = props.options;
  var projectId = options.projectId,
      dataset = options.dataset;
  var asset = node.asset;

  if (!asset) {
    throw new Error('Image does not have required `asset` property');
  }

  if (asset.url) {
    return asset.url + getQueryString(options);
  }

  if (!projectId || !dataset) {
    throw new Error(materializeError);
  }

  var ref = asset._ref;

  if (!ref) {
    throw new Error('Invalid image reference in block, no `_ref` found on `asset`');
  }
  console.log("node",node);
  return urlBuilder(objectAssign({
    projectId: projectId,
    dataset: dataset
  }, options.imageOptions || {})).image(node).toString();
};

module.exports = buildUrl;
//#sourceMappingURL=getImageUrl.js.map

And my gatsby-nide.js like this:

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

const path = require('path');
// Get your list of languages from somewhere, env file, config.json, etc
// for sake of this snippet I am putting it here
const extraLanguages = ["pt","pl"]
const defaultLang = "en"; // English is currently the default so it isn't needed here.
const createLocalePage = (page, createPage) => {
  const { context, ...rest } = page
  createPage({
    ...rest,
    context: {
      ...context,
      locale: process.env.LOCALE,
    },
  })
  if (extraLanguages.length) {
    extraLanguages.forEach(code => {
      const { path, context, ...rest } = page
      createPage({
        ...rest,
        path: `/${code}${path}`,
        // every page for each language gets the language code as a prefix
        // to its path: "/es/blog/<some-slug>" for example
        context: {
          ...context,
          locale: code,
        },
      })
    })
  }
}
// You can delete this file if you're not using it
exports.createPages = async ({ actions, graphql }) => {
  const result = await graphql(`
    {
      allSanityPost {
        edges {
          node {
            slug {
              current
            }
          }
        }
      }
    }
  `);

  const projects = result.data.allSanityPost.edges.map(({ node }) => node);
  if (extraLanguages.length) {
    extraLanguages.forEach(code => {

      projects.forEach(project => {
        actions.createPage({
          path: code+"/"+project.slug.current,
          component: path.resolve('./src/templates/post.js'),
          context: {
            slug: project.slug.current,
            locale:code
          }
        });
      });
    })
  }
  if(defaultLang)
  {
    projects.forEach(project => {
      actions.createPage({
        path: project.slug.current,
        component: path.resolve('./src/templates/post.js'),
        context: {
          slug: project.slug.current,
          locale:defaultLang
        }
      });
    });
  }

};
exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions
  deletePage(page)
  createLocalePage(page, createPage)
}

[rexxars]

I'm unable to reproduce this. Would it be possible for you to share the project in question so I could have a look?

[gustavobica]

I invited you to the repository, thank you :) It may be something dumb I did, I using this project to get used to gatsby and sanity.

[rexxars]

Thank you for reporting this, it seems we were a bit too eager on pushing an update for the image-url module which was supposed to work in both CommonJS and ESM environments.

I've released a new version of the module (and the modules that closely depend on it), as well as pushed an update to your repo which upgrades the dependencies.

[gustavobica]

No problem, thank you for the quick you for the quick response and fix.