Using Vue3 and Vue2 simultaneously in monorepo - vue.js

I have a problem building Vue3 and Vue2 apps in monorepo.
When trying to build the apps I see an error in Vue3 app:
error in ./src/App.vue
Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')
ERROR in ./src/App.vue
Module build failed (from ../../node_modules/#vue/cli-service/node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
at Object.loader (../../node_modules/#vue/cli-service/node_modules/vue-loader/dist/index.js:70:34)
# ./src/main.ts 2:0-28 5:10-13
Monorepo tool: TurboRepo
Package manager: yarn v1
Vue3 version: 3.2.13
Vue2 version: 2.6.11
Vue3 cli version: 5.0.8
Vue2 cli version: 4.5.17
webpack for vue3: 5.54
webpack for vue2: 4.46
Folder structure
├─ apps/
│ ├─ vue3-app/
│ │ ├─ package.json
│ ├─ vue2-app-1/
│ │ ├─ package.json
│ ├─ vue2-app-2/
│ │ ├─ package.json
├─ package.json
In the root package.json I declared workspaces
"workspaces": {
"packages": [
"apps/vue2-app-1",
"apps/vue2-app-2",
"apps/vue3-app"
],
I think it could be a problem with packages in root node_modules (Vue3 trying to use wrong package version?) so I tried yarn nohoist option but it didn't change anything
"nohoist": [
"vue3-app/**/vue",
"vue3-app/**/vue/**",
"vue2-app-1/**/vue/**",
"vue2-app-1/**/vue/**",
"vue2-app-2/**/vue/**",
"vue2-app-2/**/vue/**",
"vue3-app/**/vue-loader",
"vue3-app/**/vue-loader/**",
"vue2-app-1/**/vue-loader/**",
"vue2-app-1/**/vue-loader/**",
"vue2-app-2/**/vue-loader/**",
"vue2-app-2/**/vue-loader/**"
]
What could be causing the problem?

Related

"npm run dev" command not working on my mac m1 [duplicate]

I created the default IntelliJ IDEA React project and got this:
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/user/Programming Documents/WebServer/untitled/node_modules/react-scripts/scripts/start.js:19
throw err;
^
It seems to be a recent issue - webpack ran into this 4 days ago and is still working on it.
You can try one of these:
1. Downgrade to Node.js v16.
You can reinstall the current LTS version from Node.js’ website.
You can also use nvm. For Windows, use nvm-windows.
2. Enable legacy OpenSSL provider.
On Unix-like (Linux, macOS, Git bash, etc.):
export NODE_OPTIONS=--openssl-legacy-provider
On Windows command prompt:
set NODE_OPTIONS=--openssl-legacy-provider
On PowerShell:
$env:NODE_OPTIONS = "--openssl-legacy-provider"
Reference
In your package.json: change this line
"start": "react-scripts start"
to
"start": "react-scripts --openssl-legacy-provider start"
Danger
This question has more than 30 answers, most suggesting to either downgrade Node.js to pre v17 or to use the legacy SSL provider. Both of those solutions are hacks that leave your builds open to security threats.
Reason For The Error
In Node.js v17, the Node.js developers closed a security hole in the SSL provider. This fix was a breaking change that corresponded with similar breaking changes in the SSL packages in NPM. When you attempt to use SSL in Node.js v17 or later without also upgrading those SSL packages in your package.json, then you will see this error.
The Correct (safe) Solution (for npm users)
Use an up-to-date version of Node.js, and also use packages that are up-to-date with security fixes.
For many people, the following command will fix the issue:
npm audit fix --force
However, be aware that, for complex builds, the above command will pull in breaking security fixes that can potentially break your build.
Note for Yarn users
As some commenters have pointed out, if you use Yarn rather than Npm, then the above npm based fix will likely not suit you or may yield incomplete results. I do not use Yarn, so can not help with that; however, the concept should be the same.
A less heavy-handed (also correct) solution for Webpack
In your Webpack config, set either of the following:
(See the ouput.hashFunction docs)
A. (Webpack v5) Set output.hashFunction = 'xxhash64'.
B. (Webpack v4) This will depend on what hash algorithms nodejs supports on your system. Some common options you can try are output.hashFunction = 'sha512' or output.hashFunction = 'sha256'.
See more info in Greg's answer.
If we use the current LTS version of Node.js then this error will not come. Downgrade your Node.js version to the current LTS version (16.13.0).
There can be multiple ways to install the required version. One of them is using nvm (Node.js version manager).
Step 1: Install nvm (if not installed, follow Install Node.js Locally with Node Version Manager (nvm))
Step 2: nvm install 16.13.0 (or lts)
Some top answers did not work.
export NODE_OPTIONS=--openssl-legacy-provider
And some top answers were not applicable, modifying package.json file:
"start": "react-scripts --openssl-legacy-provider start"
This is caused by the latest node.js V17 compatible issues with OpenSSL, see this and this issue on GitHub.
The easiest thing is just downgrade from node.js V17 to node.js V16. See this post on how to downgrade node.js.
It's the Node.js version.
I have this error on Node.js 17, but it's fine when I switch my Node.js version to an older version (16) by using nvm.
I found the commands below on GitHub:
For Windows, use the below command in cmd:
set NODE_OPTIONS=--openssl-legacy-provider
For Unix, use:
export NODE_OPTIONS=--openssl-legacy-provider
There are a lot of workarounds posted (mostly downgrading Node.js, OpenSSL, or allowing insecure hashing), but the underlying problem is that Webpack's output.hashFunction defaults to md4, which triggers this error in recent versions of OpenSSL.
From Webpack's output.hashFunction docs:
Since Webpack v5.54.0+, hashFunction supports xxhash64 as a faster algorithm, which will be used as default when
experiments.futureDefaults is enabled.
The solution is either:
Set output.hashFunction = 'xxhash64'
Set experiments.futureDefaults = true
in your Webpack configuration.
If you're on an older version of Webpack, (prior to v5.54.0) follow the output.hashFunction link above to see what other hashing algorithms are available to you.
Temporary solution below. Actual solution is upgrading to Webpack 5.
Updated december 2022
This worked for me (downgrading to Node.js 16):
nvm install 16 --lts
nvm use 16
Using Node.js Version Manager (for Windows).
Reason:
This error is because node.js 17/18 uses OpenSSL3, which has changed code for initialization context of md family (including md4), and this is a breaking change.
The error can also occur if you build the application using docker build since it pulls the latest version of Node.JS by default.
Install Node Version Manager or nvm:
curl 'https://raw.githubusercontent.com/creationix/nvm/master/install.sh' | bash;
Install latest LTS version:
nvm install --lts;
Use LTS version:
nvm use --lts;
Done!
Source: https://itsmycode.com/error-digital-envelope-routines-unsupported/
Failed to construct transformer: Error: error:0308010C:digital envelope routines::unsupported
The simplest and easiest solution to solve the above error is to downgrade Node.js to v14.18.1. And then just delete folder node_modules and try to rebuild your project and your error must be solved.
Had this issue when using VueJS.
A disadvantage of using -openssl-legacy-provider is that it is not supported by older Node versions. Older Node versions simply don't run when this flag is provided.
But I still want to be compatible with Node v16 and older.
VueJS uses the md4 algorithm to generate hashes (wel actually it's WebPack under the hood). md4 can be easily replaced by md5 for these kind of purposes. The type of algorithm used, is on most places hard coded, so there's no way to configure another algorithm.
So I came up with another workaround. A function that intercepts the original createHash() call from the crypto module and replaces it with a modified version. This is at the start of my vue.config.js file:
const crypto = require('crypto');
/**
* md4 algorithm is not available anymore in NodeJS 17+ (because of lib SSL 3).
* In that case, silently replace md4 by md5 algorithm.
*/
try {
crypto.createHash('md4');
} catch (e) {
console.warn('Crypto "md4" is not supported anymore by this Node version');
const origCreateHash = crypto.createHash;
crypto.createHash = (alg, opts) => {
return origCreateHash(alg === 'md4' ? 'md5' : alg, opts);
};
}
This is the simplest answer and works.
If you're using react-scripts you can now simply upgrade to version 5.0.0 (or above) which seems to have addressed this issue (it includes a newer version of webpack).
Example:
npm i react-scripts#latest
I had the same error.
My case:
Installed fresh react typescript app, added some scss and some components.
Locally my build was working, but when I tried to publish it was failing with error:
Error: error:0308010C:digital envelope routines::unsupported
I fixed this issue by updating my react-script library to 5.0.1
"react-scripts": "^5.0.1",
check
node -v
v17.4.0
then roll back to node --lts (node v16.13.2 (npm v8.1.2)) for that use nvm.
nvm install 16
then check node -v and confirm it's version 16.
I faced this issue in Docker build, and I have added this line in the Docker file:
RUN export NODE_OPTIONS=--openssl-legacy-provider && yarn build && yarn install --production --ignore-scripts --prefer-offline
For local development, add the switch in file package.json.
This solution worked for me.
This error is coming in Node.js version 17+, so try to downgrade the Node.js version.
Uninstall Node.js from the computer.
Download Node.js version 16 and install it again from https://nodejs.org/download/release/v16.13.0/
That's all.
Same Error with node version v18.0.0
and nuxt framework version 2.15 when running dev server and will be fixed by:
"scripts": {
"dev": "NODE_OPTIONS=--openssl-legacy-provider nuxt"
}
Running audit fixed the problem for me
npm audit fix --force
This is a common error when packages on a project are not updated and the React version that you use is not the latest.
To fix this problem, you need to change your package.json file this way:
Change this 👇
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
to this 👇
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
If you are facing this error and you do not want to change your main configuration, an easy fix would be to use the following approach. I am not sure if it is recommended as a good practice, though.
Feel free to correct it.
Initially, let’s say this is the scripts section of my package.json file:
...
"version": "1.0.0",
"scripts": {
...
"build": "npm run build:test-app:testing",
"build:test-app:testing": "ng build test-app --deploy-url https://test-app.com/ --configuration=test-config",
...
},
"private": true,
...
In order to use this export NODE_OPTIONS=--openssl-legacy-provider you can do the following:
"version": "1.0.0",
"scripts": {
....
"build": "NODE_OPTIONS=--openssl-legacy-provider npm run build:test-app:testing”,
"build:test-app:testing": "NODE_OPTIONS=--openssl-legacy-provider ng build test-app --deploy-url https://test-app.com/ --configuration=test-config"
...
},
"private": true,
Take note of the build scripts. I have added an option: NODE_OPTIONS=--openssl-legacy-provider
This helps solve this error in Node.js version 17.
For those with the flexibility of changing the build system's Node.js version, just switch to a version lower that 17, e.g., version 16.
For Docker, the use case of using this initially, which always pulls the latest version:
...
FROM node:alpine
...
You can switch to something like:
...
FROM node:16-alpine3.12
...
I faced the same errors when building hoppscotch using Node.js v18.4.0, and set NODE_OPTIONS=--openssl-legacy-provider saved me!
Logs
D:\code\rust\hoppscotch-app\hoppscotch>pnpm install && pnpm run generate
Scope: all 5 workspace projects
Lockfile is up-to-date, resolution step is skipped
Already up-to-date
packages/codemirror-lang-graphql prepare$ rollup -c
│ Browserslist: caniuse-lite is outdated. Please run:
│ npx browserslist#latest --update-db
│ Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
│
│ src/index.js → dist/index.cjs, ./dist...
│ created dist/index.cjs, ./dist in 2.8s
└─ Done in 4.8s
packages/hoppscotch-data prepare$ tsup src --dts
[20 lines collapsed]
│ CJS dist\chunk-LZ75CAKS.js 13.00 B
│ DTS Build start
│ DTS ⚡️ Build success in 2261ms
│ DTS dist\index.d.ts 714.00 B
│ DTS dist\rest\index.d.ts 2.18 KB
│ DTS dist\graphql\index.d.ts 589.00 B
│ DTS dist\collection\index.d.ts 1.30 KB
│ DTS dist\rest\content-types.d.ts 473.00 B
│ DTS dist\rest\HoppRESTAuth.d.ts 882.00 B
│ DTS dist\type-utils.d.d.ts 1.00 B
└─ Done in 3.8s
packages/hoppscotch-js-sandbox postinstall$ pnpm run build
│ > #hoppscotch/js-sandbox#1.0.0 build D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-js-sandbox
│ > npx tsc
└─ Done in 8.7s
. prepare$ husky install
│ husky - Git hooks installed
└─ Done in 300ms
packages/hoppscotch-app postinstall$ pnpm run gql-codegen
[12 lines collapsed]
│ [14:58:01] Load GraphQL documents [started]
│ [14:58:01] Load GraphQL documents [completed]
│ [14:58:01] Generate [started]
│ [14:58:01] Generate [completed]
│ [14:58:01] Generate helpers/backend/backend-schema.json [completed]
│ [14:58:02] Load GraphQL documents [completed]
│ [14:58:02] Generate [started]
│ [14:58:02] Generate [completed]
│ [14:58:02] Generate helpers/backend/graphql.ts [completed]
│ [14:58:02] Generate outputs [completed]
└─ Done in 4s
> hoppscotch-app#2.2.1 generate D:\code\rust\hoppscotch-app\hoppscotch
> pnpm -r do-build-prod
Scope: 4 of 5 workspace projects
packages/hoppscotch-js-sandbox do-build-prod$ pnpm run build
│ > #hoppscotch/js-sandbox#1.0.0 build D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-js-sandbox
│ > npx tsc
└─ Done in 7.5s
packages/hoppscotch-app do-build-prod$ pnpm run generate
│ > hoppscotch-app#2.2.1 generate D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-app
│ > nuxt generate --modern
│ i Sentry reporting is disabled (no DSN has been provided)
│ i Production build
│ i Bundling only for client side
│ i Target: static
│ i Using components loader to optimize imports
│ i Discovered Components: node_modules/.cache/nuxt/components/readme.md
│ √ Builder initialized
│ √ Nuxt files generated
│ i Compiling Client
│ ERROR Error: error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_module
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\l
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at runSyncOrAsync (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at Array.<anonymous> (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loa
│ at Storage.finished (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\enhanced-resolve#4.5.0\node_modules\e
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\enhanced-resolve#4.5.0\node_modules\enhanced-resolve\li
│ WARN Browserslist: caniuse-lite is outdated. Please run:
│ npx browserslist#latest --update-db
│ Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
│ ERROR error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\u
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js:5
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js:3
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Loader
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\lo
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\lo
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Loader
│ at context.callback (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\babel-loader#8.2.3_#babel+core#7.16.12\node_modules\babel
│ D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\LoaderRunne
│ throw e;
│ ^
│ Error: error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_module
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\l
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at context.callback (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\load
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\cache-loader#4.1.0_webpack#4.46.0\node_modules\cache-lo
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\graceful-fs#4.2.8\node_modules\graceful-fs\graceful-fs.
│ at FSReqCallback.oncomplete (node:fs:201:23) {
│ opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
│ library: 'digital envelope routines',
│ reason: 'unsupported',
│ code: 'ERR_OSSL_EVP_UNSUPPORTED'
│ }
│ Node.js v18.4.0
│  ELIFECYCLE  Command failed with exit code 1.
└─ Failed in 8.3s
D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-app:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  hoppscotch-app#2.2.1 do-build-prod: `pnpm run generate`
Exit status 1
 ELIFECYCLE  Command failed with exit code 1.
D:\code\rust\hoppscotch-app\hoppscotch>npx browserslist#latest --update-db
Need to install the following packages:
browserslist#4.20.4
Ok to proceed? (y) y
Latest version: 1.0.30001357
Updating caniuse-lite version
$ pnpm up caniuse-lite
caniuse-lite has been successfully updated
No target browser changes
D:\code\rust\hoppscotch-app\hoppscotch>pnpm install && pnpm run generate
Scope: all 5 workspace projects
Lockfile is up-to-date, resolution step is skipped
Already up-to-date
packages/codemirror-lang-graphql prepare$ rollup -c
│ Browserslist: caniuse-lite is outdated. Please run:
│ npx browserslist#latest --update-db
│ Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
│
│ src/index.js → dist/index.cjs, ./dist...
│ created dist/index.cjs, ./dist in 2.8s
└─ Done in 4.8s
packages/hoppscotch-data prepare$ tsup src --dts
[20 lines collapsed]
│ CJS dist\chunk-JUWXSDKJ.js 1010.00 B
│ DTS Build start
│ DTS ⚡️ Build success in 2250ms
│ DTS dist\index.d.ts 714.00 B
│ DTS dist\rest\index.d.ts 2.18 KB
│ DTS dist\graphql\index.d.ts 589.00 B
│ DTS dist\collection\index.d.ts 1.30 KB
│ DTS dist\rest\content-types.d.ts 473.00 B
│ DTS dist\rest\HoppRESTAuth.d.ts 882.00 B
│ DTS dist\type-utils.d.d.ts 1.00 B
└─ Done in 3.7s
packages/hoppscotch-js-sandbox postinstall$ pnpm run build
│ > #hoppscotch/js-sandbox#1.0.0 build D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-js-sandbox
│ > npx tsc
└─ Done in 8.5s
. prepare$ husky install
│ husky - Git hooks installed
└─ Done in 335ms
packages/hoppscotch-app postinstall$ pnpm run gql-codegen
[12 lines collapsed]
│ [15:02:37] Load GraphQL documents [started]
│ [15:02:37] Load GraphQL documents [completed]
│ [15:02:37] Generate [started]
│ [15:02:37] Generate [completed]
│ [15:02:37] Generate helpers/backend/backend-schema.json [completed]
│ [15:02:38] Load GraphQL documents [completed]
│ [15:02:38] Generate [started]
│ [15:02:38] Generate [completed]
│ [15:02:38] Generate helpers/backend/graphql.ts [completed]
│ [15:02:38] Generate outputs [completed]
└─ Done in 3.8s
> hoppscotch-app#2.2.1 generate D:\code\rust\hoppscotch-app\hoppscotch
> pnpm -r do-build-prod
Scope: 4 of 5 workspace projects
packages/hoppscotch-js-sandbox do-build-prod$ pnpm run build
│ > #hoppscotch/js-sandbox#1.0.0 build D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-js-sandbox
│ > npx tsc
└─ Done in 6.9s
packages/hoppscotch-app do-build-prod$ pnpm run generate
│ > hoppscotch-app#2.2.1 generate D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-app
│ > nuxt generate --modern
│ i Sentry reporting is disabled (no DSN has been provided)
│ i Production build
│ i Bundling only for client side
│ i Target: static
│ i Using components loader to optimize imports
│ i Discovered Components: node_modules/.cache/nuxt/components/readme.md
│ √ Builder initialized
│ √ Nuxt files generated
│ i Compiling Client
│ ERROR Error: error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_module
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\l
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at runSyncOrAsync (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at Array.<anonymous> (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loa
│ at Storage.finished (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\enhanced-resolve#4.5.0\node_modules\e
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\enhanced-resolve#4.5.0\node_modules\enhanced-resolve\li
│ WARN Browserslist: caniuse-lite is outdated. Please run:
│ npx browserslist#latest --update-db
│ Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
│ ERROR error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\u
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js:5
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js:3
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Loader
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\lo
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\lo
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Loader
│ at context.callback (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\babel-loader#8.2.3_#babel+core#7.16.12\node_modules\babel
│ D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\LoaderRunne
│ throw e;
│ ^
│ Error: error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_module
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\l
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at context.callback (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\load
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\cache-loader#4.1.0_webpack#4.46.0\node_modules\cache-lo
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\graceful-fs#4.2.8\node_modules\graceful-fs\graceful-fs.
│ at FSReqCallback.oncomplete (node:fs:201:23) {
│ opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
│ library: 'digital envelope routines',
│ reason: 'unsupported',
│ code: 'ERR_OSSL_EVP_UNSUPPORTED'
│ }
│ Node.js v18.4.0
│  ELIFECYCLE  Command failed with exit code 1.
└─ Failed in 8.2s
D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-app:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  hoppscotch-app#2.2.1 do-build-prod: `pnpm run generate`
Exit status 1
 ELIFECYCLE  Command failed with exit code 1.
D:\code\rust\hoppscotch-app\hoppscotch>echo %NODE_OPTIONS%
%NODE_OPTIONS%
D:\code\rust\hoppscotch-app\hoppscotch>set NODE_OPTIONS=--openssl-legacy-provider
D:\code\rust\hoppscotch-app\hoppscotch>echo %NODE_OPTIONS%
--openssl-legacy-provider
D:\code\rust\hoppscotch-app\hoppscotch>pnpm run generate
> hoppscotch-app#2.2.1 generate D:\code\rust\hoppscotch-app\hoppscotch
> pnpm -r do-build-prod
Scope: 4 of 5 workspace projects
packages/hoppscotch-js-sandbox do-build-prod$ pnpm run build
│ > #hoppscotch/js-sandbox#1.0.0 build D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-js-sandbox
│ > npx tsc
└─ Done in 7.1s
packages/hoppscotch-app do-build-prod$ pnpm run generate
[732 lines collapsed]
│ √ Generated route "/vi/enter"
│ √ Generated route "/vi/graphql"
│ √ Generated route "/vi/join-team"
│ √ Generated route "/vi/profile"
│ √ Generated route "/vi/realtime"
│ √ Generated route "/vi/settings"
│ √ Generated route "/"
│ √ Client-side fallback created: 404.html
│ i Generating sitemaps
│ √ Generated /sitemap.xml
└─ Done in 6m 37.1s
D:\code\rust\hoppscotch-app\hoppscotch>
As a 2022 reader, none of the answers address the fact that this issue was fixed early on for Webpack 5 users (but not backported to Webpack 4). If you're on Webpack 5, simply upgrade to at least 5.61.0. See this comment here on the thread tracking this issue.
For Angular apps:
You can also edit the npm start script in package.json. Instead of
"start": "ng serve -o"
to
"start": "set NODE_OPTIONS=--openssl-legacy-provider && ng serve -o"
When you run npm run start in the terminal/command line, it will first set the NODE_OPTIONS to avoid the problem.
This worked for me in my app expo (downgrading from Node.js 17 to Node.js 12 or 14).
If you have nvm installed you can change the version of node:
First check versions of Node.js in nvm:
nvm list
Second, install version 12 or 14:
nvm install v12.22.8
I got the same issue for a vue js project. What i did is uninstall the new version(>18) of node js from machine and install a previous version(v16.14.2). It works
In PowerShell:
$env:NODE_OPTIONS = "--openssl-legacy-provider"
It worked with Node.js v18.7.0.
You need to update react-scripts to the latest version
npm update react-scripts --save
This answer is an immediate OpenSSL system-level workaround without touching a previously working build configuration.
In the ideal world, you have time to upgrade and migrate insecure build dependencies and make sure you didn't break something else in your application (or wholesale just avoid webpack, or in my case migrate from vue-cli to vite which uses esbuild).
You "should" instead either, (a) tell webpack to use a newer hash function, or (b) mitigate the offending packages with npm audit.
System-level OpenSSL workaround
The quickest workaround is to temporarily re-enable MD4 by enabling the "legacy" crypto providers within the system-wide OpenSSL configuration.
This is incredibly insecure and heavy-handed. Afterwards, you should disable the legacy crypto methods.
(Unfortunately, the following is only tested to work on Linux).
Backup your existing OpenSSL configuration:
sudo cp /etc/ssl/openssl.cnf /etc/ssl/openssl.cnf.BAK
Append (or uncomment) the following configuration to enable the legacy "providers" (as OpenSSL calls them). You probably want to sudo vim /etc/ssl/openssl.cnf or similar.
[provider_sect]
default = default_sect
legacy = legacy_sect
[default_sect]
activate = 1
[legacy_sect]
activate = 1
Rerun your node script as before.
Disable the legacy providers afterwards.
sudo mv -f /etc/ssl/openssl.cnf.BAK /etc/ssl/openssl.cnf
This solution is from an answer to a similar problem.
What is the underlying cause?
Node uses OpenSSL for its hash functions and encryption on *nix systems. The latest version of OpenSSL disables MD4 by default—which will break any previously working program that uses MD4. With that in mind, any npm package that thought using MD4 for file hashes was a "good idea" are now broken—even though MD4 has been considered broken by RSA Labs since 1996! MD4 was also "officially" relegated as obsolete by RFC 6150 in 2011.
Quick Fix that was suggested and worked for me. cd into your new App directory that you made; you may need to sudo this install then run the following:
Run:
npm install -g npm-check-updates
Then:
ncu -u
Then:
npm install
Then:
npm start

Using GitHub Actions with a React/NodeJS + shared code monorepo

I'm writing an application split (at least for this repo) between a React frontend and an Express/NodeJS server.
Some of the code that I needed was used by both, so I split it into a third folder and used npm link to locally install it into the frontend and server folders.
shared-code/
├─ dist/ // output of npm build (tsc)
├─ src/
│ ├─ index.ts // export const sharedFn = () => {}
├─ tsconfig.json
├─ package.json
├─ package-lock.json
server/
├─ dist/ // output of npm build
├─ src/
│ ├─ index.ts // import { sharedFn } from 'shared-code'
├─ tsconfig.json
├─ package.json
├─ package-lock.json
frontend/
├─ dist/ // output of npm build
├─ src/
│ ├─ index.ts // import { sharedFn } from 'shared-code'
├─ tsconfig.json
├─ package.json
├─ package-lock.json
// in shared-code directory
npm run build
// in server directory
npm link ../shared-code
// produces in server/package.json
"dependencies": {
"express": "^4.18.2",
"shared-code": "file:../shared-code",
"ws": "^8.11.0"
},
The dist folders are generated by tsc (or npm run build, which for the frontend uses a CRA script) but are not stored in the repo. This seems to complicate the use of a GitHub action, since the shared-code/dist doesn't exist in a clean checkout, breaking naïve approaches to a separate script for each portion, and my attempts to use needs and a single yaml file.
I haven't been able to work out how to do this in a GitHub action, or how to approach this. I don't want to publish an npm package publicly, and my desired outcome would be to produce GitHub releases in a form that I can download them onto a remote device (by curl, wget, whatever) and then run them with node some/path/to/dist/index.js, chromium /some/path/to/dist/index.html. (But I'd say that all of deployment is not in the scope of this question - only writing in case it changes the suitable method.)

Error on calling 'npm run serve' on Vue CLI project [duplicate]

I created the default IntelliJ IDEA React project and got this:
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/user/Programming Documents/WebServer/untitled/node_modules/react-scripts/scripts/start.js:19
throw err;
^
It seems to be a recent issue - webpack ran into this 4 days ago and is still working on it.
You can try one of these:
1. Downgrade to Node.js v16.
You can reinstall the current LTS version from Node.js’ website.
You can also use nvm. For Windows, use nvm-windows.
2. Enable legacy OpenSSL provider.
On Unix-like (Linux, macOS, Git bash, etc.):
export NODE_OPTIONS=--openssl-legacy-provider
On Windows command prompt:
set NODE_OPTIONS=--openssl-legacy-provider
On PowerShell:
$env:NODE_OPTIONS = "--openssl-legacy-provider"
Reference
In your package.json: change this line
"start": "react-scripts start"
to
"start": "react-scripts --openssl-legacy-provider start"
Danger
This question has more than 30 answers, most suggesting to either downgrade Node.js to pre v17 or to use the legacy SSL provider. Both of those solutions are hacks that leave your builds open to security threats.
Reason For The Error
In Node.js v17, the Node.js developers closed a security hole in the SSL provider. This fix was a breaking change that corresponded with similar breaking changes in the SSL packages in NPM. When you attempt to use SSL in Node.js v17 or later without also upgrading those SSL packages in your package.json, then you will see this error.
The Correct (safe) Solution (for npm users)
Use an up-to-date version of Node.js, and also use packages that are up-to-date with security fixes.
For many people, the following command will fix the issue:
npm audit fix --force
However, be aware that, for complex builds, the above command will pull in breaking security fixes that can potentially break your build.
Note for Yarn users
As some commenters have pointed out, if you use Yarn rather than Npm, then the above npm based fix will likely not suit you or may yield incomplete results. I do not use Yarn, so can not help with that; however, the concept should be the same.
A less heavy-handed (also correct) solution for Webpack
In your Webpack config, set either of the following:
(See the ouput.hashFunction docs)
A. (Webpack v5) Set output.hashFunction = 'xxhash64'.
B. (Webpack v4) This will depend on what hash algorithms nodejs supports on your system. Some common options you can try are output.hashFunction = 'sha512' or output.hashFunction = 'sha256'.
See more info in Greg's answer.
If we use the current LTS version of Node.js then this error will not come. Downgrade your Node.js version to the current LTS version (16.13.0).
There can be multiple ways to install the required version. One of them is using nvm (Node.js version manager).
Step 1: Install nvm (if not installed, follow Install Node.js Locally with Node Version Manager (nvm))
Step 2: nvm install 16.13.0 (or lts)
Some top answers did not work.
export NODE_OPTIONS=--openssl-legacy-provider
And some top answers were not applicable, modifying package.json file:
"start": "react-scripts --openssl-legacy-provider start"
This is caused by the latest node.js V17 compatible issues with OpenSSL, see this and this issue on GitHub.
The easiest thing is just downgrade from node.js V17 to node.js V16. See this post on how to downgrade node.js.
It's the Node.js version.
I have this error on Node.js 17, but it's fine when I switch my Node.js version to an older version (16) by using nvm.
I found the commands below on GitHub:
For Windows, use the below command in cmd:
set NODE_OPTIONS=--openssl-legacy-provider
For Unix, use:
export NODE_OPTIONS=--openssl-legacy-provider
There are a lot of workarounds posted (mostly downgrading Node.js, OpenSSL, or allowing insecure hashing), but the underlying problem is that Webpack's output.hashFunction defaults to md4, which triggers this error in recent versions of OpenSSL.
From Webpack's output.hashFunction docs:
Since Webpack v5.54.0+, hashFunction supports xxhash64 as a faster algorithm, which will be used as default when
experiments.futureDefaults is enabled.
The solution is either:
Set output.hashFunction = 'xxhash64'
Set experiments.futureDefaults = true
in your Webpack configuration.
If you're on an older version of Webpack, (prior to v5.54.0) follow the output.hashFunction link above to see what other hashing algorithms are available to you.
Temporary solution below. Actual solution is upgrading to Webpack 5.
Updated december 2022
This worked for me (downgrading to Node.js 16):
nvm install 16 --lts
nvm use 16
Using Node.js Version Manager (for Windows).
Reason:
This error is because node.js 17/18 uses OpenSSL3, which has changed code for initialization context of md family (including md4), and this is a breaking change.
The error can also occur if you build the application using docker build since it pulls the latest version of Node.JS by default.
Install Node Version Manager or nvm:
curl 'https://raw.githubusercontent.com/creationix/nvm/master/install.sh' | bash;
Install latest LTS version:
nvm install --lts;
Use LTS version:
nvm use --lts;
Done!
Source: https://itsmycode.com/error-digital-envelope-routines-unsupported/
Failed to construct transformer: Error: error:0308010C:digital envelope routines::unsupported
The simplest and easiest solution to solve the above error is to downgrade Node.js to v14.18.1. And then just delete folder node_modules and try to rebuild your project and your error must be solved.
Had this issue when using VueJS.
A disadvantage of using -openssl-legacy-provider is that it is not supported by older Node versions. Older Node versions simply don't run when this flag is provided.
But I still want to be compatible with Node v16 and older.
VueJS uses the md4 algorithm to generate hashes (wel actually it's WebPack under the hood). md4 can be easily replaced by md5 for these kind of purposes. The type of algorithm used, is on most places hard coded, so there's no way to configure another algorithm.
So I came up with another workaround. A function that intercepts the original createHash() call from the crypto module and replaces it with a modified version. This is at the start of my vue.config.js file:
const crypto = require('crypto');
/**
* md4 algorithm is not available anymore in NodeJS 17+ (because of lib SSL 3).
* In that case, silently replace md4 by md5 algorithm.
*/
try {
crypto.createHash('md4');
} catch (e) {
console.warn('Crypto "md4" is not supported anymore by this Node version');
const origCreateHash = crypto.createHash;
crypto.createHash = (alg, opts) => {
return origCreateHash(alg === 'md4' ? 'md5' : alg, opts);
};
}
This is the simplest answer and works.
If you're using react-scripts you can now simply upgrade to version 5.0.0 (or above) which seems to have addressed this issue (it includes a newer version of webpack).
Example:
npm i react-scripts#latest
I had the same error.
My case:
Installed fresh react typescript app, added some scss and some components.
Locally my build was working, but when I tried to publish it was failing with error:
Error: error:0308010C:digital envelope routines::unsupported
I fixed this issue by updating my react-script library to 5.0.1
"react-scripts": "^5.0.1",
I faced this issue in Docker build, and I have added this line in the Docker file:
RUN export NODE_OPTIONS=--openssl-legacy-provider && yarn build && yarn install --production --ignore-scripts --prefer-offline
For local development, add the switch in file package.json.
check
node -v
v17.4.0
then roll back to node --lts (node v16.13.2 (npm v8.1.2)) for that use nvm.
nvm install 16
then check node -v and confirm it's version 16.
This solution worked for me.
This error is coming in Node.js version 17+, so try to downgrade the Node.js version.
Uninstall Node.js from the computer.
Download Node.js version 16 and install it again from https://nodejs.org/download/release/v16.13.0/
That's all.
Same Error with node version v18.0.0
and nuxt framework version 2.15 when running dev server and will be fixed by:
"scripts": {
"dev": "NODE_OPTIONS=--openssl-legacy-provider nuxt"
}
Running audit fixed the problem for me
npm audit fix --force
This is a common error when packages on a project are not updated and the React version that you use is not the latest.
To fix this problem, you need to change your package.json file this way:
Change this 👇
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
to this 👇
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
If you are facing this error and you do not want to change your main configuration, an easy fix would be to use the following approach. I am not sure if it is recommended as a good practice, though.
Feel free to correct it.
Initially, let’s say this is the scripts section of my package.json file:
...
"version": "1.0.0",
"scripts": {
...
"build": "npm run build:test-app:testing",
"build:test-app:testing": "ng build test-app --deploy-url https://test-app.com/ --configuration=test-config",
...
},
"private": true,
...
In order to use this export NODE_OPTIONS=--openssl-legacy-provider you can do the following:
"version": "1.0.0",
"scripts": {
....
"build": "NODE_OPTIONS=--openssl-legacy-provider npm run build:test-app:testing”,
"build:test-app:testing": "NODE_OPTIONS=--openssl-legacy-provider ng build test-app --deploy-url https://test-app.com/ --configuration=test-config"
...
},
"private": true,
Take note of the build scripts. I have added an option: NODE_OPTIONS=--openssl-legacy-provider
This helps solve this error in Node.js version 17.
For those with the flexibility of changing the build system's Node.js version, just switch to a version lower that 17, e.g., version 16.
For Docker, the use case of using this initially, which always pulls the latest version:
...
FROM node:alpine
...
You can switch to something like:
...
FROM node:16-alpine3.12
...
I faced the same errors when building hoppscotch using Node.js v18.4.0, and set NODE_OPTIONS=--openssl-legacy-provider saved me!
Logs
D:\code\rust\hoppscotch-app\hoppscotch>pnpm install && pnpm run generate
Scope: all 5 workspace projects
Lockfile is up-to-date, resolution step is skipped
Already up-to-date
packages/codemirror-lang-graphql prepare$ rollup -c
│ Browserslist: caniuse-lite is outdated. Please run:
│ npx browserslist#latest --update-db
│ Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
│
│ src/index.js → dist/index.cjs, ./dist...
│ created dist/index.cjs, ./dist in 2.8s
└─ Done in 4.8s
packages/hoppscotch-data prepare$ tsup src --dts
[20 lines collapsed]
│ CJS dist\chunk-LZ75CAKS.js 13.00 B
│ DTS Build start
│ DTS ⚡️ Build success in 2261ms
│ DTS dist\index.d.ts 714.00 B
│ DTS dist\rest\index.d.ts 2.18 KB
│ DTS dist\graphql\index.d.ts 589.00 B
│ DTS dist\collection\index.d.ts 1.30 KB
│ DTS dist\rest\content-types.d.ts 473.00 B
│ DTS dist\rest\HoppRESTAuth.d.ts 882.00 B
│ DTS dist\type-utils.d.d.ts 1.00 B
└─ Done in 3.8s
packages/hoppscotch-js-sandbox postinstall$ pnpm run build
│ > #hoppscotch/js-sandbox#1.0.0 build D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-js-sandbox
│ > npx tsc
└─ Done in 8.7s
. prepare$ husky install
│ husky - Git hooks installed
└─ Done in 300ms
packages/hoppscotch-app postinstall$ pnpm run gql-codegen
[12 lines collapsed]
│ [14:58:01] Load GraphQL documents [started]
│ [14:58:01] Load GraphQL documents [completed]
│ [14:58:01] Generate [started]
│ [14:58:01] Generate [completed]
│ [14:58:01] Generate helpers/backend/backend-schema.json [completed]
│ [14:58:02] Load GraphQL documents [completed]
│ [14:58:02] Generate [started]
│ [14:58:02] Generate [completed]
│ [14:58:02] Generate helpers/backend/graphql.ts [completed]
│ [14:58:02] Generate outputs [completed]
└─ Done in 4s
> hoppscotch-app#2.2.1 generate D:\code\rust\hoppscotch-app\hoppscotch
> pnpm -r do-build-prod
Scope: 4 of 5 workspace projects
packages/hoppscotch-js-sandbox do-build-prod$ pnpm run build
│ > #hoppscotch/js-sandbox#1.0.0 build D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-js-sandbox
│ > npx tsc
└─ Done in 7.5s
packages/hoppscotch-app do-build-prod$ pnpm run generate
│ > hoppscotch-app#2.2.1 generate D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-app
│ > nuxt generate --modern
│ i Sentry reporting is disabled (no DSN has been provided)
│ i Production build
│ i Bundling only for client side
│ i Target: static
│ i Using components loader to optimize imports
│ i Discovered Components: node_modules/.cache/nuxt/components/readme.md
│ √ Builder initialized
│ √ Nuxt files generated
│ i Compiling Client
│ ERROR Error: error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_module
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\l
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at runSyncOrAsync (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at Array.<anonymous> (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loa
│ at Storage.finished (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\enhanced-resolve#4.5.0\node_modules\e
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\enhanced-resolve#4.5.0\node_modules\enhanced-resolve\li
│ WARN Browserslist: caniuse-lite is outdated. Please run:
│ npx browserslist#latest --update-db
│ Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
│ ERROR error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\u
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js:5
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js:3
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Loader
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\lo
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\lo
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Loader
│ at context.callback (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\babel-loader#8.2.3_#babel+core#7.16.12\node_modules\babel
│ D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\LoaderRunne
│ throw e;
│ ^
│ Error: error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_module
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\l
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at context.callback (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\load
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\cache-loader#4.1.0_webpack#4.46.0\node_modules\cache-lo
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\graceful-fs#4.2.8\node_modules\graceful-fs\graceful-fs.
│ at FSReqCallback.oncomplete (node:fs:201:23) {
│ opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
│ library: 'digital envelope routines',
│ reason: 'unsupported',
│ code: 'ERR_OSSL_EVP_UNSUPPORTED'
│ }
│ Node.js v18.4.0
│  ELIFECYCLE  Command failed with exit code 1.
└─ Failed in 8.3s
D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-app:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  hoppscotch-app#2.2.1 do-build-prod: `pnpm run generate`
Exit status 1
 ELIFECYCLE  Command failed with exit code 1.
D:\code\rust\hoppscotch-app\hoppscotch>npx browserslist#latest --update-db
Need to install the following packages:
browserslist#4.20.4
Ok to proceed? (y) y
Latest version: 1.0.30001357
Updating caniuse-lite version
$ pnpm up caniuse-lite
caniuse-lite has been successfully updated
No target browser changes
D:\code\rust\hoppscotch-app\hoppscotch>pnpm install && pnpm run generate
Scope: all 5 workspace projects
Lockfile is up-to-date, resolution step is skipped
Already up-to-date
packages/codemirror-lang-graphql prepare$ rollup -c
│ Browserslist: caniuse-lite is outdated. Please run:
│ npx browserslist#latest --update-db
│ Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
│
│ src/index.js → dist/index.cjs, ./dist...
│ created dist/index.cjs, ./dist in 2.8s
└─ Done in 4.8s
packages/hoppscotch-data prepare$ tsup src --dts
[20 lines collapsed]
│ CJS dist\chunk-JUWXSDKJ.js 1010.00 B
│ DTS Build start
│ DTS ⚡️ Build success in 2250ms
│ DTS dist\index.d.ts 714.00 B
│ DTS dist\rest\index.d.ts 2.18 KB
│ DTS dist\graphql\index.d.ts 589.00 B
│ DTS dist\collection\index.d.ts 1.30 KB
│ DTS dist\rest\content-types.d.ts 473.00 B
│ DTS dist\rest\HoppRESTAuth.d.ts 882.00 B
│ DTS dist\type-utils.d.d.ts 1.00 B
└─ Done in 3.7s
packages/hoppscotch-js-sandbox postinstall$ pnpm run build
│ > #hoppscotch/js-sandbox#1.0.0 build D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-js-sandbox
│ > npx tsc
└─ Done in 8.5s
. prepare$ husky install
│ husky - Git hooks installed
└─ Done in 335ms
packages/hoppscotch-app postinstall$ pnpm run gql-codegen
[12 lines collapsed]
│ [15:02:37] Load GraphQL documents [started]
│ [15:02:37] Load GraphQL documents [completed]
│ [15:02:37] Generate [started]
│ [15:02:37] Generate [completed]
│ [15:02:37] Generate helpers/backend/backend-schema.json [completed]
│ [15:02:38] Load GraphQL documents [completed]
│ [15:02:38] Generate [started]
│ [15:02:38] Generate [completed]
│ [15:02:38] Generate helpers/backend/graphql.ts [completed]
│ [15:02:38] Generate outputs [completed]
└─ Done in 3.8s
> hoppscotch-app#2.2.1 generate D:\code\rust\hoppscotch-app\hoppscotch
> pnpm -r do-build-prod
Scope: 4 of 5 workspace projects
packages/hoppscotch-js-sandbox do-build-prod$ pnpm run build
│ > #hoppscotch/js-sandbox#1.0.0 build D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-js-sandbox
│ > npx tsc
└─ Done in 6.9s
packages/hoppscotch-app do-build-prod$ pnpm run generate
│ > hoppscotch-app#2.2.1 generate D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-app
│ > nuxt generate --modern
│ i Sentry reporting is disabled (no DSN has been provided)
│ i Production build
│ i Bundling only for client side
│ i Target: static
│ i Using components loader to optimize imports
│ i Discovered Components: node_modules/.cache/nuxt/components/readme.md
│ √ Builder initialized
│ √ Nuxt files generated
│ i Compiling Client
│ ERROR Error: error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_module
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\l
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at runSyncOrAsync (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at Array.<anonymous> (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loa
│ at Storage.finished (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\enhanced-resolve#4.5.0\node_modules\e
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\enhanced-resolve#4.5.0\node_modules\enhanced-resolve\li
│ WARN Browserslist: caniuse-lite is outdated. Please run:
│ npx browserslist#latest --update-db
│ Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
│ ERROR error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\u
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js:5
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js:3
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Loader
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\lo
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\lo
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Loader
│ at context.callback (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\babel-loader#8.2.3_#babel+core#7.16.12\node_modules\babel
│ D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\LoaderRunne
│ throw e;
│ ^
│ Error: error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:133:10)
│ at module.exports (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib
│ at NormalModule._initBuildHash (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_module
│ at handleParseError (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\l
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\webpack#4.46.0\node_modules\webpack\lib\NormalModule.js
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at iterateNormalLoaders (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\loader-runner\lib\Load
│ at context.callback (D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\loader-runner#2.4.0\node_modules\load
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\cache-loader#4.1.0_webpack#4.46.0\node_modules\cache-lo
│ at D:\code\rust\hoppscotch-app\hoppscotch\node_modules\.pnpm\graceful-fs#4.2.8\node_modules\graceful-fs\graceful-fs.
│ at FSReqCallback.oncomplete (node:fs:201:23) {
│ opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
│ library: 'digital envelope routines',
│ reason: 'unsupported',
│ code: 'ERR_OSSL_EVP_UNSUPPORTED'
│ }
│ Node.js v18.4.0
│  ELIFECYCLE  Command failed with exit code 1.
└─ Failed in 8.2s
D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-app:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  hoppscotch-app#2.2.1 do-build-prod: `pnpm run generate`
Exit status 1
 ELIFECYCLE  Command failed with exit code 1.
D:\code\rust\hoppscotch-app\hoppscotch>echo %NODE_OPTIONS%
%NODE_OPTIONS%
D:\code\rust\hoppscotch-app\hoppscotch>set NODE_OPTIONS=--openssl-legacy-provider
D:\code\rust\hoppscotch-app\hoppscotch>echo %NODE_OPTIONS%
--openssl-legacy-provider
D:\code\rust\hoppscotch-app\hoppscotch>pnpm run generate
> hoppscotch-app#2.2.1 generate D:\code\rust\hoppscotch-app\hoppscotch
> pnpm -r do-build-prod
Scope: 4 of 5 workspace projects
packages/hoppscotch-js-sandbox do-build-prod$ pnpm run build
│ > #hoppscotch/js-sandbox#1.0.0 build D:\code\rust\hoppscotch-app\hoppscotch\packages\hoppscotch-js-sandbox
│ > npx tsc
└─ Done in 7.1s
packages/hoppscotch-app do-build-prod$ pnpm run generate
[732 lines collapsed]
│ √ Generated route "/vi/enter"
│ √ Generated route "/vi/graphql"
│ √ Generated route "/vi/join-team"
│ √ Generated route "/vi/profile"
│ √ Generated route "/vi/realtime"
│ √ Generated route "/vi/settings"
│ √ Generated route "/"
│ √ Client-side fallback created: 404.html
│ i Generating sitemaps
│ √ Generated /sitemap.xml
└─ Done in 6m 37.1s
D:\code\rust\hoppscotch-app\hoppscotch>
As a 2022 reader, none of the answers address the fact that this issue was fixed early on for Webpack 5 users (but not backported to Webpack 4). If you're on Webpack 5, simply upgrade to at least 5.61.0. See this comment here on the thread tracking this issue.
For Angular apps:
You can also edit the npm start script in package.json. Instead of
"start": "ng serve -o"
to
"start": "set NODE_OPTIONS=--openssl-legacy-provider && ng serve -o"
When you run npm run start in the terminal/command line, it will first set the NODE_OPTIONS to avoid the problem.
This worked for me in my app expo (downgrading from Node.js 17 to Node.js 12 or 14).
If you have nvm installed you can change the version of node:
First check versions of Node.js in nvm:
nvm list
Second, install version 12 or 14:
nvm install v12.22.8
I got the same issue for a vue js project. What i did is uninstall the new version(>18) of node js from machine and install a previous version(v16.14.2). It works
In PowerShell:
$env:NODE_OPTIONS = "--openssl-legacy-provider"
It worked with Node.js v18.7.0.
You need to update react-scripts to the latest version
npm update react-scripts --save
This answer is an immediate OpenSSL system-level workaround without touching a previously working build configuration.
In the ideal world, you have time to upgrade and migrate insecure build dependencies and make sure you didn't break something else in your application (or wholesale just avoid webpack, or in my case migrate from vue-cli to vite which uses esbuild).
You "should" instead either, (a) tell webpack to use a newer hash function, or (b) mitigate the offending packages with npm audit.
System-level OpenSSL workaround
The quickest workaround is to temporarily re-enable MD4 by enabling the "legacy" crypto providers within the system-wide OpenSSL configuration.
This is incredibly insecure and heavy-handed. Afterwards, you should disable the legacy crypto methods.
(Unfortunately, the following is only tested to work on Linux).
Backup your existing OpenSSL configuration:
sudo cp /etc/ssl/openssl.cnf /etc/ssl/openssl.cnf.BAK
Append (or uncomment) the following configuration to enable the legacy "providers" (as OpenSSL calls them). You probably want to sudo vim /etc/ssl/openssl.cnf or similar.
[provider_sect]
default = default_sect
legacy = legacy_sect
[default_sect]
activate = 1
[legacy_sect]
activate = 1
Rerun your node script as before.
Disable the legacy providers afterwards.
sudo mv -f /etc/ssl/openssl.cnf.BAK /etc/ssl/openssl.cnf
This solution is from an answer to a similar problem.
What is the underlying cause?
Node uses OpenSSL for its hash functions and encryption on *nix systems. The latest version of OpenSSL disables MD4 by default—which will break any previously working program that uses MD4. With that in mind, any npm package that thought using MD4 for file hashes was a "good idea" are now broken—even though MD4 has been considered broken by RSA Labs since 1996! MD4 was also "officially" relegated as obsolete by RFC 6150 in 2011.
Quick Fix that was suggested and worked for me. cd into your new App directory that you made; you may need to sudo this install then run the following:
Run:
npm install -g npm-check-updates
Then:
ncu -u
Then:
npm install
Then:
npm start

How to organise multi package flutter project and use it as dependency

I would like to organise a flutter project into a multi-package one with following requirements:
use one repository for this project
able for developers to work on the packages in this repository locally
make the packages accessible as dependencies from other projects outside of this repository
The file setup for the repository I have now is:
.
├── app_base
│ ├── ...
│ └── pubspec.yaml
├── feature
│ ├── ...
│ └── pubspec.yaml
└── README.md
I tried using path dependencies like this in app_base/pubspec.yaml:
name: app_base
dependencies:
feature:
path: ../feature
and it works for local development but if I try to use app_base in a completely different project and not use paths but a git dependency:
name: actual_app
dependencies:
app_base:
git:
url: ssh://address.to/the_repo.git
path: app_base
ref: deadbaca
it cannot resolve the transitive feature dependency:
Running "flutter packages get" in actual_app...
Error on line 21, column 11: Invalid description: "../feature" is a relative path, but this isn't a local pubspec.
path: ../feature
^^^^^^^^^^
pub get failed (65)
Process finished with exit code 65
Is there a way to make it work for both local development and used as a git dependency from other project?
Just use Git dependencies for both scenarios (locally and for other projects).
If you think this is cumbersome during local development, use path dependencies locally and change it back to Git before committing.

How to view the dependency tree of a given npm module?

How can I get the tree of a module available to npm, but not installed locally ?
npm ll does the job for locally installed packages. But it doesn't work for modules not installed or modules installed globally.
I tried npm list bower but that's not it.
You can generate NPM dependency trees without the need of installing
a dependency by using the command
npm list
This will generate a dependency tree for the project at the current directory and print it to the console.
You can get the dependency tree of a specific dependency like so:
npm list [dependency]
You can also set the maximum depth level by doing
npm list --depth=[depth]
Note that you can only view the dependency tree of a dependency that you have installed either globally, or locally to the NPM project.
You can use the npm-remote-ls module. You can install it globally:
npm install -g npm-remote-ls
And then call:
npm-remote-ls bower
Alternatively, npm#5.2.0 installed then you can use npx and avoid globally installing the command - just call:
npx npm-remote-ls bower
This site allows you to view a packages tree as a node graph in 2D or 3D.
http://npm.anvaka.com/#/view/2d/waterline
Great work from #Avanka!
Here is the unpowerful official command:
npm view <PACKAGE> dependencies
It prints only the direct dependencies, not the whole tree.
You can use howfat which also displays dependency statistics:
npx howfat jasmine
If you want to get the actually dependency path of specific package and want to know why you have it, you can simply ask yarn why <MODULE>.
example:
$> yarn why mime-db
yarn why v1.5.1
[1/4] Why do we have the module "mime-db"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "mime-db#1.37.0"
info Reasons this module exists
- "coveralls#request#mime-types" depends on it
- Hoisted from "coveralls#request#mime-types#mime-db"
info Disk size without dependencies: "196kB"
info Disk size with unique dependencies: "196kB"
info Disk size with transitive dependencies: "196kB"
info Number of shared dependencies: 0
Done in 0.65s.
View All the metadata about npm module
npm view mongoose(module name)
View All Dependencies of module
npm view mongoose dependencies
View All Version or Versions module
npm view mongoose version
npm view mongoose versions
View All the keywords
npm view mongoose keywords
This command output all modules with dependencies in a tree structure:
npm ls -a
If you are using yarn, then you can go with yarn list from the root directory of the project. It'll give you a tree like structure of all the transitive dependencies like below:
├─ #ampproject/toolbox-core#2.7.4
│ ├─ cross-fetch#3.0.6
│ └─ lru-cache#6.0.0
├─ #ampproject/toolbox-optimizer#2.7.0-alpha.1
│ ├─ #ampproject/toolbox-core#^2.6.0
│ ├─ #ampproject/toolbox-runtime-version#^2.7.0-alpha.1
│ ├─ #ampproject/toolbox-script-csp#^2.5.4
│ ├─ #ampproject/toolbox-validator-rules#^2.5.4
│ ├─ abort-controller#3.0.0
│ ├─ cross-fetch#3.0.5
│ ├─ cross-fetch#3.0.5
│ │ └─ node-fetch#2.6.0
│ ├─ cssnano-preset-simple#1.2.0
│ │ ├─ caniuse-lite#^1.0.30001093
│ │ ├─ postcss#^7.0.32
│ │ └─ postcss#7.0.35
│ │ ├─ chalk#^2.4.2
│ │ ├─ source-map#^0.6.1
│ │ └─ supports-color#^6.1.0
To get it as a list:
% npx npm-remote-ls --flatten dugite -d false -o false
[
'dugite#1.91.3',
'checksum#0.1.1',
'progress#2.0.3',
'mkdirp#0.5.5',
'rimraf#2.7.1',
'tar#4.4.13',
'optimist#0.3.7',
'got#9.6.0',
'minimist#1.2.5',
'chownr#1.1.4',
'glob#7.1.6',
'fs-minipass#1.2.7',
'minizlib#1.3.3',
'minipass#2.9.0',
'safe-buffer#5.2.1',
'yallist#3.1.1',
'wordwrap#0.0.3',
'#szmarczak/http-timer#1.1.2',
'cacheable-request#6.1.0',
'#sindresorhus/is#0.14.0',
'decompress-response#3.3.0',
'duplexer3#0.1.4',
'lowercase-keys#1.0.1',
'mimic-response#1.0.1',
'get-stream#4.1.0',
'to-readable-stream#1.0.0',
'p-cancelable#1.1.0',
'url-parse-lax#3.0.0',
'fs.realpath#1.0.0',
'inflight#1.0.6',
'inherits#2.0.4',
'once#1.4.0',
'path-is-absolute#1.0.1',
'minimatch#3.0.4',
'defer-to-connect#1.1.3',
'clone-response#1.0.2',
'get-stream#5.2.0',
'http-cache-semantics#4.1.0',
'lowercase-keys#2.0.0',
'responselike#1.0.2',
'keyv#3.1.0',
'pump#3.0.0',
'prepend-http#2.0.0',
'normalize-url#4.5.0',
'wrappy#1.0.2',
'brace-expansion#1.1.11',
'json-buffer#3.0.0',
'end-of-stream#1.4.4',
'concat-map#0.0.1',
'balanced-match#1.0.0'
]
There is also a nice web app to see the dependencies in a weighted map kind of view.
For example:
https://bundlephobia.com/result?p=sanitize-html#1.19.1
Unfortunately npm still doesn't have a way to view dependencies of non-installed packages. Not even a package's page list the dependencies correctly. 🙄
Luckily installing yarn:
brew install yarn
Allows one to use its info command to view accurate dependencies:
yarn info #angular/router#4.4.7 dependencies
yarn info #angular/router#4.4.7 peerDependencies