Fails to build React-UI

[kroyee]

Describe the bug
yarn build for the React-UI fails.

To Reproduce
Follow https://traggo.net/dev/setup/
When you reach the go run main.go you get:
ui/serve.go:14:12: pattern build: no matching files found

To fix it, try to build the React-UI

super@DESKTOP-4SHA1CF:~/traggo/server/ui$ yarn build
yarn run v1.22.19
$ react-scripts build
Creating an optimized production build...
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/home/super/traggo/server/ui/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/super/traggo/server/ui/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/super/traggo/server/ui/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/super/traggo/server/ui/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/super/traggo/server/ui/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/super/traggo/server/ui/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/super/traggo/server/ui/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/super/traggo/server/ui/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/super/traggo/server/ui/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/super/traggo/server/ui/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/super/traggo/server/ui/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/super/traggo/server/ui/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/super/traggo/server/ui/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at /home/super/traggo/server/ui/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9
/home/super/traggo/server/ui/node_modules/react-scripts/scripts/build.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/home/super/traggo/server/ui/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/super/traggo/server/ui/node_modules/webpack/lib/NormalModule.js:417:16)
    at /home/super/traggo/server/ui/node_modules/webpack/lib/NormalModule.js:452:10
    at /home/super/traggo/server/ui/node_modules/webpack/lib/NormalModule.js:323:13
    at /home/super/traggo/server/ui/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/super/traggo/server/ui/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/super/traggo/server/ui/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/super/traggo/server/ui/node_modules/react-scripts/node_modules/babel-loader/lib/index.js:55:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v20.9.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I found this SO post that seems to be related.
https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported

Did not dig any further.

[jmattheis]

Set the variable as described in the SO answer: export NODE_OPTIONS=--openssl-legacy-provider

[kroyee]

This works. 👍
As a side note, you should probably move over to using vite instead of CRA.

[zumoshi]

I also hit the same issue when trying to build the project. the env var works but I usually consider needing these workarounds as code smell.
I second vite as a more modern/maintained build system.

Speaking of developer experience, is there any way to hot-reload/watch ui changes? I didn't find any notes about it in the docs, but the current way I'm doing it of: make change, run yarn build, recompile/restart go process (since it embeds the ui files) is not very developer friendly.
Maybe it's already there in your current setup and I'm just missing it, but in vite you can set it up so in dev vite would act as a reverse proxy passing api calls back to go, but would serve ui directly itself. With watch and fast incremental builds and hot-reload built-in without needing to change your code on the go side.

I was also wondering about use of makefiles instead of go generate ./... for graphql.
with //go:generate go run [repo] [flags] go can download dev dependencies/tools needed automagically without needing to install them globally first.

But now I'm just nitpicking. Just having github workflows puts you ahead of most projects already. Thanks for your work.

[jmattheis]

I also hit the same issue when trying to build the project. the env var works but I usually consider needing these workarounds as code smell. I second vite as a more modern/maintained build system.

Yeah, I agree. Most of my projects already use it, but as there was no frequent development on this project migrating to a different buildtool doesn't seems like a good investment of my time.

Speaking of developer experience, is there any way to hot-reload/watch ui changes?

You can use yarn start

I was also wondering about use of makefiles instead of go generate ./... for graphql.

I think these are two distinct requests. First is the use of Makefile, which I don't think is bad as it, a lot Go projects use it as some kind of task runner. The graphql generate could be executed via go generate, and then the makefile could execute "go generate".

Second is using "go run", I'm not against it, as the time of writing this project, it wasn't supported yet, at least not with specifying a version.

[Sleepful]

Same issue, setting export NODE_OPTIONS=--openssl-legacy-provider fixed it too.

This step should be added in the docs:

https://traggo.net/dev/setup/#requirements