Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Poor error message in production build when client directive used on astro component #11623

Open
1 task
felixhuttmann opened this issue Aug 5, 2024 · 1 comment · May be fixed by #12078
Open
1 task

Poor error message in production build when client directive used on astro component #11623

felixhuttmann opened this issue Aug 5, 2024 · 1 comment · May be fixed by #12078
Labels
- P2: nice to have Not breaking anything but nice to have (priority) feat: errors Related to error handling / messages (scope)

Comments

@felixhuttmann
Copy link

felixhuttmann commented Aug 5, 2024 •
edited
Loading

Astro Info

Astro                    v4.13.1
Node                     v20.9.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Directives like client:idle should only be used on framework components. When a client directive is used on an astro component, the command npm run dev prints a helpful error message:

You are attempting to render <Header client:idle />, but Header is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.

However, the site renders normally in dev mode, and the developer can easily overlook this error message in the dev mode terminal.

In contrast, the command npm run build prints a confusing error message in this case:

 building client (vite)
11:04:29 [vite] ✓ 0 modules transformed.
11:04:29 [ERROR] [vite] x Build failed in 5ms
[astro:build] The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '$REPO_ROOT/\x00astro-entry:$REPO_ROOT/src/components/tsconfig.json'
file: astro-entry:$REPO_ROOT/src/components/Header.astro
  Stack trace:
    at Object.stat (node:fs:1581:10)
    at find (file://$REPO_ROOT/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:18324:2)
    at async loadTsconfigJsonForFile (file://$REPO_ROOT/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:19372:20)
    at async compileAstro (file://$REPO_ROOT/node_modules/astro/dist/vite-plugin-astro/compile.js:14:21)
    at async transform (file://$REPO_ROOT/node_modules/rollup/dist/es/shared/node-entry.js:18787:16)

Developers will usually run only astro build in the CI pipeline.

Enough people have stumbled over this for there to be a stackoverflow question for it: https://stackoverflow.com/questions/77508923/the-argument-path-must-be-a-string-uint8array-or-url-without-null-bytes-rec

What's the expected result?

The same helpful error message that is printed in dev mode should also be printed when running npm run build.

Link to Minimal Reproducible Example

none

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Aug 5, 2024
@Princesseuh Princesseuh added - P2: nice to have Not breaking anything but nice to have (priority) feat: errors Related to error handling / messages (scope) and removed needs triage Issue needs to be triaged labels Aug 5, 2024
@Amichaiz Amichaiz linked a pull request Sep 26, 2024 that will close this issue
Open
@Firaenix
Copy link

Firaenix commented Sep 28, 2024 •
edited
Loading

Thank god for this issue!
I was chasing this error for ages.

Would be great to have this sorted.

What I did was rewrite one of my Svelte components as an Astro component and did a bunch of other work, so it ended up getting lost in my other changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
- P2: nice to have Not breaking anything but nice to have (priority) feat: errors Related to error handling / messages (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Update compile.ts Deals with Hydration directive error Amichaiz/astro
3 participants
@Princesseuh @Firaenix @felixhuttmann