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

Duplicated content when using /routes when using CLI v4 #1777

Closed
charlier opened this issue Jan 25, 2023 · 5 comments
Closed

Duplicated content when using /routes when using CLI v4 #1777

charlier opened this issue Jan 25, 2023 · 5 comments

Comments

@charlier
Copy link

This is referencing the 4.0.0-next.1 pre-release, so apologies if this is the wrong place to capture unexpected new features. Please shout if it would be happier on the request ticket!

What is the current behaviour?
If you have a component in /routes directory it seems to get weirdly duplicated, so you end up with 2 instances (notice two Get Started... sections in the screenshot below).
Screenshot of duplicated content

Steps to Reproduce
A very quick repo step is to just a do an npm init preact-cli default defaultproj & notice everything in the <main> section is there twice.
Or as a minimal code example,

import Home from './routes/home';

export default function App() {
    return (
	<main>
		<Home />
	</main>
    );
}

What is the expected behaviour?
Content not to be duplicated.

Please mention any other relevant information
Renaming the /routes directory (or moving the file), or downgrading to 3.4.5 as a workaround.

Tested on macOS 11.7.3, using NodeJS 16.17.1 (npm 8.15.0) & 18.13.0 (npm 8.19.3)
@rschristian
Copy link
Member

This is a perfect place for v4 issues, thanks!

Are you seeing this when running the dev server or production builds?

@charlier
Copy link
Author

This was with both production builds, and when running preact watch.
Having more of a poke around - I think the /routes directory might just be a symptom of the issue - and I'm in fact spinning up two instances of the app.

Looking at the source of the page (or opening up the generated index.html) I can see the bundle is included within the <head> element with a defer attribute, & again at the bottom of the page body with a type="module" attribute, so if I go ahead and remove the latter from my template.ejs everything just works.

I'm guessing webpack thinks it's being helpful and adding one itself?

@rschristian
Copy link
Member

rschristian commented Jan 26, 2023 •
edited
Loading

Finally tracked it down (sorry if you were getting updates, I ran into a few red herrings and was posting here in case I got called away) and it's a really weird issue.

Indeed, it's html-webpack-plugin trying to be helpful and injecting tags (scripts as you noticed, but also styles, meta, etc), but Critters has a conflicting dependency and Webpack is resolving the plugins rather oddly. Will play around with module resolution, but Yarn for sure works, if that can be helpful.

@rschristian rschristian mentioned this issue Jan 26, 2023
Merged
@rschristian
Copy link
Member

I just published 4.0.0-next.2, which should correct this. Had to remove Critters though.

If you get a chance, try upgrading and let me know how you get on.

Thanks!

@charlier
Copy link
Author

Yup! that certainly seems to fix it! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@charlier @rschristian