1

I am trying to build a react project in Visual Studio 2022 version 17.4.5. While building I got an error,

Severity    Code    Description Project File    Line    Suppression State
Error       0308010C:digital envelope routines::unsupported MyReact Error   0

I know that error is caused because I am using Node 18.14.2 and the old OpenSSL version. The workaround for that is setting up the NODE_OPTIONS variable like,

$env:NODE_OPTIONS = "--openssl-legacy-provider"

My question is how can I set that variable in Visual Studio so that the build is successful?

enter image description here

This is how my scripts portion looks,

  "scripts": {
    "test": "jest --verbose --colors",
    "test:ci": "jest --ci --watchAll=false --colors --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura --coverageThreshold '{}'",
    "test:coverage": "jest --verbose --coverage",
    "test:watch": "jest --verbose --watch",
    "test-debug": "node --inspect-brk --inspect ./node_modules/jest/bin/jest -i",
    "start": "concurrently \"webpack-dev-server --mode development --open\" \"npm:stubby\"",
    "start:iis": "webpack-dev-server --mode development --open --iis",
    "build": "webpack --progress --mode production",
    "build:dev": "webpack --progress --mode production --dev",
    "build:prod": "lingui add-locale en && lingui extract --clean && lingui compile && webpack --mode production",
    "lint": "eslint --cache --format codeframe --ext mjs,jsx,js src",
    "add-locale": "lingui add-locale",
    "extract": "lingui extract",
    "compile": "lingui compile",
    "stubby": "stubby --data stubs/stubby.yaml --watch"
  },

How should I update NODE_OPTIONS here?

UPDATE:

my .njsproj file,

<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003" ToolsVersion="4.0">
  <PropertyGroup>
    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion>
    <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
    <Name>MyReact</Name>
    <RootNamespace>MyReact</RootNamespace>
    <NpmInstallStampFile>node_modules/.install-stamp</NpmInstallStampFile>
  </PropertyGroup>
  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <SchemaVersion>2.0</SchemaVersion>
    <ProjectGuid>333a402b-7769-4bfe-bbd0-e516bafafecf</ProjectGuid>
    <ProjectHome>.</ProjectHome>
    <StartupFile>server.js</StartupFile>
    <SearchPath>
    </SearchPath>
    <WorkingDirectory>$(MSBuildProjectDirectory)</WorkingDirectory>
    <OutputPath>$(MSBuildProjectDirectory)\..\MyCtrl</OutputPath>
    <TargetFrameworkVersion>v4.0</TargetFrameworkVersion>
    <ProjectTypeGuids>{3AF33F2E-1136-4D97-BBB7-1795711AC8B8};{349c5851-65df-11da-9384-00065b846f21};{9092AA53-FB77-4645-B42D-1CCCA6BD08BD}</ProjectTypeGuids>
    <NodejsPort>1337</NodejsPort>
    <StartWebBrowser>true</StartWebBrowser>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)' == 'Debug' ">
    <DebugSymbols>true</DebugSymbols>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)' == 'Release' ">
    <DebugSymbols>true</DebugSymbols>
  </PropertyGroup>
  <ItemGroup>
    <Content Include="package.json" />
    <Content Include="README.md" />
  </ItemGroup>
  <Import Project="$(VSToolsPath)\Node.js Tools\Microsoft.NodejsToolsV2.targets" />
  <ProjectExtensions>
    <VisualStudio>
      <FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}">
        <WebProjectProperties>
          <UseIIS>False</UseIIS>
          <AutoAssignPort>True</AutoAssignPort>
          <DevelopmentServerPort>0</DevelopmentServerPort>
          <DevelopmentServerVPath>/</DevelopmentServerVPath>
          <IISUrl>http://localhost:48022/</IISUrl>
          <NTLMAuthentication>False</NTLMAuthentication>
          <UseCustomServer>True</UseCustomServer>
          <CustomServerUrl>http://localhost:1337</CustomServerUrl>
          <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
        </WebProjectProperties>
      </FlavorProperties>
      <FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}" User="">
        <WebProjectProperties>
          <StartPageUrl>
          </StartPageUrl>
          <StartAction>CurrentPage</StartAction>
          <AspNetDebugging>True</AspNetDebugging>
          <SilverlightDebugging>False</SilverlightDebugging>
          <NativeDebugging>False</NativeDebugging>
          <SQLDebugging>False</SQLDebugging>
          <ExternalProgram>
          </ExternalProgram>
          <StartExternalURL>
          </StartExternalURL>
          <StartCmdLineArguments>
          </StartCmdLineArguments>
          <StartWorkingDirectory>
          </StartWorkingDirectory>
          <EnableENC>False</EnableENC>
          <AlwaysStartWebServerOnDebug>False</AlwaysStartWebServerOnDebug>
        </WebProjectProperties>
      </FlavorProperties>
    </VisualStudio>
  </ProjectExtensions>
  <Target Name="Clean">
    <Message Importance="high" Text="Deleting folder $(OutputPath)" />
    <RemoveDir Directories="$(OutputPath)" />
  </Target>
  <Target Name="NodeCheck">
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
  </Target>
  <!-- Run npm ci when package-lock.json is newer than $(NpmInstallStampFile), which contains the timestamp of last run -->
  <Target Name="NpmCIIncremental" Inputs="package-lock.json" Outputs="$(NpmInstallStampFile)">
    <Message Importance="high" Text="Restoring dependencies using 'npm' because package-lock.json is newer. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm clean-install" />
    <Touch Files="$(NpmInstallStampFile)" AlwaysCreate="true" />
  </Target>
  <Target Name="NpmCI">
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm clean-install" />
    <Touch Files="$(NpmInstallStampFile)" AlwaysCreate="true" />
  </Target>
  <Target Name="BuildReact">
    <Message Importance="high" Text="Building React components..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:prod" />
  </Target>
  <Target Name="Build" DependsOnTargets="NodeCheck;NpmCIIncremental;BuildReact">
  </Target>
  <Target Name="Rebuild" DependsOnTargets="Clean;NodeCheck;NpmCI;BuildReact">
  </Target>
</Project>

<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003" ToolsVersion="4.0">
  <PropertyGroup>
    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion>
    <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
    <Name>MyReact</Name>
    <RootNamespace>MyReact</RootNamespace>
    <NpmInstallStampFile>node_modules/.install-stamp</NpmInstallStampFile>
<!-- etc -->
    <Environment>NODE_OPTIONS=--openssl-legacy-provider</Environment>
    <!-- etc -->
  </PropertyGroup>
  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <SchemaVersion>2.0</SchemaVersion>
    <ProjectGuid>333a402b-7769-4bfe-bbd0-e516bafafecf</ProjectGuid>
    <ProjectHome>.</ProjectHome>
    <StartupFile>server.js</StartupFile>
    <SearchPath>
    </SearchPath>
    <WorkingDirectory>$(MSBuildProjectDirectory)</WorkingDirectory>
    <OutputPath>$(MSBuildProjectDirectory)\..\MyCtrl</OutputPath>
    <TargetFrameworkVersion>v4.0</TargetFrameworkVersion>
    <ProjectTypeGuids>{3AF33F2E-1136-4D97-BBB7-1795711AC8B8};{349c5851-65df-11da-9384-00065b846f21};{9092AA53-FB77-4645-B42D-1CCCA6BD08BD}</ProjectTypeGuids>
    <NodejsPort>1337</NodejsPort>
    <StartWebBrowser>true</StartWebBrowser>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)' == 'Debug' ">
    <DebugSymbols>true</DebugSymbols>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)' == 'Release' ">
    <DebugSymbols>true</DebugSymbols>
  </PropertyGroup>
  <ItemGroup>
    <Content Include="package.json" />
    <Content Include="README.md" />
  </ItemGroup>
  <Import Project="$(VSToolsPath)\Node.js Tools\Microsoft.NodejsToolsV2.targets" />
  <ProjectExtensions>
    <VisualStudio>
      <FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}">
        <WebProjectProperties>
          <UseIIS>False</UseIIS>
          <AutoAssignPort>True</AutoAssignPort>
          <DevelopmentServerPort>0</DevelopmentServerPort>
          <DevelopmentServerVPath>/</DevelopmentServerVPath>
          <IISUrl>http://localhost:48022/</IISUrl>
          <NTLMAuthentication>False</NTLMAuthentication>
          <UseCustomServer>True</UseCustomServer>
          <CustomServerUrl>http://localhost:1337</CustomServerUrl>
          <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
        </WebProjectProperties>
      </FlavorProperties>
      <FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}" User="">
        <WebProjectProperties>
          <StartPageUrl>
          </StartPageUrl>
          <StartAction>CurrentPage</StartAction>
          <AspNetDebugging>True</AspNetDebugging>
          <SilverlightDebugging>False</SilverlightDebugging>
          <NativeDebugging>False</NativeDebugging>
          <SQLDebugging>False</SQLDebugging>
          <ExternalProgram>
          </ExternalProgram>
          <StartExternalURL>
          </StartExternalURL>
          <StartCmdLineArguments>
          </StartCmdLineArguments>
          <StartWorkingDirectory>
          </StartWorkingDirectory>
          <EnableENC>False</EnableENC>
          <AlwaysStartWebServerOnDebug>False</AlwaysStartWebServerOnDebug>
        </WebProjectProperties>
      </FlavorProperties>
    </VisualStudio>
  </ProjectExtensions>
  <Target Name="Clean">
    <Message Importance="high" Text="Deleting folder $(OutputPath)" />
    <RemoveDir Directories="$(OutputPath)" />
  </Target>
  <Target Name="NodeCheck">
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
  </Target>
  <!-- Run npm ci when package-lock.json is newer than $(NpmInstallStampFile), which contains the timestamp of last run -->
  <Target Name="NpmCIIncremental" Inputs="package-lock.json" Outputs="$(NpmInstallStampFile)">
    <Message Importance="high" Text="Restoring dependencies using 'npm' because package-lock.json is newer. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm clean-install" />
    <Touch Files="$(NpmInstallStampFile)" AlwaysCreate="true" />
  </Target>
  <Target Name="NpmCI">
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm clean-install" />
    <Touch Files="$(NpmInstallStampFile)" AlwaysCreate="true" />
  </Target>
  <Target Name="BuildReact">
    <Message Importance="high" Text="Building React components..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:prod" />
  </Target>
  <Target Name="Build" DependsOnTargets="NodeCheck;NpmCIIncremental;BuildReact">
  </Target>
  <Target Name="Rebuild" DependsOnTargets="Clean;NodeCheck;NpmCI;BuildReact">
  </Target>
</Project>
tRuEsAtM
  • 3,517
  • 6
  • 43
  • 83
  • How is your Build process defined? Exactly what VS project type are you using? – Dai Feb 28 '23 at 22:03
  • My project file type is `.njsproj` – tRuEsAtM Feb 28 '23 at 22:05
  • Edited question to include scripts portion from my package.json – tRuEsAtM Feb 28 '23 at 22:07
  • [According to this **old** commit to VS's NodeJS Tooling from 2014](https://github.com/microsoft/nodejstools/commit/6f9d0e55f56cb93d4a4c22e12ec6a8fc6fd31c1d) you should be able to specify environment-variables for Node/npm/etc via the `` MSBuild property in your `.njsproj` file - but I don't know if things have changed since 2014 when this commit was made. – Dai Feb 28 '23 at 22:58
  • Hmm, the `NodeProjectProperty.Environment` property [is still defined in the current repo's HEAD](https://github.com/microsoft/nodejstools/blob/108142c5157fd0a0a8265c96d6a76f90fb173094/Nodejs/Product/Nodejs/NodejsConstants.cs#L102), so I assume it should still work... – Dai Feb 28 '23 at 23:00
  • Hmm, I added .njsproj file, can I point to where should I add this? Is it `NODE_OPTIONS = "--openssl-legacy-provider"` – tRuEsAtM Feb 28 '23 at 23:11

1 Answers1

1

  • Visual Studio uses MSBuild for most project-types, including .njsproj projects.

    • I won't explain how MSBuild itself works, but remember that MSBuild doesn't replace your own Node projects' existing command-line build system: instead it sets-up an environment within which node, npm, etc will run, and then runs those build scripts.

  • MSBuild projects are complicated beasts, but two main concepts are "properties" and "items".

    • MSBuild Properties are defined by <PropertyGroup>'s child elements in your root <Project> element. These generally control or refer to compiler options/switches and MSBuild's internal options. Element names are entirely free-form.
    • MSBuild Items are defined by XML element children of <ItemGroup> elements and generally refer to individual files. The element names generally refer to the file's build action, such as <Compile>, <Content>, <None>, and so on.

  • In this case, the Visual Studio Tools for Node tooling defines two separate MSBuild properties for setting environment variables in the shell environment that it runs node.exe in: <EnvironmentVariables> and <Environment>.

  • In your case, locate the a suitable <PropertyGroup> in your .njsproj file: you may see multiple <PropertyGroup> elements with different condition="" attributes - you can also add a new <PropertyGroup> element if necessary. So you should have something like this:

<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003" ToolsVersion="4.0">
  <PropertyGroup>
    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion>
    <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
    <Name>MyReact</Name>
    <RootNamespace>MyReact</RootNamespace>
    <NpmInstallStampFile>node_modules/.install-stamp</NpmInstallStampFile>
    <!-- etc -->
    <Environment>NODE_OPTIONS=--openssl-legacy-provider</Environment>
    <!-- etc -->
  </PropertyGroup>
  <!-- etc -->
</Project>

For additional variables, use newlines, e.g.:

<Project etc>
  <PropertyGroup>
    <!-- etc -->
    <Environment>NODE_OPTIONS=--openssl-legacy-provider
anotherVariable=goeshere
third=value
and=so-on</Environment>
    <!-- etc -->
  </PropertyGroup>
</Project>

It's unclear what you should do if you need to include a \r\n within an environment-variable, though.

Warning: Note that MSBuild properties can be re-defined in other MSBuilder .targets and .props files, in which case your <Environment> property may be reset. So when setting MSBuild properties consider if you want to append or even wrap a property's value instead of replacing it - in which case use MSBuild's $() syntax within the property-element to get the current property value.

For example, if you want to preserve any defined <Environment> from elsewhere in your project, and simply want to add more environment-variables, do this:

<Environment>$(Environment)
NODE_OPTIONS=--openssl-legacy-provider</Environment>

Note that this appends to the entire MSBuild property - it doesn't specifically allow you to append to a specific environment-variable, in which case you'll need to use MSBuild's string functions, which gets gnarly so I won't go into detail on that here.

Dai
  • 141,631
  • 28
  • 261
  • 374
  • Still got the same error! Update .njsproj file. Running build runs `npm run build:prod` for me. then it resulted into same ` at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v18.14.2` – tRuEsAtM Feb 28 '23 at 23:32
  • @tRuEsAtM What happens if you run `msbuild` from the command-line to build your project? Can you inspect the `node.exe` process in `ProcExp.exe` when it runs in a build to see what its actual environment-variables are? – Dai Mar 01 '23 at 00:02
  • From command line, powershell, it works fine. – tRuEsAtM Mar 01 '23 at 00:03
  • ...by running `msbuild YourProject.njsproj` _with_ the added `` element, right? – Dai Mar 01 '23 at 00:07
  • Right, updated the project file and right click ran build in Visual Studio, build failed. But, for the same, if I ran it in command line, or powershell, where I have explicitly set the env variable, it is successful. – tRuEsAtM Mar 01 '23 at 00:14
  • Please post your _current_ `njsproj` file in your question. – Dai Mar 01 '23 at 00:21
  • Added updated njsproj – tRuEsAtM Mar 01 '23 at 00:25
  • @tRuEsAtM I'll admit I'm stumped. I don't know why it's not working for you. I suggest you post an Issue in the Node-tools-for-VS GitHub though. – Dai Mar 01 '23 at 00:43
  • Added screenshots from process explorer. – tRuEsAtM Mar 01 '23 at 01:07
  • I updated my package.json with ``` "build:dev": "SET NODE_OPTIONS=--openssl-legacy-provider && webpack --progress --mode production --dev", "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && lingui add-locale en && lingui extract --clean && lingui compile && webpack --mode production",``` And that fixed it. Don't know why njsproj file update fails :( – tRuEsAtM Mar 01 '23 at 18:31