Skip to content

fix(examples): resolve directory path in matching-build-files tokens for ESM#1630

Merged
jorenbroekema merged 3 commits intostyle-dictionary:mainfrom
Yeom-JinHo:docs/matching-build
Jan 31, 2026
Merged

fix(examples): resolve directory path in matching-build-files tokens for ESM#1630
jorenbroekema merged 3 commits intostyle-dictionary:mainfrom
Yeom-JinHo:docs/matching-build

Conversation

@Yeom-JinHo
Copy link
Contributor

closed #1509

Description

This PR fixes an ENOENT error in the examples/advanced/matching-build-files example when running npm run build.

The issue was caused by passing import.meta.url (a file URL string, e.g. file:///.../tokens/index.js) directly into Node’s fs.readdirSync, which expects a filesystem path. As a result, Node attempted to scan a non-existent path that literally starts with file:///..., producing ENOENT.

This change converts the module URL to a real filesystem path and ensures we pass the tokens directory (not the index.js file) to readdirSync.

Changes

  • Fix path resolution for ESM: Convert import.meta.url → filesystem path via fileURLToPath, then derive the directory using dirname.
  • Correct scan target: Scan the tokens/ directory instead of mistakenly scanning the tokens/index.js file URL.
  • (Optional) Improve performance: Use readdirSync(..., { withFileTypes: true }) + Dirent.isDirectory() to avoid per-entry statSync.

Motivation

  • The example currently fails with an error like:
    • Error: ENOENT: no such file or directory, scandir 'file:///.../tokens/index.js'
  • In ESM, import.meta.url returns an absolute file: URL, not a plain path string, so it must be converted before using it with path-based fs APIs.
  • Fixing this improves the reliability of the example and avoids confusion for users following the repo examples.

@changeset-bot
Copy link

changeset-bot bot commented Jan 30, 2026

⚠️ No Changeset found

Latest commit: f9aff08

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@netlify
Copy link

netlify bot commented Jan 30, 2026

Deploy Preview for styledictionaryjs ready!

Name Link
🔨 Latest commit f9aff08
🔍 Latest deploy log https://app.netlify.com/projects/styledictionaryjs/deploys/697e0d9c2a1837000807b94b
😎 Deploy Preview https://deploy-preview-1630--styledictionaryjs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@Yeom-JinHo
Copy link
Contributor Author

@dbanksdesign @jorenbroekema
While updating the examples, I noticed they’re all written for v4. Are there plans to upgrade the examples to v5?

jorenbroekema
jorenbroekema previously approved these changes Jan 31, 2026
Copy link
Collaborator

@jorenbroekema jorenbroekema left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll add a commit to apply my suggestion, and fix some readme snippets syntax highlighting. Thanks for raising this one.

I'll try to get back to your other PRs but I've been trying to get the pretty big Logging PR over the finish line first before I dive back into the sorting topic :) which requires a bit more mental capacity haha

Comment on lines +1 to +12
import { readdirSync } from 'node:fs';
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';

const tokensDir = dirname(fileURLToPath(import.meta.url));

const dirs = (p) =>
readdirSync(p, { withFileTypes: true })
.filter((d) => d.isDirectory())
.map((d) => d.name);

export default dirs(tokensDir);
Copy link
Collaborator

@jorenbroekema jorenbroekema Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { readdirSync } from 'node:fs';
import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const tokensDir = dirname(fileURLToPath(import.meta.url));
const dirs = (p) =>
readdirSync(p, { withFileTypes: true })
.filter((d) => d.isDirectory())
.map((d) => d.name);
export default dirs(tokensDir);
import { readdirSync } from 'node:fs';
const dirs = (p) =>
readdirSync(p, { withFileTypes: true })
.filter((d) => d.isDirectory())
.map((d) => d.name);
export default dirs(import.meta.dirname);

This is simpler I think. And supported in Node LTS version atm I think (v20.11+, v21.2+)

Let me know what you think @Yeom-JinHo , if it works on your end I'll merge this :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, this works great on my end 👍
Tested locally and everything looks good with my setup. Feel free to merge it — thanks!

@Yeom-JinHo
Copy link
Contributor Author

@jorenbroekema
No worries at all — I know you’ve been busy, and I also wouldn’t want my sorting work to be merged in an unstable state. Please take your time reviewing it.

When I first started using this library, I relied a lot on the v4 examples. Right now it looks like all the examples are still written only for v4. Do you have any plans to upgrade the examples to v5?

If there is a plan, I’d be happy to contribute gradually over the longer term.

@jorenbroekema
Copy link
Collaborator

When I first started using this library, I relied a lot on the v4 examples. Right now it looks like all the examples are still written only for v4. Do you have any plans to upgrade the examples to v5?

Yes we have an issue planned for the v6 milestone that would put the example in its own monorepo workspace, possibly a separate workspace for each example if it has a separate package.json + dependencies.

See #1263

I am open to updating the examples for v5 though, I agree they were a bit left behind. Shouldn't be too many changes, since the v5 update was pretty subtle and non-breaking for most use cases.

@Yeom-JinHo
Copy link
Contributor Author

When I first started using this library, I relied a lot on the v4 examples. Right now it looks like all the examples are still written only for v4. Do you have any plans to upgrade the examples to v5?

Yes we have an issue planned for the v6 milestone that would put the example in its own monorepo workspace, possibly a separate workspace for each example if it has a separate package.json + dependencies.

See #1263

I am open to updating the examples for v5 though, I agree they were a bit left behind. Shouldn't be too many changes, since the v5 update was pretty subtle and non-breaking for most use cases.

Totally makes sense — thanks for sharing the direction.

I’d like to get a deeper understanding of the library, so I’ll take things slowly and, if the examples need updates along the way, I’ll work on them.

Would you be okay with me updating each example workspace’s package.json to target the latest stable version (v5)?
(e.g. bumping style-dictionary to ^5.x and making any small adjustments if needed.)

@jorenbroekema
Copy link
Collaborator

Yep that sounds like a good start!

@jorenbroekema jorenbroekema merged commit db08d62 into style-dictionary:main Jan 31, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Matching Build Files fails to build with ENOENT

2 participants