node: --openssl-legacy-provider is not allowed in NODE_OPTIONS

[Mathias Winkel]

When running npm start on my MacBook (macOS 12.6.2), I am getting the following error message:

node: --openssl-legacy-provider is not allowed in NODE_OPTIONS

This can be fixed by removing the respective environment variable definition inside package.json:

diff --git a/web_server/frontend/package.json b/web_server/frontend/package.json
index 003148c..401bdbe 100644
--- a/web_server/frontend/package.json
+++ b/web_server/frontend/package.json
@@ -24,7 +24,7 @@
   },
   "scripts": {
     "postinstall": "cp -r ./node_modules/@emdgroup-liquid/liquid/dist/liquid/assets ./public/liquid/assets",
-    "start": "NODE_OPTIONS=--openssl-legacy-provider craco start",
+    "start": "craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"

Is this the right solution? - If yes, it might make sense to update the repo accordingly.

For reference, the versions of my homebred-installed software:

> node --version
v19.3.0
> npm --version
9.2.0
> yarn --version
1.22.19

[Boris Diakur]

Hi @dasmy 👋

Thanks for bringing this up.
Yes, if you run on Node v19, you can safely remove the --openssl-legacy-provider option.

Regarding updating the sandbox: I wanted to do this myself for quite some time now, and now I did, thanks to your issue 😊
create-react-app / craco had issues that made it difficult to update a couple of dependencies. There were issues with Tailwind, PostCSS and what not. These issues made it difficult to transition the sandbox to Stackblitz (where all our other sandbox apps are located).
So I just replaced craco with Vite and updated multiple dependencies. Basically everything works the same as before. Apart from a couple of changes in the build pipeline (Tailwind integration, assets copying and Vite specific settings) everything is still the same. Well, not quite: I also updated React to v18 and had to change the following:

// Before
import { render } from 'react-dom'
const container = document.getElementById('app')
render(<App tab="home" />, container)

// After
import { createRoot } from 'react-dom/client'
const container = document.getElementById('app')
const root = createRoot(container) // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />)

Let me know if you have questions or anything.

[Mathias Winkel]

Thanks for taking care of this. Runs as expected.
Now I’ll have to learn some React and JavaScript and more stuff to make proper use of it 😬