Import attributes not yet supported (Error thrown from `acorn` dependency) #3128

paulrobertlloyd · 2023-12-19T12:24:43Z

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: paulrobertlloyd/paulrobertlloyd-v4@ba4cd64

Reproduction steps

No response

Expected behavior

No response

Reproduction URL

No response

Screenshots

No response

The text was updated successfully, but these errors were encountered:

KevinGimbel · 2023-12-20T15:42:22Z

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 · 2023-12-23T07:12:37Z

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 · 2023-12-30T11:50:08Z

@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 · 2023-12-30T12:09:48Z

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 · 2023-12-30T12:12:13Z

The error seems unrelated to the package.json import.

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

what1s1ove · 2023-12-30T12:12:25Z

@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.

acornjs/acorn#1228 (comment) (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 · 2023-12-30T12:13:25Z

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

what1s1ove · 2023-12-30T12:17:54Z

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 · 2023-12-30T14:39:09Z

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 · 2024-01-05T14:11:55Z

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 · 2024-01-14T17:09:59Z

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 · 2024-05-01T14:06:48Z

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!): 11ty/eleventy-dependency-tree-esm#2

Thanks y’all!

zachleat · 2024-06-27T14:08:43Z

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.

paulrobertlloyd added the needs-triage label Dec 19, 2023

zachleat added this to the Eleventy 3.0.0 milestone Dec 19, 2023

zachleat added bug and removed needs-triage labels Dec 19, 2023

This was referenced Dec 23, 2023

Configuration API (UserConfig) types, TypeScript mega issue for 3.0 #3097

Closed

Replace await readFile(pathTojson) with import attributes in 11ty config what1s1ove/whatislove.dev#281

Open

zachleat mentioned this issue May 1, 2024

Error parsing files using import attributes 11ty/eleventy-dependency-tree-esm#2

Open

zachleat changed the title ~~Error thrown from acorn dependency when serving site using v3.0.0 canary~~ Import attributes not yet supported (Error thrown from acorn dependency) May 1, 2024

zachleat added education and removed bug labels May 1, 2024

zachleat closed this as completed May 1, 2024

zachleat added a commit that referenced this issue Jun 27, 2024

Improved error messaging for #3128

743cd86

uncenter mentioned this issue Jul 2, 2024

JS import attributes break watch #3344

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Import attributes not yet supported (Error thrown from `acorn` dependency) #3128

Import attributes not yet supported (Error thrown from `acorn` dependency) #3128

paulrobertlloyd commented Dec 19, 2023 •

edited

Loading

KevinGimbel commented Dec 20, 2023

what1s1ove commented Dec 23, 2023

KevinGimbel commented Dec 30, 2023 •

edited

Loading

paulrobertlloyd commented Dec 30, 2023 •

edited

Loading

KevinGimbel commented Dec 30, 2023

what1s1ove commented Dec 30, 2023 •

edited

Loading

paulrobertlloyd commented Dec 30, 2023

what1s1ove commented Dec 30, 2023 •

edited

Loading

KevinGimbel commented Dec 30, 2023

uncenter commented Jan 5, 2024 •

edited

Loading

Zearin commented Jan 14, 2024

zachleat commented May 1, 2024

zachleat commented Jun 27, 2024 •

edited

Loading

Import attributes not yet supported (Error thrown from acorn dependency) #3128

Import attributes not yet supported (Error thrown from acorn dependency) #3128

Comments

paulrobertlloyd commented Dec 19, 2023 • edited Loading

Operating system

Eleventy

Describe the bug

Reproduction steps

Expected behavior

Reproduction URL

Screenshots

KevinGimbel commented Dec 20, 2023

what1s1ove commented Dec 23, 2023

KevinGimbel commented Dec 30, 2023 • edited Loading

paulrobertlloyd commented Dec 30, 2023 • edited Loading

KevinGimbel commented Dec 30, 2023

what1s1ove commented Dec 30, 2023 • edited Loading

paulrobertlloyd commented Dec 30, 2023

what1s1ove commented Dec 30, 2023 • edited Loading

KevinGimbel commented Dec 30, 2023

uncenter commented Jan 5, 2024 • edited Loading

Zearin commented Jan 14, 2024

zachleat commented May 1, 2024

zachleat commented Jun 27, 2024 • edited Loading

Import attributes not yet supported (Error thrown from `acorn` dependency) #3128

Import attributes not yet supported (Error thrown from `acorn` dependency) #3128

paulrobertlloyd commented Dec 19, 2023 •

edited

Loading

KevinGimbel commented Dec 30, 2023 •

edited

Loading

paulrobertlloyd commented Dec 30, 2023 •

edited

Loading

what1s1ove commented Dec 30, 2023 •

edited

Loading

what1s1ove commented Dec 30, 2023 •

edited

Loading

uncenter commented Jan 5, 2024 •

edited

Loading

zachleat commented Jun 27, 2024 •

edited

Loading