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

Shared entrypoint in injectRoute() Removes Client-Side Scripts in SSR Build #12171

Open
1 task done
andrenanninga opened this issue Oct 9, 2024 · 0 comments · May be fixed by #12392
Open
1 task done

Shared entrypoint in injectRoute() Removes Client-Side Scripts in SSR Build #12171

andrenanninga opened this issue Oct 9, 2024 · 0 comments · May be fixed by #12392
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)

Comments

@andrenanninga
Copy link

andrenanninga commented Oct 9, 2024 •
edited
Loading

Astro Info

Astro                    v4.15.12
Node                     v18.20.2
System                   macOS (arm64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             routing

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

No response

Describe the Bug

Description: In a project using two injected routes with the same entrypoint, the client-side script is missing from one route after building the project, preventing dynamic behavior (e.g., a clock) from working.

Steps to Reproduce:

  1. Define two injected routes in astro.config.mjs with the same entrypoint: 
    injectRoute({
  pattern: '/hello',
  entrypoint: './src/routes/template.astro'
});

injectRoute({
  pattern: '/blog/[...slug]',
  entrypoint: './src/routes/template.astro'
});
  2. Run the project in dev mode using npm run dev.
  3. Navigate to http://localhost:4321/hello and http://localhost:4321/blog/welcome. Both routes correctly display a dynamic clock.
  4. Build and serve the project using npm run build && npm run server.
  5. Navigate to the same routes.

Expected Behavior:
Both /hello and /blog/welcome should display a dynamic clock.

Actual Behavior:

  • /hello displays the clock as expected.
  • /blog/welcome does not display the clock. The necessary <script> is missing from the page's source.

Workaround:
Removing the /hello injected route fixes the issue, and the clock works as expected on /blog/ URLs after the build.

Relevant Sources:

  • view-source:http://localhost:4321/hello 
    <!DOCTYPE html><script>window.localserviceSettings = {};</script><script src="/[email protected]"></script><script type="module">document.getElementById("time");setInterval(()=>{time.innerText=new Date().toISOString()},100);</script><a href="/">back home</a> <h1>/hello</h1> <span id="time"></span>
  • view-source:http://localhost:4321/blog/welcome 
    <!DOCTYPE html><a href="/">back home</a> <h1>/blog/welcome</h1> <span id="time"></span>

What's the expected result?

All routes using the same entrypoint should include the necessary client-side scripts and behave consistently in both development and production builds.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-csdu7e?file=README.md

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 Oct 9, 2024
@ematipico ematipico added - P3: minor bug An edge case that only affects very specific usage (priority) and removed needs triage Issue needs to be triaged labels Oct 9, 2024
@apatel369 apatel369 linked a pull request Nov 7, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix script handling in injectRoute shared entrypoint during SSR apatel369/astro
2 participants
@ematipico @andrenanninga