The UDT "react-starter" plugin template does not properly build

UXP Developer Tool
1

I am running into issues getting the react-starter template working. I have checked other threads on similarly-named issues already, and I did not see anything that applied to my particular case:

I am on Mac OS Ventura 13.1.
These are the steps that are creating the problem:

  • Open UDT, create a new plugin, select react-starter.
  • Set all the appropriate names of the project, set the target version of photoshop to my current one.
  • I go into the readme.md in the directory. My npm version is 8.19.2. My node version is v18.12.1.
  • I check to make sure that the terminal is in the root of the directory, and then type npm install.
  • I have 6 high-severity vulnerabilities after running it. I am opting out of using npm audit fix --force as it may introduce some breaking changes, and I am trying to minimize the number of possible ways that this program might break via deviating from the instructions.

I believe the readme is incorrect when recommending that I type npm build. When I do that, I get the error:

Unknown command: "build"

Did you mean this?
    npm run build # run the "build" package script
  • So I type npm run build, which produces another error:
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

I understand the importance of reading the documentation, and that’s what I’ve been extensively doing, but it seems that the documentation is incorrect, here, as I am unable to get the basic template running, following the instructions of the readme.md exactly.

What is causing this to break?

One of the things I tried: run npm audit fix --force anyway, which produces the following error:

npm ERR! Invalid Version: npm:acorn-with-stage3

I am out of ideas, as google searches yield scarce results. I am also using the book “Adobe UXP Plugins Development with React JS” by Davide Barranca, including reading his blog and reading into possible breaking changes between Manifest V4 and V5. Specifically, the way show() is handled.

I read through this link and it looks like react-starter has been updated and no longer reflects things that would have broken, so I am guessing that it does not relate to this.

So, I am thoroughly out of ideas. My goal is to just get the react-starter template working as intended, so that I can have an empty framework.

Should I, instead, use a different starter template?

2

This issue smells like a local configuration issue rather than something that is wrong with the sample project. AKA, it’s unfortunately probably a your-computer problem and not one with the sample. SSL shouldn’t have anything to do with the project as it’s a protocol for HTTP stuff or maybe the innerworkings of the build system, not the project itself.

A quick google of the SSL error pulled up this: Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED - Stack Overflow. It may or may not be related, but if you’re on a bleeding edge version of node, you might want to switch to something like Node 16 or 14 and see if things work better.

Ideally you shouldn’t have to change Node versions to have a stable environment, but I’ve had enough issues with Node 17 that I avoid it. I pacify my frustrations by considering the versions of Node that hosts like Vercel or GitHub actions set as their defaults. Vercel doesn’t even support Node 17 and they only switched to Node 18 last November.

Alternatively, if you live a life where you can easily do a fresh install of your machine within an hour (a good skill and workflow setup to have as a developer), you can try starting with a blank slate and see if that resolves unexpected issues. This isn’t generally something you’ll want to do as it’s time consuming and destructive. However, if you’re in the “I run what stack overflow tells me to run” stage of your journey, it’s easy to accidentally sudo yourself into environment hell and some times a scorched earth approach is the cleanest one.

But definitely try to troubleshoot before you burn things down.

Good luck!

1 Like
3

Hello and thanks for the prompt reply! I looked more into the problem, and it seems that the issue was with the included webpack.config.js configuration file. I am not sure what caused the original error, but I was also getting this error:

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

Within the included webpack.config.js file, there’s the line:
devtool: 'cheap-eval-source-map'
which was out of order. I changed it to:
devtool: 'eval-cheap-source-map'
which allowed me to build everything with the latest npm version and following all the semantic versioning in the package.json file. After messing with nvm earlier, and changing specific versions of dependencies, I was unable to reproduce the openSSL error, but swapping the order in the devtool: instructions allowed for a successful build.

Now, I am able to run the panel as intended (as far as I can tell). One panel has a “Hello, there” play button, and the other panel has some RGB sliders. I did not use npm audit fix or any of the variants, opting to just leave things as is.

1 Like
4

Thanks for the pointers @rascheln & @cameronmcefee; I had the same issues.
The reason it doesn’t build is that Node 17 made some changes to SSL that the version of Webpack the React starter comes with doesn’t play nice with. Update Webpack to the latest version and make the quoted change to the `webpack.config.js and it’s all fixed.

I wouldn’t recommend downgrading Node - the patched SSL for a reason! :sweat_smile: