node.jswebpacknpxpreactpreact-cli

The default project created by preact-cli "^3.4.2" doesn't run

I'm trying to start a preact project. But the default template created by preact-cli doesn't run. Here's what I did:

npx preact-cli create default my-project
cd my-project
npm install # this is not necessary I think
npm run dev

This results in an error message:

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)

Some versions:

operating system:

Distributor ID: Pop
Description:    Pop!_OS 22.04 LTS
Release:    22.04
Codename:   jammy

Online version on Stackblitz:

To make the question easier to answer, I created an online example on Stackblitz: https://stackblitz.com/edit/node-zby5qu?file=src%2Findex.js

This works!

As a first attempt at solving my problem, I copied the package-lock.json file from stackblitz to my local machine and reinstalled dependencies. But the problem persists.

So it seems that this is related to my local machine.

Related questions:

This question advises to switch to Node version 16: Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) And this issue https://github.com/matiasdelellis/facerecognition/issues/613 says that an outdated version of react-scripts can cause the problem.

By now Node 18.13 is the LTS version, I don't want to downgrade to 16. And as far as I can see, I have the latest version of preact-cli. From my package-lock file:

"node_modules/preact-cli": {
  "version": "3.4.4",
  "resolved": "https://registry.npmjs.org/preact-cli/-/preact-cli-3.4.4.tgz",

The latest version has been published 3 days ago: https://www.npmjs.com/package/preact-cli?activeTab=readme

Solution

  • Copying my answer from preact-cli's repo:

    Preact-CLI v3 is built upon Webpack v4, which does not support newer versions of Node out-of-the-box. Breaking change in Node caused a lot of ecosystem issues.

    However, you don't need to downgrade; instead, you can set NODE_OPTIONS=--openssl-legacy-provider. If you're on a non-Windows system, that can be done by making the following alteration to your package.json:

    {
  "scripts": {
    "dev": "NODE_OPTIONS=--openssl-legacy-provider preact watch"
    "build": "NODE_OPTIONS=--openssl-legacy-provider preact build"
  }
}

    We do have a prerelease published for CLI, available as 4.0.0-next.1. If you wish to use it, I'd recommend initializing a new project with the following:

    $ [npm init / yarn create] preact-cli default my-project