Unable to find module 'path-to-regexp'

Unable to find module 'path-to-regexp' - javascript

I am trying to use the library path-to-regexp in my typescript project but for some reason, it isn't allowing me to import it. I used npm install path-to-regexp --save with and without the --save to try to get it working but that didn't change anything.
My package.json says that I do have it installed ("path-to-regexp": "^6.1.0") so it confuses me why vscode would say that it can't find it.
Looking in the node_modules folder I do have path-to-regex installed there. I even tried deleting node_modules and package-lock.json and then running npm i but that didn't change anything.
I am trying to import it with es2015 modules as import * as pathToRegexp from 'path-to-regexp'

I found the problem.
The structure of the module causes problems with typescript's import system have two different dist folders.
│ History.md
│ LICENSE
│ package.json
│ Readme.md
│
├───dist
│ index.d.ts
│ index.js
│ index.js.map
│ index.spec.d.ts
│ index.spec.js
│ index.spec.js.map
│
└───dist.es2015
index.js
index.js.map
index.spec.js
index.spec.js.map
All I had to do was choose one of them with the typescript config:
"compilerOptions": {
"baseUrl": "./",
"paths": {
"path-to-regexp": ["node_modules/path-to-regexp/dist/index"]
}
}
EDIT 2.0!!!!!
The easy fix is just to set the compiler option "moduleResolution": "node"

Related

How do I get past this error to host my website locally? [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

Problem in deploying my portfolio website in vercel [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"

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

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 does an import from node_modules really work in ReactJS?

I installed react-vis via npm install react-vis
and its possible to write
import { XYPlot, LineSeries } from 'react-vis';
I want to know how the systems knows where XYPlot and LineSeries are? I looked in the node_modules directory and there is no index.js.
The structure of the react-vis directory is the following
my-app/
├─ node_modules/
│ ├─ react-vis/
│ │ ├─ dist/
│ │ ├─ es/
│ │ ├─ CHANGELOG.md
│ │ ├─ LICENSE
│ │ ├─ package.json
│ │ ├─ README.md
How does this work?
I researched and for example this does not helped me: Where { component } from 'react' is located when we are importing ReactJS?
Edit
I think it looks in the package.json that is inside the react-vis directory. There are two entries that look interesting. "name": "dist" and "module": "es". I think that i have to look inside the dist directory. Inside the dist directory, there is an index.js file. I open this file and on line 318 it says exports.XYPlot = _xyPlot2.default;
In the es folder inside the index.js there is on line 98 this: export { _XYPlot as XYPlot }; I don't know if this is important.

Imported class in angular is undefined

I have an npm project with the following structure:
app-dep
├── dist
│ ├── bundle.js
│ └── bundle.js.map
├── node_modules/
├── package.json
├── package-lock.json
├── src
│ ├── base-component.ts
│ ├── factory.ts
│ ├── app.ts
│ └── modules/
├── tsconfig.json
└── webpack.config.js
My app.ts code has an App class that utilizes all .ts files inside src/
export default class App extends HTMLElement { //some-content }
I use webpack to build a bundle.js inside the dist/ folder.
I have another angular project where I install this app-dep project using
npm install --save ../app-dep
When I try to use it in my angular component:
import App from 'app-renderer/dist/bundle';
ngOnInit() {
window.customElements.define('micro-app', App);
}
I get this error:
Failed to execute 'define' on 'CustomElementRegistry': parameter 2 is not of type 'Function'
When I try to log it on console, all I can see is undefined.
It seems that I can't import basic functions even.
Can you tell me what's wrong?

I think the problem has to do with the import or the pack, I ellaborate below with the steps to follow.
Also, make sure that you are exporting all the classes that you want to make available from the outside.
For TypeScript libraries
You can simply use "tsc" and then pack the generated code inside the dist folder with "npm pack" and install the dependency in your application with "npm install ".
This may get complicated due to the different module systems and bundlers, check this links for more info on Webpack:
https://marcobotto.com/blog/compiling-and-bundling-typescript-libraries-with-webpack/
https://webpack.js.org/guides/author-libraries/
For CSS libraries
The "npm pack" has to be executed in the root folder. You may want to process your styles with sass before and only pack the result.
For Angular libraries
By default with Angular CLI when you build a library project the code is generated in /dist/mylibrary folder.
If you want to use that code in other project, the steps are:
Build your library with "ng build mylibrary" (add --prod for production).
From your library, move into /dist/mylibrary folder and then execute a "npm pack", that will generate a tgz package.
From your application in which you want to use the library execute "npm install " to install the dependency.
To import code from the library use "import * from 'mylibrary'"
Other option would be using "npm link", that creates a link between your node_nodules and the library code as explained here:
https://www.willtaylor.blog/complete-guide-to-angular-libraries/
That would be the way to go with local libraries, usually these libraries are published into Npm repository (public or private) and installed remotely with "npm install ". These steps are only for local usage.

Sharing Code between Multiple React Applications with Symlinks

I currently have two separate frontend applications. A lightweight mobile client and a heavyweight administration panel. Both were created with CRA. We use TypeScript for everything.
Currently, the directory structure is as follows:
root
├── admin (created using create-react-app)
| ├── node_modules
| ├── public
| ├── src
| │ └── common (symlink)
│ │ └── index.ts
| ├── package.json
| └── tsconfig.json
├── mobile (created using create-react-app)
| ├── node_modules
| ├── public
| ├── src
| │ └── common (symlink)
│ │ └── index.ts
| ├── package.json
| └── tsconfig.json
└── common (linked)
├── src
├── package.json
└── tsconfig.json
For whatever reason, CRA does not respect the symlinks. It's as if no files are even there.
Is there a sanctioned way to do something like this?
Right now, we're copying files into the two repositories with another script. I also tried to use yarn link, but Typescript can't resolve the files properly (it keeps expecting to see a JavaScript).

There is a few different approaches.
You could package it as a library and import said library in to your projects. The library can be hosted on a private or public Git host and reference the Git URL in your package.json just like a NPM package.
"dependencies": {
"your-lib": "git+ssh://git#domain.com:name/repo.git",
}
This approach forces you to push your code and re-install on every change though. And might be hard to work with if changes occur often in your code.
You can also use something like Lerna to organize your codebase in to a multi package repository.
https://github.com/lerna/lerna

I believe the easiest way is to use yarn workspaces (https://classic.yarnpkg.com/blog/2017/08/02/introducing-workspaces/), for this you need to define in root package.json with dependencies, like this
"workspaces": [
"admin",
"mobile",
"common"
]
And then you can use yarn install, and it's should work out of the box.
Before you would try it please, unlink common, to ensure that it works as it should.
Also, you need to have dependencies in admin and mobile on common package.

I'm using yarn link and it works perfectly. The difference could be, that I'm fully building (with rollup) the ts library (common) code.
Tips/tricks:
have "declaration": true in the common package's tsconfig.json
sometimes if the new stuff is not picked up, use Restart TS server in VSCode
have some yarn start build watch running in both packages (for tsc-watch or any other build), this way all changes will be picked up immediately
it could be worth checking ls -ald node_modules/<mypkg> if it really is a symlink, because any other npm install could remove it (yarn seems to be better in this)

We Keep Coding

JavaScript is the programming language of the Web.