Error thrown from `acorn` dependency when serving site using v3.0.0 canary

[paulrobertlloyd]

trafficstars

Operating system

macOS Sonoma 14.2

Eleventy

3.0.0-alpha.2

Describe the bug

Hello from a courageous canary tester! 👋

I have upgraded to 3.0.0-alpha.2, and converted my project from CommonJS to ESM. The site builds without error (npx eleventy), but when serving (npx eleventy --serve) the following error is thrown:

[11ty] Unexpected token (9:33) (via SyntaxError)
[11ty] 
[11ty] Original error stack trace: SyntaxError: Unexpected token (9:33)
[11ty]     at pp$4.raise (/Users/paulrobertlloyd/Sites/paulrobertlloyd-v4/node_modules/acorn/dist/acorn.js:3571:15)
[11ty]     at pp$9.unexpected (/Users/paulrobertlloyd/Sites/paulrobertlloyd-v4/node_modules/acorn/dist/acorn.js:772:10)
[11ty]     at pp$9.semicolon (/Users/paulrobertlloyd/Sites/paulrobertlloyd-v4/node_modules/acorn/dist/acorn.js:749:68)
[11ty]     at pp$8.parseImport (/Users/paulrobertlloyd/Sites/paulrobertlloyd-v4/node_modules/acorn/dist/acorn.js:1845:10)
[11ty]     at pp$8.parseStatement (/Users/paulrobertlloyd/Sites/paulrobertlloyd-v4/node_modules/acorn/dist/acorn.js:948:51)
[11ty]     at pp$8.parseTopLevel (/Users/paulrobertlloyd/Sites/paulrobertlloyd-v4/node_modules/acorn/dist/acorn.js:829:23)
[11ty]     at Parser.parse (/Users/paulrobertlloyd/Sites/paulrobertlloyd-v4/node_modules/acorn/dist/acorn.js:601:17)
[11ty]     at Function.parse (/Users/paulrobertlloyd/Sites/paulrobertlloyd-v4/node_modules/acorn/dist/acorn.js:651:37)
[11ty]     at Object.parse (/Users/paulrobertlloyd/Sites/paulrobertlloyd-v4/node_modules/acorn/dist/acorn.js:5960:19)
[11ty]     at findByContents (/Users/paulrobertlloyd/Sites/paulrobertlloyd-v4/node_modules/@11ty/dependency-tree-esm/main.js:40:18)

I am using 11ty’s default dev server.

Branch: https://github.com/paulrobertlloyd/paulrobertlloyd-v4/tree/eleventy-esm Upgrade commit: https://github.com/paulrobertlloyd/paulrobertlloyd-v4/commit/ba4cd6461ad31351040a040498bc91661bae7f99

Reproduction steps

No response

Expected behavior

No response

Reproduction URL

No response

Screenshots

No response

[KevinGimbel]

I'm seeing the same issue on MacOS.

$ npx @11ty/eleventy --serve
(node:24863) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:24863) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
[11ty] Writing docs/blog/index.html from ./src/blog.njk
[...] Lots of writing happening here
[11ty] Benchmark    402ms  76%     1× (Data) `./src/_data/blog.js`
[11ty] Copied 6 files / Wrote 40 files in 0.53 seconds (13.3ms each, v3.0.0-alpha.2)
[11ty] Eleventy CLI Error: (more in DEBUG output)
[11ty] Unexpected token (2:58) (via SyntaxError)
[11ty] 
[11ty] Original error stack trace: SyntaxError: Unexpected token (2:58)
[11ty]     at pp$4.raise (/Users/kevin/Development/websites/kevin.gimbel.dev/node_modules/acorn/dist/acorn.js:3571:15)
[11ty]     at pp$9.unexpected (/Users/kevin/Development/websites/kevin.gimbel.dev/node_modules/acorn/dist/acorn.js:772:10)
[11ty]     at pp$9.semicolon (/Users/kevin/Development/websites/kevin.gimbel.dev/node_modules/acorn/dist/acorn.js:749:68)
[11ty]     at pp$8.parseImport (/Users/kevin/Development/websites/kevin.gimbel.dev/node_modules/acorn/dist/acorn.js:1845:10)
[11ty]     at pp$8.parseStatement (/Users/kevin/Development/websites/kevin.gimbel.dev/node_modules/acorn/dist/acorn.js:948:51)
[11ty]     at pp$8.parseTopLevel (/Users/kevin/Development/websites/kevin.gimbel.dev/node_modules/acorn/dist/acorn.js:829:23)
[11ty]     at Parser.parse (/Users/kevin/Development/websites/kevin.gimbel.dev/node_modules/acorn/dist/acorn.js:601:17)
[11ty]     at Function.parse (/Users/kevin/Development/websites/kevin.gimbel.dev/node_modules/acorn/dist/acorn.js:651:37)
[11ty]     at Object.parse (/Users/kevin/Development/websites/kevin.gimbel.dev/node_modules/acorn/dist/acorn.js:5960:19)
[11ty]     at findByContents (/Users/kevin/Development/websites/kevin.gimbel.dev/node_modules/@11ty/dependency-tree-esm/main.js:40:18)

[what1s1ove]

I had this issue when I tried to import a json file via Import attributes (https://nodejs.org/docs/latest-v18.x/api/esm.html#import-attributes). I just changed it to

let packageJson = JSON.parse(
	(await readFile(new URL(`package.json`, import.meta.url))).toString(),
)

But definitely want to return to Import attributes soon 🙏

[KevinGimbel]

@what1s1ove You may need to import like so

import eleventyPackage from "@11ty/eleventy/package.json" with { type: 'json' };

That's what solved the JSON import for me. In your case I guess you'd do

import packageJson from "./package.json" with { type: 'json' };

The with { type: 'json' } tells node to parse this file in JSON and return a JSON object.

---

Edit: Formatting

[paulrobertlloyd]

Ah, I’m using Node v20 for which type is now used instead of assert. I updated my import to use the revised syntax, yet I still get the same error (when serving, not building).

[KevinGimbel]

The error seems unrelated to the package.json import.

I get the error as well yet the building works just fine. :shrug:

[what1s1ove]

@what1s1ove You may need to import like so

import eleventyPackage from "@11ty/eleventy/package.json" with { type: 'json' };

That's what solved the JSON import for me. In your case I guess you'd do

import packageJson from "./package.json" with { type: 'json' };

The with { type: 'json' } tells node to parse this file in JSON and return a JSON object.

Edit: Formatting

Ah, I’m using Node v20 for which type is now used instead of assert. I updated my import to use the revised syntax, yet I still get the same error (when serving, not building).

Hello guys! Yes, the issue lies specifically with import-attributes. Acorn only supports the syntax that is part of ECMAScript. Since import-attributes are still not part of ECMAScript (this proposal at stage 3), acorn doesn't understand this syntax.

https://github.com/acornjs/acorn/issues/1228#issuecomment-1670192079 (the issue is about decorators, but this proposal is also on the stage 3 right now)

NOTE: Only 'stage 4' (finalized) ECMAScript features are being implemented by Acorn. Other proposed new features must be implemented through plugins.

[paulrobertlloyd]

Thanks @what1s1ove; your solution earlier in this thread works, so I’ll use that for now. Thanks for the background info 🙏

[what1s1ove]

The error seems unrelated to the package.json import.

Perhaps you are using a different syntax that is not part of ECMAScript (it is at stage 3 or below).

I get the error as well yet the building works just fine. 🤷

As I understand, acorn is used only in development server. If you use import-attributes for build only (without using the development server), there should be no errors.

[KevinGimbel]

As I understand, acorn is used only in development server. If you use import-attributes for build only (without using the development server), there should be no errors.

Interesting, thanks for the background info!

I'm only using it to get the 11ty version used for building the site so I guess I can work around it somehow until it is fixed upstream.

[uncenter]

You can make a require() to import JSON data like you would in CJS.

import { createRequire } from "node:module";
const require = createRequire(import.meta.url);

And then you can just import JSON data using it like so:

const data = require("data.json");

[Zearin]

I’ve been getting this issue, too. I’m using the with { type: 'json' } syntax.

What I don’t understand is: Why does it only error on --serve (but not build)?

[zachleat]

Going to track this one here to circle back when Import Attributes are stable in Node.js (and included a summary of this thread as well!): https://github.com/11ty/eleventy-dependency-tree-esm/issues/2

Thanks y’all!

[zachleat]

Improved the error messaging here in 3.0.0-alpha.14 after looking at an issue from @bobmonsour’s 11ty bundle (https://github.com/bobmonsour/11tybundle.dev/blob/839b73059e3efce10369829125d8ebc5dba89fdc/src/_data/bundledata.js) (cc @uncenter too):

(node:19692) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
[11ty] Writing ./_site/index.html from ./index.njk
[11ty] Wrote 1 file in 0.03 seconds (v3.0.0-alpha.14)
[11ty] Eleventy CLI Error: (more in DEBUG output)
[11ty] 1. A problem was encountered looking for JavaScript dependencies in ESM file: ./_data/first.js. This only affects --watch and --serve behavior and does not affect your build. (via EleventyBaseError)
[11ty] 2. Unexpected token (1:40) (via SyntaxError)
[11ty] 
[11ty] Original error stack trace: SyntaxError: Unexpected token (1:40)
[11ty]     at pp$4.raise (/Users/zachleat/Code/eleventy/node_modules/acorn/dist/acorn.js:3586:15)
[11ty]     at pp$9.unexpected (/Users/zachleat/Code/eleventy/node_modules/acorn/dist/acorn.js:772:10)
[11ty]     at pp$9.semicolon (/Users/zachleat/Code/eleventy/node_modules/acorn/dist/acorn.js:749:68)
[11ty]     at pp$8.parseImport (/Users/zachleat/Code/eleventy/node_modules/acorn/dist/acorn.js:1851:10)
[11ty]     at pp$8.parseStatement (/Users/zachleat/Code/eleventy/node_modules/acorn/dist/acorn.js:948:51)
[11ty]     at pp$8.parseTopLevel (/Users/zachleat/Code/eleventy/node_modules/acorn/dist/acorn.js:829:23)
[11ty]     at Parser.parse (/Users/zachleat/Code/eleventy/node_modules/acorn/dist/acorn.js:601:17)
[11ty]     at Function.parse (/Users/zachleat/Code/eleventy/node_modules/acorn/dist/acorn.js:651:37)
[11ty]     at Object.parse (/Users/zachleat/Code/eleventy/node_modules/acorn/dist/acorn.js:6024:19)
[11ty]     at findByContents (/Users/zachleat/Code/eleventy/node_modules/@11ty/dependency-tree-esm/main.js:40:18)

The awkward part of this issue is that Node.js will parse these fine (with an experimental warning) but the acorn dependency fails with an error. So your build will succeed without issue but the --watch or --serve step post-build will fail.