The “This project is configured to use Yarn” error happens in pnpm install when you have a field in your package.json file that specifies Yarn as the package manager.
The package.json field may have come about when you ran a yarn set version ... command, for example, yarn set version stable to set up Yarn Berry, or yarn set version berry to migrate from Yarn v1 to Yarn Berry.
Fix “This project is configured to use Yarn” error
To fix the this pnpm install usage error, simply remove the "packageManager" field from package.json:
The “Cannot read property ‘then’ of undefined” error occurs in JavaScript when you call try then() on a value – typically a function’s return value – but this value is undefined.
The “Cannot read property ‘then’ of undefined” error occurring in the VS Code terminal.
This could happen for one of the following reasons:
Not returning the Promise in the function with return.
Not returning a value in an async function.
Not chaining Promises properly.
To fix it, ensure the function returns actually returns a Promise.
Now let’s look at some specific cases of the error and learn how to fix it in a few easy steps.
Fix: Promise not returned
The “Cannot read property ‘then’ of undefined” happens when you forget to use the return keyword return the Promise from the function.
function fetchData(apiUrl) {
// we return the Promise
return fetch(apiUrl).then((response) => {
return response.json();
});
}
// ✅ Runs successfully
fetchData('/api/data')
.then((data) => console.log(data))
Fix: Asynchronous function doesn’t return a value
The “Cannot read property ‘then’ of undefined” error happens in JavaScript when an async function doesn’t return a value, for example, due to an oversight on our part when writing conditional control flow.
JavaScriptCopied!
async function getUserData(userId) {
if (userId) {
const response = await fetch(`/api/users/${userId}`);
return response.json();
}
// 😕 No return if userId is absent
}
// ❌ Cannot read property 'then' of undefined if userId is absent
getUserData().then(data => console.log(data));
To fix it, check all flow paths and make sure the async function always returns a value.
JavaScriptCopied!
async function getUserData(userId) {
if (userId) {
const response = await fetch(`/api/users/${userId}`);
return response.json();
}
// 👍 Return a resolved Promise even if userId is absent
return Promise.resolve(null);
}
// ✅ Now, we can safely use 'then'
getUserData().then(data => console.log(data));
Fix: Promise is not properly chained
The “Cannot read property ‘then’ of undefined” error occurs in JavaScript when you don’t chain the Promises properly:
JavaScriptCopied!
function fetchAndParseUser(apiUrl) {
fetch(apiUrl)
.then((response) => {
console.log(response);
// 😕 Forgot to return the 'json' Promise
});
}
// ❌ Error: Cannot read property 'then' of undefined
fetchAndParseUser('/api/user')
.then(data => console.log(data))
To fix it in this case, make sure that each then in the chain returns a Promise if we want to continue the chain.
JavaScriptCopied!
function fetchAndParseUser(apiUrl) {
// 👇 Here, we return the 'json' Promise
return fetch(apiUrl)
.then((response) => {
console.log(response);
return response.json(); // 👍 Return the Promise here
});
}
// ✅ Now, we can safely use 'then'
fetchAndParseUser('/api/user')
.then(data => console.log(data))
The error:0308010C:digital envelope routines::unsupported error happens in Node.js when a JavaScript module still uses a flawed OpenSSL version that is incompatible with the version Node.js uses.
The error:0308010C:digital envelope routines::unsupported error occurring.
To fix it, downgrade to Node.js v16.13.0, or use the npm audit fix --force command to upgrade your packages to versions that use the updated OpenSSL version.
Why does the error:0308010C:digital envelope routines::unsupported error occur in Node.js?
In Node.js v17, the Node.js team patched an OpenSSL security vulnerability. This fix introduced a breaking change; if you try to use OpenSSL in Node.js v17 or later versions without also updating those modules that use previous OpenSSL versions, you’ll get this error.
And you’ll get it the next time Node.js is updated to use a newer OpenSSL version with breaking changes and you haven’t updated the OpenSSL-dependent libraries.
Fix: Upgrade NPM packages
To fix the error:0308010C:digital envelope routines::unsupported error, update the Node.js packages causing the error to the latest version.
Run npm audit fix to fix vulnerabilities
You can run the npm audit fix command to identify those packages using the outdated OpenSSL version and fix them automatically.
ShellCopied!
npm audit fix
npm audit fix reviews the project’s dependency tree to identify packages that have known vulnerabilities, and attempts to upgrade and/or fix the vulnerable dependencies to a safe version.
npm audit fix --force
If you want to install semver major updates to vulnerable packages, you can use the --force option.
ShellCopied!
npm audit fix --force
Be cautious with this option: it could potentially break your project.
yarn-audit-fix
If you’re a Yarn user, you can use the yarn-audit-fix package to do what npm audit fix does.
Upgrade Webpack to v5
If you’re using Webpack directly to bundle your files, you can upgrade it to version v5 – specifically, v5.61.0 – to fix the error:0308010C:digital envelope routines::unsupported error.
ShellCopied!
npm i webpack@latest
# Yarn
yarn add webpack@latest
If instead, you’re using a tool like Create React App and the Vue CLI that uses Webpack internally, you’ll upgrade the tool to a version that doesn’t have this error.
Fix for Create React App: Upgrade react-scripts to v5
If you’re using Create React App then you can fix the error:0308010C:digital envelope routines::unsupported error by upgrading react-scripts to version 5, which comes with the newer Webpack version 5.
Install version 5 or later with this command:
ShellCopied!
npm i react-scripts@latest
# Yarn
yarn add react-scripts@latest
Fix for Vue CLI: Upgrade to v5
Similarly for the Vue CLI, you can fix the error:0308010C:digital envelope routines::unsupported error by upgrading the Vue CLI to version 5 which also comes with the newer Webpack version 5.
Install Vue CLI version 5 or later with this command:
ShellCopied!
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
To fix the error:0308010C:digital envelope routines::unsupported error in Node.js, you can also use the --openssl-legacy-provider option when running the script.
This solution is more of a hack though: it leaves your app open to security threats.
The --openssl-legacy-provider option is only available in Node version 17 or later.
Run with script
So for the start script, you’ll use this command:
ShellCopied!
export NODE_OPTIONS=--openssl-legacy-provider && npm run start
# Windows
set NODE_OPTIONS=--openssl-legacy-provider && npm run start
Modify script
You can also set this directly in the script to avoid needless repetition.
They’ll obviously be problematic when collaborating and team members use other operating systems. What do we do? We install the cross-env NPM module and run the script with it.
Now the script runs successfully on every platform.
Fix for Vue CLI
So to fix the error:0308010C:digital envelope routines::unsupported error when using Vue with the Vue CLI, install the cross-env module and set the --openssl-legacy-provider option:
And to fix the error:0308010C:digital envelope routines::unsupported error when using React with Create React App, install the cross-env module and set the --openssl-legacy-provider option.
The ERR_OSSL_EVP_UNSUPPORTED error happens in Node.js when a JavaScript module still uses a flawed OpenSSL version that is incompatible with the version Node.js uses.
The ERR_OSSL_EVP_UNSUPPORTED error occurring.
To fix it, downgrade to Node.js v16.13.0, or use the npm audit fix --force command to upgrade your packages to versions that use the updated OpenSSL version.
Why does the ERR_OSSL_EVP_UNSUPPORTED error occur in Node.js?
In Node.js v17, the Node.js team patched an OpenSSL security vulnerability. This fix introduced a breaking change; if you try to use OpenSSL in Node.js v17 or later versions without simultaneously updating those modules that use previous OpenSSL versions, you’ll get this error.
And you’ll get it the next time Node.js updates to use a newer OpenSSL version with breaking changes and you haven’t updated the OpenSSL-dependent libraries.
Fix: upgrade NPM packages
To fix the ERR_OSSL_EVP_UNSUPPORTED error, update the Node.js packages causing the error to the latest version.
Run npm audit fix to fix vulnerabilities
You can run the npm audit fix command to identify those packages using the outdated OpenSSL version and fix them automatically.
ShellCopied!
npm audit fix
npm audit fix reviews the project’s dependency tree to identify packages that have known vulnerabilities, and attempts to upgrade and/or fix the vulnerable dependencies to a safe version.
npm audit fix --force
If you want to install semver major updates to vulnerable packages, you can use the --force option.
ShellCopied!
npm audit fix --force
Be cautious with this option as it could potentially break your project.
yarn-audit-fix
If you’re a Yarn user, you can use the yarn-audit-fix package to do what npm audit fix does.
Upgrade Webpack to v5
If you’re using Webpack directly to bundle your files, you can upgrade it to version v5 – specifically, v5.61.0 – to fix the ERR_OSSL_EVP_UNSUPPORTED error.
ShellCopied!
npm i webpack@latest
# Yarn
yarn add webpack@latest
If instead, you’re using a tool like Create React App and the Vue CLI that use Webpack internally, you’ll upgrade the tool to a version that doesn’t have this error.
Fix for Create React App: Upgrade react-scripts to v5
If you’re using Create React App then you can fix the ERR_OSSL_EVP_UNSUPPORTED error by upgrading react-scripts to version 5, which comes with the newer Webpack version 5.
Install version 5 or later with this command:
ShellCopied!
npm i react-scripts@latest
# Yarn
yarn add react-scripts@latest
Fix for Vue CLI: Upgrade to v5
Similarly for the Vue CLI, you can fix the ERR_OSSL_EVP_UNSUPPORTED error by upgrading the Vue CLI to version 5 which also comes with the newer Webpack version 5.
Install Vue CLI version 5 or later with this command:
ShellCopied!
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
They’ll obviously be problematic when collaborating and team members use other operating systems. What do we do? We install the cross-env NPM module and run the script with it.
Now the script runs successfully on every platform.
Fix for Vue CLI
So to fix the ERR_OSSL_EVP_UNSUPPORTED error when using Vue with the Vue CLI, install the cross-env module and set the --openssl-legacy-provider option:
And to fix the ERR_OSSL_EVP_UNSUPPORTED error when using React with Create React App, install the cross-env module and set the --openssl-legacy-provider option.
If you’re using Chocolatey, Node.js is available as the nodejs package, meaning you can easily install it in a terminal using the following command.
ShellCopied!
# Use current LTS version
choco install nodejs --version=18.5.0
Install with nvm
If you’re using nvm or nvm-windows, use these commands to quickly install and switch to Node.js v16.13.0.
ShellCopied!
nvm install 16.13.0
nvm use 16.13.0
Key takeaways
The ERR_OSSL_EVP_UNSUPPORTED error in Node.js occurs when a JavaScript module uses an outdated OpenSSL version that is incompatible with the current Node version. This typically happens when Node.js v17 or later versions are used without updating the modules that use previous OpenSSL versions.
To fix this error, you can:
Downgrade to Node.js v16.13.0.
Use the npm audit fix --force or yarn-audit-fix command to upgrade your packages to versions that use the updated OpenSSL version.
If you’re using Webpack, you can upgrade it to version v5.61.0 to fix the error. For Create React App and Vue CLI, you can upgrade them to v5.
Another way to fix the error is to use the --openssl-legacy-provider option when running the script. However, this solution leaves your app open to security threats and is only available in Node version 17 or later.
Downgrading to Node.js v16.13.0 is another way to fix the error. However, this solution also leaves your app open to security threats. You can install this version from the official website, or use Chocolatey, nvm, or nvm-windows to install and switch to this version.
The “Unexpected reserved word ‘enum'” syntax error happens in JavaScript happens because enum is not a valid keyword in JavaScript, but it is reserved.
It was reserved in the ECMAScript specification in case it may become valid in the future.
If it wasn’t reserved, devs could start using it as variable names in their code – making future keyword use impossible!
JavaScriptCopied!
// ❌ SyntaxError: Unexpected reserved word 'enum'
enum Color {
Red,
Blue,
Green
}
const color = Color.Red;
To fix it, represent the enumeration in another way, or change the file to TypeScript.
Fix: Create a JavaScript enum the right way
Enums are useful stuff, but since there’s no enum keyword in JS, we’ll have to find others way to create and use them.
One powerful way to create an enumeration is with an object with JavaScript symbol properties:
Note: As this is a syntax error, we don’t need to call the function for it to happen, and no part of the code runs until we fix it.
To fix the “SyntaxError unexpected strict mode reserved word ‘yield'” error, ensure that the innermost enclosing function containing the yield keyword is a generator function.
function* generator() {
const numbers = [1, 2, 3, 4, 5];
// ❌ SyntaxError: Unexpected strict mode reserved word
numbers.map((n) => yield(n + 1));
}
for (const n of generator()) {
console.log(n);
}
Here the goal was to consume the generator in the for loop, printing out each number one by one.
But the callback is the innermost function that has the yield, and it’s not a generator. Let’s fix this:
JavaScriptCopied!
function* generator() {
const numbers = [1, 2, 3, 4, 5];
// ✅ Runs successfully - no error
yield* numbers.map((n) => n + 1);
}
for (const n of generator()) {
console.log(n);
}
yield* keyword
Wondering about the * in the yield*? It’s a shorter way of looping through the array and yielding each item.
A shorter way of this:
JavaScriptCopied!
function* generator() {
const numbers = [1, 2, 3, 4, 5];
// ✅ Runs successfully - no error
for (const num of numbers.map((n) => n + 1)) {
yield num;
}
}
for (const n of generator()) {
console.log(n);
}
Key takeaways
The “Unexpected strict mode reserved word ‘yield'” error can happen in JavaScript when you mistakenly use the yield keyword outside a generator function.
To fix this error, make sure that the innermost enclosing function containing the yield keyword is actually a generator function.
One common reason for meeting this error is using yield in an inner function that’s not a generator.
Remember, the yield* syntax lets us easily loop through an array and yield each item. No need for a traditional for loop with yield statements.
By understanding and correctly applying these concepts, you can avoid the “Unexpected reserved word ‘yield'” error and ensure smooth execution of your generator functions in JavaScript. Happy coding!
