[email protected] + [email protected] + preact-cli

[jonathantneal]

Hello, I’m a new fan of Preact! I recently tried [email protected] and [email protected] alongside [email protected], but I am unable to create a production build.

Steps to Reproduce

1. Install Preact CLI:
   sh npm install -g preact-cli
2. Create a new project:
   sh preact create default my-project
3. See that the production build is successful:
   sh preact build
4. Update the Preact and Preact Router dependencies using their “next” releases:
   sh npm install preact@next preact-router@next
5. See that the production build now fails:
   sh preact build

Failure Details

The preact build command will fail with the following error message:

Unable to read file: ~/my-project/src/node_modules/preact-router/match.js

TypeError: props.children is not a function
method: render
at: ~/my-project/src/node_modules/preact-router/match.js:52:15

Source code:


This could be caused by using DOM or Web APIs.
Pre-render runs in node and has no access to globals available in browsers.

Consider wrapping code producing error in: 'if (typeof window !== "undefined") { ... }'

Alternatively use 'preact build --no-prerender' to disable prerendering.

See https://github.com/developit/preact-cli#pre-rendering for further information.

---

I’m having an amazing experience switching to Preact, and I specifically love the hands-off, closer-to-native flavor of JSX attributes, events, and rendering. I’m still able to develop with these pre-releases, and I’m using Hooks with total success. Thank you so much! I’m also aware that these pre-releases are not necessarily ready for production, but my hope is that identifying this issue will help stabilize future releases.

[ForsakenHarmony]

Can you try it with preact-cli@rc (both globally and locally)?

[jonathantneal]

Thanks, @ForsakenHarmony! I was able to get production builds working by following your advice.

For reference, here are the steps I took:

Steps to Resolve

1. Install Preact CLI (Release Candidate) globally:
   sh npm install -g preact-cli@rc
2. Create a new project:
   sh preact create default my-project
3. From the project directory, install Preact CLI (Release Candidate) locally:
   sh npm install --save-dev preact-cli@rc
4. Update the Preact and Preact Router dependencies using their “_next_” releases:
   sh npm install preact@next preact-router@next
5. See that the production build succeeds (with some warnings):
   sh preact build

Warning Details

The preact build command succeeds with 1 deprecation warning:

Build [=================== ] 95% (2.2s) emitting
 ssr-bundle.6e806.css ⏤  566 B (+566 B)
        ssr-bundle.js ⏤  3.65 kB (+3.65 kB)

Build [==                  ] 10% (0.0s) building(node:10550) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
Build [=================== ] 95% (3.3s) emitting
                        sw-esm.js ⏤  592 B (+592 B)
                            sw.js ⏤  588 B (+588 B)
                 bundle.7e56a.css ⏤  445 B (+445 B)
              bundle.41a80.esm.js ⏤  7.71 kB (+7.71 kB)
           polyfills.2c089.esm.js ⏤  1.98 kB (+1.98 kB)
       route-home.chunk.e6c71.css ⏤  74 B (+74 B)
    route-home.chunk.b2557.esm.js ⏤  289 B (+289 B)
    route-profile.chunk.62c75.css ⏤  77 B (+77 B)
 route-profile.chunk.2981b.esm.js ⏤  571 B (+571 B)
                  bundle.c3805.js ⏤  7.74 kB (+7.74 kB)
               polyfills.d1a8c.js ⏤  1.97 kB (+1.97 kB)
        route-home.chunk.f556a.js ⏤  291 B (+291 B)
     route-profile.chunk.65a51.js ⏤  679 B (+679 B)

Critters: inlined 237 B (26% of original 901 B) of bundle.7e56a.css.

I can ignore the deprecation method, and I will close this issue as it is resolved! Thank you, again.

---

Related Issue with Serve

I’ve noticed the preact serve command is no longer present. After checking the release notes from v3.0.0-next.1, I see it was removed with an expectation that “_it will be made available as its own package in the near future._”. Later, in the release notes from v3.0.0-next.2, an example mentions using the serve package. and so to resolve this issue I did the following:

1. Install serve:
   sh npm install --save-dev serve
2. Modify package.json to use serve:

     "start:production": "npm run -s serve",
     "start:development": "npm run -s dev",
     "build": "preact build",
-    "serve": "preact build && preact serve",
+    "serve": "preact build && serve build --single",
     "dev": "preact watch",
     "lint": "eslint src",
     "test": "jest"