Error when trying to start Netlify with Eleventy

Support
, ,
1

When I try to run netlify dev I get the following output:

◈ Netlify Dev ◈
◈ Ignored general context env var: LANG (defined in process)
◈ Injected .env file env var: SANITY_PROJECT_NAME
◈ Injected .env file env var: SANITY_PROJECT_ID
◈ Injected .env file env var: SANITY_TOKEN
◈ Injected .env file env var: DEV_BROWSER
◈ Injected .env file env var: SANITY_LOC
◈ Injected .env file env var: SANITY_NAME
◈ Injected .env file env var: SANITY_DATASET
◈ Injected .env file env var: NX_ADD_PLUGINS
◈ Setting up local development server
◈ Starting Netlify Dev with Eleventy
sanity dataset: dev
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] Could not find pagination data (./site-src/pages.11ty.js), went looking for: pages (via Error)
[11ty] 
[11ty] Original error stack trace: Error: Could not find pagination data (./site-src/pages.11ty.js), went looking for: pages
[11ty]     at Pagination._get (/Users/steveystill/sites/web-repo/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:141:13)
[11ty]     at Pagination.setData (/Users/steveystill/sites/web-repo/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:82:29)
[11ty]     at new Pagination (/Users/steveystill/sites/web-repo/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:21:10)
[11ty]     at Template.getTemplates (/Users/steveystill/sites/web-repo/node_modules/@11ty/eleventy/src/Template.js:703:21)
[11ty]     at TemplateMap.initDependencyMap (/Users/steveystill/sites/web-repo/node_modules/@11ty/eleventy/src/TemplateMap.js:414:41)
[11ty]     at TemplateMap.cache (/Users/steveystill/sites/web-repo/node_modules/@11ty/eleventy/src/TemplateMap.js:458:16)
[11ty]     at TemplateWriter._createTemplateMap (/Users/steveystill/sites/web-repo/node_modules/@11ty/eleventy/src/TemplateWriter.js:330:28)
[11ty]     at async TemplateWriter.generateTemplates (/Users/steveystill/sites/web-repo/node_modules/@11ty/eleventy/src/TemplateWriter.js:360:5)
[11ty]     at async TemplateWriter.write (/Users/steveystill/sites/web-repo/node_modules/@11ty/eleventy/src/TemplateWriter.js:407:23)
[11ty]     at async Eleventy.executeBuild (/Users/steveystill/sites/web-repo/node_modules/@11ty/eleventy/src/Eleventy.js:1191:13)
[11ty] Wrote 0 files in 0.29 seconds (v2.0.1)

Everything was running just fine last month, and has just recently produced this error. I worked all week with the 11ty team hoping to resolve this issue, but we concluded that it is either a Netlify or Sanity issue. Was there a recent update to Netlify that would have required me to make some changes? Has anyone run into this before? I found a few similar topics in this community, but nothing that answers my question.

I can do a build just fine, but as soon as I try to bring Netlify into the mix, it fails.

My ./site-src/pages.11ty.js file consists of one line of code:

module.exports = require('site-builder/components/WebPages');

That site-builder/components/WebPages.js file looks like:

const TopNavMenu = require('nav-widgets/cjs/topnavmenu/TopNavMenu');
const TopHeaderBar = require('nav-widgets/cjs/topheaderbar/TopHeaderBar');
const { AtfMediaPreload } = require('./AtfMediaPreload');
const CommonCSS = require('../utils/commonCSS');
const {
  inlineWidgetCSS,
  footerWidgetCSS,
} = require('../../loe-widgets/WidgetRegistry');
const {
  KeyWordsTag,
  DescriptionTag,
  WebPageLDJSON,
  FaceBookOgMeta,
} = require('./SeoData');

const PageCSSBuilder = require('../utils/PageCSSBuilder');
const PageBody = require('../components/PageBody');

const FullPageJson = require('../utils/FullPageJson');
const LoeFooter = require('footer-widgets/cjs/footer/LoeFooter');

function renderScript() {
  return `<script type="module" src="https://loe-assets.logicofenglish.com/js/global.js"></script>`;
}

function renderAnalytics() {
  //old analytics url: fcr.logicofenglish.com/script.js
  let analytics =
    '<script src="https://cdn.usefathom.com/script.js" data-site="RIFESDEK" defer></script>';
  if (process.env.ANALYTICS && process.env.ANALYTICS == 'NO') {
    analytics = `
    <!-- NO ANALYTICS -->`;
  }
  return analytics;
}

function getInlineCSS(pageType) {
  let cssArray = PageCSSBuilder({ pageType: pageType });

  return `<style type="text/css">${CommonCSS(cssArray)}</style>`;
}

function getBodyCSS(body, pageType) {
  let cssArray = PageCSSBuilder({ body: body, pageType: pageType });
  return `<style type="text/css">
        ${CommonCSS(cssArray)}
  </style> `;
}

function getFooterCSS() {
  let cssArray = [];
  for (let cssProp in footerWidgetCSS) {
    cssArray.push({
      isNodePackage: true,
      fileName: footerWidgetCSS[cssProp],
    });
  }
  return `<style type="text/css">${CommonCSS(cssArray)}</style>`;
}

class WebPages {
  data() {
    return {
      pagination: {
        data: 'pages',
        size: 1,
        alias: 'dataPage',
      },
      permalink: function (data) {
        return `${data.dataPage.slug}`;
      },
    };
  }

  async render(data) {
    let googleFontsUrl =
      'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato&display=swap';

    let iconFont = 'https://loe-assets.logicofenglish.com/fonts/loe-icons.woff';

    let layoutTemplate = 'default';

    if (data.dataPage.dev?.template) {
      layoutTemplate = data.dataPage.dev.template;
    }

    let fpjb = await FullPageJson(data.dataPage.body, false);
    data.dataPage.body = fpjb;

    return `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Start SEO Data -->
    <title>${data.dataPage.title}</title>
    ${DescriptionTag(data.dataPage)}
    ${KeyWordsTag(data.dataPage)}
    ${WebPageLDJSON(data.dataPage, data.sanity.baseUrl)}
    ${FaceBookOgMeta(data.dataPage, data.sanity.baseUrl)}
    <!-- End SEO Data -->

    ${renderAnalytics()}

    <link rel="shortcut icon" type="image/x-icon" href="https://assets.logicofenglish.com/images/favicon.ico"/>

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> 
    <link rel="preload" as="style" href="${googleFontsUrl}"/>
    <link media="print" onload="this.onload=null;this.removeAttribute('media');" href="${googleFontsUrl}" rel="stylesheet"/>

    <link rel="preconnect" href="https://loe-assets.logicofenglish.com" crossorigin/> 
    <link rel="preload" as="font" type="font/woff" crossorigin href="${iconFont}"/>
    
    ${getBodyCSS(data.dataPage.body, data.dataPage.pageType)}
    ${getFooterCSS()}

    ${AtfMediaPreload(data.dataPage)}
    
  </head>
  <body>
    ${TopHeaderBar()}
    ${TopNavMenu(data.nav)}     
      ${await PageBody(data.dataPage)}

    <div role="contentinfo" class="l-footer">${LoeFooter({
      footer: data.globalSettings.footers[0],
    })}</div>
  </body>
  ${renderScript()}
  
  
</html>`;
  }
}

module.exports = WebPages;

The error mentions not finding pages, and I think that is defined as follows:

/apps/root-site/site-src/_data/pages.js:

const pages = require('site-builder/data/pages');
const sanitySettings = require('./sanity');

module.exports = async function () {
  return await pages(sanitySettings.microsite);
};

And /libs/site-builder/data/pages.js:

const SanityObject = require('../utils/SanityObject');

module.exports = async function (microsite) {
  const query = `*[_type == "microsite" && title == "${microsite}"][0]{"pages": content[]{title,url,"content":*[_type == "page" && _id == ^.docId._ref][0]}}`;
  const micrositeResults = await SanityObject({
    query: query,
    cacheId: 'pages',
  });

  let pages = []
  if (micrositeResults?.pages?.length > 0) {
    pages = micrositeResults?.pages?.map((page) => {
    try {
      let pageData = Object.assign(page.content, { slug: page.url });
      return pageData;
    } catch (err) {
      if (!page) {
        throw new Error('No Page defined');
      }
      if (page?.url && !page.content) {
        throw new Error(`no content assigend to ${page.url}`);
      }
      if (!page.url) {
        throw new Error(`no page url defined`);
      }
    }
  });
  }

  return pages;
};

Any help on this would be greatly appreciated as I have been banging my head against a wall for a week now trying to solve this. I am not sure if I have given enough info, so please let me know if there’s anything else that would be helpful.

2

@dev406 I’ll preface this with, “I don’t work with Eleventy”, so I’m guessing a bit.

The error:

Could not find pagination data (./site-src/pages.11ty.js), went looking for: pages (via Error)

As you say ./site-src/pages.11ty.js exports site-builder/components/WebPages.js which exports WebPages which defines:

class WebPages {
  data() {
    return {
      pagination: {
        data: 'pages',     <- pagination.data which is set to 'pages'
        size: 1,
        alias: 'dataPage',
      },

Checking the documentation for Eleventy Pagination I presume 'pages' is a reference to some data in your “global data”.

Checking the documentation for Global Data it indicates the default folder for “global data” files is _data and that it should be in the Input Directory. (It’s likely that position is correct if it works with non netlify dev builds - but just something you can double check).

Have you tried putting a console.log in /apps/root-site/site-src/_data/pages.js to check if it’s being executed?

Likewise in /libs/site-builder/data/pages.js as if (micrositeResults?.pages?.length > 0) { it would throw no errors and return an empty array, it’d be great to confirm it is running, as that would hone in on if it’s more likely an Eleventy or Sanity issue.