LiquidJS import broken as of latest version, 10.16.5

[lexoyo]

Edit: I created a PR here: #3426

Operating system

Fedora Linux 40

Eleventy

canary

Describe the bug

Hello It's probably me, but i can't get even the most simple use case to work:

➜ node -v
v18.20.4
➜ echo '# Heading' > index.md
➜ npx @11ty/eleventy@canary --serve
[11ty] Eleventy Fatal Error (CLI):
[11ty] The requested module 'liquidjs' does not provide an export named 'default' (via SyntaxError)
[11ty] 
[11ty] Original error stack trace: file:///home/lexoyo/.npm/_npx/82761691191ced73/node_modules/@11ty/eleventy/src/Engines/Liquid.js:2
[11ty] import liquidLib, { Tokenizer, evalToken } from "liquidjs";
[11ty]        ^^^^^^^^^
[11ty] SyntaxError: The requested module 'liquidjs' does not provide an export named 'default'
[11ty]     at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
[11ty]     at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
[11ty]     at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
[11ty]     at async importModuleDynamicallyWrapper (node:internal/vm/module:432:15)
[11ty]     at async /home/lexoyo/.npm/_npx/82761691191ced73/node_modules/@11ty/eleventy/cmd.cjs:57:24

This is supposed to work right? Or did I miss something in v3?

Reproduction steps

follow the getting started guide but with canary

1. echo '# Heading' > index.md
2. npx @11ty/eleventy@canary --serve

Result

Error with the import of liquidjs module

Expected behavior

build the site in _site

Notes

1. I tried to run the tests of 11ty source / repo and it fails the same
2. eleventy v2 works fine

[lexoyo]

When I clone 11ty source code and run the tests it does the same error, is it just me?

➜ node -v
v20.12.2
➜ git clone git@github.com:11ty/eleventy.git
Cloning into 'eleventy'...
remote: Enumerating objects: 18381, done.
remote: Counting objects: 100% (4967/4967), done.
remote: Compressing objects: 100% (1145/1145), done.
remote: Total 18381 (delta 4073), reused 4535 (delta 3780), pack-reused 13414 (from 1)
Receiving objects: 100% (18381/18381), 4.32 MiB | 2.26 MiB/s, done.
Resolving deltas: 100% (13202/13202), done.
➜ cd eleventy
➜ git:(main) npm i
(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠸ idealTree:eleventy: sill idealTree buildDeps
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated npmlog@5.0.1: This package is no longer supported.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated are-we-there-yet@2.0.0: This package is no longer supported.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated gauge@3.0.2: This package is no longer supported.

> @11ty/eleventy@3.0.0-beta.1 prepare
> husky

added 667 packages, and audited 668 packages in 49s

229 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

➜ git:(main) npm test

> @11ty/eleventy@3.0.0-beta.1 test
> npm run test:node && npm run test:ava

> @11ty/eleventy@3.0.0-beta.1 test:node
> node --test test_node/tests.js

file:///home/lexoyo/_/tmp/eleventy/src/Engines/Liquid.js:2
import liquidLib, { Tokenizer, evalToken } from "liquidjs";
       ^^^^^^^^^
SyntaxError: The requested module 'liquidjs' does not provide an export named 'default'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async loadESM (node:internal/process/esm_loader:28:7)
    at async handleMainPromise (node:internal/modules/run_main:113:12)

Node.js v20.12.2
✖ /home/lexoyo/_/tmp/eleventy/test_node/tests.js (258.807335ms)
  'test failed'

ℹ tests 1
ℹ suites 0
ℹ pass 0
ℹ fail 1
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 267.787361

✖ failing tests:

test at test_node/tests.js:1:1
✖ /home/lexoyo/_/tmp/eleventy/test_node/tests.js (258.807335ms)
  'test failed'
➜ git:(main) 

[lexoyo]

It is linked to the latest version of liquidjs package

-        "liquidjs": "10.16.4",
+        "liquidjs": "10.16.5",

the 10.16.4 works fine

this is because of a bold import in /src/Engines/Liquid.js

-import liquidLib, { Tokenizer, evalToken } from "liquidjs";
+import { Tokenizer, TokenKind, evalToken, Liquid as LiquidJs } from "liquidjs";

this is when it went wrong but i don't understand how the tests didn't fail :-/

I did a PR with the proper (same as in liquidjs's docs i mean): #3425

[rdela]

@lexoyo thanks for all this work, would you mind re-titling this issue to something more relevant like, for example, “LiquidJS import broken as of latest version, 10.16.5”?

Here are my notes and a temporary workaround…

Looks like there is an upstream issue where Eleventy is broken on the latest version of LiquidJS, 10.16.5, from these changes https://github.com/harttle/liquidjs/issues/739

Overriding Eleventy’s LiquidJS to the previous version, 10.16.4, in package.json resolves this.

"overrides": {
  "@11ty/eleventy": {
    "liquidjs": "10.16.4"
  }
}

https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides

Think this import needs to change:

import liquidLib, { Tokenizer, evalToken } from "liquidjs";

https://github.com/11ty/eleventy/blob/7eb257d2a7f795a7eeb518ba2361158f803bed87/src/Engines/Liquid.js#L2

see #3426

[lexoyo]

Nice workaround, thx!

@lexoyo thanks for all this work, would you mind re-titling this issue to something more relevant like, for example, “LiquidJS import broken as of latest version, 10.16.5”?

Done

[lexoyo]

Actually in my case the workaround doesn't work.

I'm developing Silex free/libre website builder wich generates 11ty templates along with a .gitlab-ci.yaml file stored in the user's gitlab repo. The gitlab pipeline then relies on npx to run 11ty without using a package.json or package-lock.json. Example site generated

Unfortunately, it looks like this results in Silex sites being broken :-/

I don't see any workaround for that

[rdela]

Sorry to hear that Alex. CloudCannon builds are also broken for the same reason. Netlify does respect overrides and I was able to get the project I am working on building there with it.

Silex looks very cool.

[harttle]

Default export is removed from liquidjs a long time ago but it still works by CommonJS interop.

While 10.16.5 adds exports.import and exports.require to package.json which changed the imported bundle from cjs to mjs in this case, thus default no longer works. Should there by any more issues with this bundle, please file bug to https://github.com/harttle/liquidjs/issues/new, let's see what we can do.

[jeromecoupe]

I can report that overriding the liquidjs version in package.json solves the problem in my case.

  "overrides": {
    "@11ty/eleventy": {
      "liquidjs": "10.16.4"
    }
  }

[lexoyo]

I'm curious why we don't have a package-lock.json in the project? Added to the fact that the dependencies have no exact versions it seems dangerous

[rabbithawk256]

Can repro your fix, @jeromecoupe - ran npm install liquidjs@10.16.4 and Eleventy now runs without issue

[zachleat]

cc @harttle

[harttle]

Guys, please try latest v10.16.7, which reverted some changes on 10.16.5.

[jeromecoupe]

Removed the override in package.json, nuked node_modules folder and package-lock.json, fresh npm i with @11ty/eleventy 3.0.0-alpha.18 which now installs liquidjs 10.16.15. Happy to report that everything is back to normal.

[zachleat]

Some package-lock.json discussion at #3100—please chime in @lexoyo!

[zachleat]

This issue will affect folks that freshly installed Eleventy v3 when liquidjs@10.16.5 was the latest version but will not affect folks installing Eleventy with current v3 releases moving forward.

v3.0.0-beta.2 and v3.0.0-alpha.19 will ship with "liquidjs": "^10.16.7"

[zachleat]

Will consider the PR at #3426 separately, thank you!