update to canary v3 #8

rdela · 2024-02-02T22:33:29Z

UPDATE: MERGED 🌈📓➕🎨💥

build error attempting to follow https://www.11ty.dev/blog/canary-eleventy-v3/

npx @11ty/eleventy --serve --quiet

> eleventeen@8.0.0 d
> npx @11ty/eleventy --serve --quiet

[11ty] Cannot read properties of undefined (reading 'configFunction') (via TypeError)
[11ty] 
[11ty] Original error stack trace: TypeError: Cannot read properties of undefined (reading 'configFunction')
[11ty]     at UserConfig._getPluginName (file:///Users/example/eleventeen/node_modules/@11ty/eleventy/src/UserConfig.js:403:21)
[11ty]     at TemplateConfig.processPlugins (file:///Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:286:32)
[11ty]     at async TemplateConfig.mergeConfig (file:///Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:396:3)
[11ty]     at async TemplateConfig.init (file:///Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:168:17)
[11ty]     at async Eleventy.initializeConfig (file:///Users/example/eleventeen/node_modules/@11ty/eleventy/src/Eleventy.js:155:3)
[11ty]     at async Eleventy.init (file:///Users/example/eleventeen/node_modules/@11ty/eleventy/src/Eleventy.js:398:4)

netlify · 2024-02-02T22:33:33Z

✅ Deploy Preview for eleventeen ready!

Name	Link
🔨 Latest commit	`ddbf0e7`
🔍 Latest deploy log	https://app.netlify.com/sites/eleventeen/deploys/65c122cbac2d4f000825fcdc
😎 Deploy Preview	https://deploy-preview-8--eleventeen.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 82 (🔴 down 9 from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

socket-security · 2024-02-02T22:33:49Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@11ty/eleventy@3.0.0-alpha.4	environment Transitive: eval, filesystem, network, shell, unsafe	`+144`	14.7 MB	zachleat

🚮 Removed packages: npm/@11ty/eleventy@2.0.1

View full report↗︎

rdela · 2024-02-03T16:01:41Z

Problems stem from new eleventy.config.js https://github.com/rdela/eleventeen/blob/canary/eleventy.config.js

Building with canary doesn't help. Investigating configFunction with debug now, this is the INITIAL relevant part from full output below…

UPDATE: The line numbers below correspond to 2.0.1, added links.

Will try to add a new comment below with current line numbers that match main (canary, currently 3.0.0-alpha.4) branch soon.

Eleventy:TemplateConfig Merging config with eleventy.config.js +1ms
[11ty] Eleventy CLI Fatal Error:
[11ty] 1. Error in your Eleventy config file 'eleventy.config.js'. (via EleventyConfigError)
  Eleventy:EleventyErrorHandler (error stack): EleventyConfigError: Error in your Eleventy config file 'eleventy.config.js'.
  Eleventy:EleventyErrorHandler     at TemplateConfig.requireLocalConfigFile (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:312:15)

        throw new EleventyConfigError(

https://github.com/11ty/eleventy/blob/v2.x/src/TemplateConfig.js#L312

  Eleventy:EleventyErrorHandler     at TemplateConfig.mergeConfig (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:334:28)

let localConfig = this.requireLocalConfigFile();

https://github.com/11ty/eleventy/blob/v2.x/src/TemplateConfig.js#L334

  Eleventy:EleventyErrorHandler     at TemplateConfig.getConfig (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:159:26)

      this.config = this.mergeConfig();

https://github.com/11ty/eleventy/blob/v2.x/src/TemplateConfig.js#L159

  Eleventy:EleventyErrorHandler     at new Eleventy (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/Eleventy.js:109:39)

  getLocalProjectConfigFiles() {
    if (this.projectConfigPaths && this.projectConfigPaths.length > 0) {
      return TemplatePath.addLeadingDotSlashArray(this.projectConfigPaths.filter((path) => path));
    }
    return [];
  }

https://github.com/11ty/eleventy/blob/v2.x/src/TemplateConfig.js#L105-L110

DEBUG mode command:

DEBUG=Eleventy* npx @11ty/eleventy

DEBUG mode output:

  Eleventy:cmd command: eleventy { _: [], quiet: null, version: false, watch: false, dryrun: false, help: false, serve: false, incremental: false, 'ignore-initial': false } +0ms
  Eleventy:EventBus Setting up global EventBus. +0ms
  Eleventy:UserConfig Resetting EleventyConfig to initial values. +0ms
  Eleventy:UserConfig Adding universal filter 'slug' +9ms
  Eleventy:UserConfig Adding universal filter 'slugify' +0ms
  Eleventy:UserConfig Adding universal filter 'url' +0ms
  Eleventy:UserConfig Adding universal filter 'log' +0ms
  Eleventy:UserConfig Adding universal filter 'serverlessUrl' +0ms
  Eleventy:UserConfig Adding universal filter 'getCollectionItemIndex' +0ms
  Eleventy:UserConfig Adding universal filter 'getCollectionItem' +0ms
  Eleventy:UserConfig Adding universal filter 'getPreviousCollectionItem' +0ms
  Eleventy:UserConfig Adding universal filter 'getNextCollectionItem' +0ms
  Eleventy:TemplateConfig rootConfig { templateFormats: [ 'liquid',   'ejs', 'md',       'hbs', 'mustache', 'haml', 'pug',      'njk', 'html',     '11ty.js' ], pathPrefix: '/', markdownTemplateEngine: 'liquid', htmlTemplateEngine: 'liquid', htmlOutputSuffix: '-o', dataFileSuffixes: [ '.11tydata', '' ], dataFileDirBaseNameOverride: false, keys: { package: 'pkg', layout: 'layout', permalink: 'permalink', permalinkRoot: 'permalinkBypassOutputDir', engineOverride: 'templateEngineOverride', computed: 'eleventyComputed' }, dir: { input: '.', includes: '_includes', data: '_data', output: '_site' }, handlebarsHelpers: {}, nunjucksFilters: {} } +0ms
  Eleventy Setting process.env.ELEVENTY_ROOT: '/Users/example/eleventeen' +0ms
  Eleventy:TemplateConfig Merging config with eleventy.config.js +1ms
[11ty] Eleventy CLI Fatal Error:
[11ty] 1. Error in your Eleventy config file 'eleventy.config.js'. (via EleventyConfigError)
  Eleventy:EleventyErrorHandler (error stack): EleventyConfigError: Error in your Eleventy config file 'eleventy.config.js'.
  Eleventy:EleventyErrorHandler     at TemplateConfig.requireLocalConfigFile (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:312:15)
  Eleventy:EleventyErrorHandler     at TemplateConfig.mergeConfig (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:334:28)
  Eleventy:EleventyErrorHandler     at TemplateConfig.getConfig (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:159:26)
  Eleventy:EleventyErrorHandler     at new Eleventy (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/Eleventy.js:109:39)
  Eleventy:EleventyErrorHandler     at Object.<anonymous> (/Users/example/eleventeen/node_modules/@11ty/eleventy/cmd.js:60:16)
  Eleventy:EleventyErrorHandler     at Module._compile (node:internal/modules/cjs/loader:1376:14)
  Eleventy:EleventyErrorHandler     at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
  Eleventy:EleventyErrorHandler     at Module.load (node:internal/modules/cjs/loader:1207:32)
  Eleventy:EleventyErrorHandler     at Module._load (node:internal/modules/cjs/loader:1023:12)
  Eleventy:EleventyErrorHandler     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12) +0ms
[11ty] 2. require() of ES Module /Users/example/eleventeen/eleventy.config.js from /Users/example/eleventeen/node_modules/@11ty/eleventy/src/Util/Require.js not supported.
[11ty] Instead change the require of eleventy.config.js in /Users/example/eleventeen/node_modules/@11ty/eleventy/src/Util/Require.js to a dynamic import() which is available in all CommonJS modules. (via Error)
  Eleventy:EleventyErrorHandler (error stack): Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/example/eleventeen/eleventy.config.js from /Users/example/eleventeen/node_modules/@11ty/eleventy/src/Util/Require.js not supported.
  Eleventy:EleventyErrorHandler Instead change the require of eleventy.config.js in /Users/example/eleventeen/node_modules/@11ty/eleventy/src/Util/Require.js to a dynamic import() which is available in all CommonJS modules.
  Eleventy:EleventyErrorHandler     at requireLocal (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/Util/Require.js:6:10)
  Eleventy:EleventyErrorHandler     at TemplateConfig.requireLocalConfigFile (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:287:23)
  Eleventy:EleventyErrorHandler     at TemplateConfig.mergeConfig (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:334:28)
  Eleventy:EleventyErrorHandler     at TemplateConfig.getConfig (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/TemplateConfig.js:159:26)
  Eleventy:EleventyErrorHandler     at new Eleventy (/Users/example/eleventeen/node_modules/@11ty/eleventy/src/Eleventy.js:109:39) +0ms

rdela · 2024-02-03T18:23:06Z

OK so I got it building on canary. Seems the configFunction problem was swapping HtmlBasePlugin in for EleventyHtmlBasePlugin which is funny because I asked about it on Mastodon but still messed it up lol.

do you think it is worth noting in the canary post that HtmlBasePlugin and EleventyHtmlBasePlugin are the same? (I think… https://github.com/search?q=repo%3A11ty%2Feleventy%20EleventyHtmlBasePlugin&type=code)

I think the source of the confusion was this part of the “short upgrade guide.”

How to require("@11ty/eleventy") in CommonJS

This step is only necessary if you use CommonJS for your Eleventy configuration file […]
If you’re continuing to use CommonJS […]

Very easy to glaze over and breeze past “only necessary,” and “If you’re continuing,” as I did, and think the:

const { I18nPlugin, RenderPlugin, HtmlBasePlugin } = await import("@11ty/eleventy");

…part belongs in your updated:

export default async function(eleventyConfig) {

Once I moved that to a typical import syntax up top:

import { HtmlBasePlugin } from "@11ty/eleventy";

I finally got a more helpful error:

> eleventeen@8.0.0 build
> eleventy

[11ty] 1. Error in your Eleventy config file 'eleventy.config.js'. (via EleventyConfigError)
[11ty] 2. The requested module '@11ty/eleventy' does not provide an export named 'HtmlBasePlugin' (via SyntaxError)
[11ty] 
[11ty] Original error stack trace: file:///Users/example/eleventeen/eleventy.config.js:7
[11ty] import { HtmlBasePlugin } from "@11ty/eleventy";
[11ty]          ^^^^^^^^^^^^^^
[11ty] SyntaxError: The requested module '@11ty/eleventy' does not provide an export named 'HtmlBasePlugin'

Changing HtmlBasePlugin back to EleventyHtmlBasePlugin:

import { EleventyHtmlBasePlugin } from "@11ty/eleventy";

eleventyConfig.addPlugin(EleventyHtmlBasePlugin);

In the course of debugging I renamed _data/metadata and the feed and archive 11tydata files from .js to .cjs so their module.exports would work, but going to see if I can get them working as modules before I merge this.

zachleat · 2024-02-05T15:55:32Z

Can you double check your canary version?

rdela · 2024-02-05T16:50:24Z

Can you double check your canary version?

Everything is building now? I just need to convert the 11tydata files to modules and then I'm going to merge this!

This PR should be useful for base-blog when it comes time to convert it.

UPDATE: converted _data/metadata.js + content/feed/feed.11tydata.js + content/archive/archive.11tydata.js to es module syntax and changed extension back to js from temp change to cjs. Used 11ty-website’s src/docs/docs.11tydata.js as a guide https://github.com/11ty/11ty-website/blob/main/src/docs/docs.11tydata.js

rdela · 2024-02-05T18:16:09Z

@zachleat

merged this PR to trunk
added a notice to the readme
WARNING: Here Be Canaries 🐥
available for your blessing 🪷🕊🧘🏼

rdela added 2 commits February 2, 2024 14:17

partial update

d0070c5

rm extra code

308f551

rdela added 2 commits February 2, 2024 14:44

upd node ver to 18

967b519

build with canary

a34d139

rdela added 2 commits February 3, 2024 09:07

rename 11tydata files to cjs and use EleventyHtmlBasePlugin

db9fa28

use normal import syntax for EleventyHtmlBasePlugin

43f6587

rdela changed the title ~~partial update to canary v3~~ update to canary v3 Feb 3, 2024

restore --quiet to d and start scripts, add noisy w/o, keep local 11ty

c01f868

rdela added 4 commits February 5, 2024 09:01

metadata and 11tydata files cjs > js modules

feb00b0

upd readme

8d08fcd

upd readme with link to v3 pr

69913b0

update site index and about page

ddbf0e7

rdela merged commit 607528e into trunk Feb 5, 2024
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

update to canary v3 #8

update to canary v3 #8

rdela commented Feb 2, 2024 •

edited

netlify bot commented Feb 2, 2024 •

edited

socket-security bot commented Feb 2, 2024 •

edited

rdela commented Feb 3, 2024 •

edited

rdela commented Feb 3, 2024 •

edited

How to `require("@11ty/eleventy")` in CommonJS

zachleat commented Feb 5, 2024

rdela commented Feb 5, 2024 •

edited

rdela commented Feb 5, 2024

update to canary v3 #8

update to canary v3 #8

Conversation

rdela commented Feb 2, 2024 • edited

netlify bot commented Feb 2, 2024 • edited

✅ Deploy Preview for eleventeen ready!

socket-security bot commented Feb 2, 2024 • edited

rdela commented Feb 3, 2024 • edited

rdela commented Feb 3, 2024 • edited

How to require("@11ty/eleventy") in CommonJS

zachleat commented Feb 5, 2024

rdela commented Feb 5, 2024 • edited

rdela commented Feb 5, 2024

rdela commented Feb 2, 2024 •

edited

netlify bot commented Feb 2, 2024 •

edited

socket-security bot commented Feb 2, 2024 •

edited

rdela commented Feb 3, 2024 •

edited

rdela commented Feb 3, 2024 •

edited

How to `require("@11ty/eleventy")` in CommonJS

rdela commented Feb 5, 2024 •

edited