Preact-cli: Build with --no-prerender flag is broken

[tadejstanic]

Do you want to request a _feature_ or report a _bug_?
Bug

What is the current behaviour?
When you build a project with preact build --no-prerender the css is not applied to the components.

If the current behaviour is a bug, please provide the steps to reproduce.

1. Clone https://github.com/tadejstanic/test-preact
2. Have preact-cli v3.0.0-rc.8
3. Run preact build --no-prerender
4. Test build with npx serve build
   You will see the css is not applied.

If you run preact build and then test the build you'll see the right output.

What is the expected behaviour?
A fully functional production build.

Please mention other relevant information.
The project was created form preact typescript template - preact create typescript

Please paste the results of preact info here.
System:
OS: macOS 10.15.3
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
Yarn: 1.21.1 - ~/.yarn/bin/yarn
npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
Browsers:
Chrome: 80.0.3987.106
Firefox: 72.0.2
Safari: 13.0.5
npmPackages:
preact: ^10.3.1 => 10.3.1
preact-cli: ^3.0.0-next.19 => 3.0.0-rc.8
preact-render-to-string: ^5.1.4 => 5.1.4
preact-router: ^3.2.1 => 3.2.1
npmGlobalPackages:
preact-cli: 3.0.0-rc.8

[tadejstanic]

Update: It seems it's a regression bug. With [email protected] works as it should be.

[luhis]

i am seeing something very similar. Running a local debug server all is fine, but in my production builds some attributes are missing. For example my anchors are missing class names and the href in prod. Other bits of the app are fine, and i can see in the source that it should be setting the classes and href. Example is the Nav bar on my site https://codegolf.club

This is also present in RC.9 package

[luhis]

@tadejstanic i have pulled down your branch, and it looks similar to my problem. Here's the markup of your nav bar:
<nav><a>Home</a><a>Me</a><a>John</a></nav>

But here's the source to the John element:

Object(r.h)(c.Link, {
            activeClassName: a.active,
            href: "/profile/john"
        }, "John")))

The issue is more than just CSS, but it's a bit beyond me

[Kokanm]

@luhis The Navbar component on your website is not imported in any of the router components, right? What I’ve found out is that only the router components and all of their children (descendant) components are rendered correctly. They have all of their correct attributes. 



But components that are not imported/used in any of the route components (or their children), like the header component, which is imported directly in the App.tsx in Tadej’s example, are missing their attributes.

[luhis]

@Kokanm you are correct. The nav bar is loaded in the base page, so it is outside any of the routes.

[Kokanm]

This change, introduced in #957 is whats causing the problem it seems. Reverting it fixes the issues.

[prateekbh]

Can you upgrade @preact/async-component?

[Kokanm]

@prateekbh I couldn't find that library. I assume you were talking about @preact/async-loader? I updated that one, and it didn't help.

Nevertheless I found where the problem is. root.tagName = 'SCRIPT' (uppercase) when we have the --no-prererender flag, so the root.tagName === 'script' condition is false.
Doing something like root.tagName.toLowerCase() === 'script' fixes it.

[prateekbh]

thats a nice catch.. mind sending the PR?