error

How to fix the “This project is configured to use Yarn” error on pnpm install

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:

Once you do that, pnpm install will run properly.

How to quickly fix the “Cannot read property ‘then’ of undefined” error in JavaScript

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.
The “Cannot read property ‘then’ of undefined” error occurring in the VS Code terminal.

This could happen for one of the following reasons:

  1. Not returning the Promise in the function with return.
  2. Not returning a value in an async function.
  3. 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.

JavaScript
function fetchData(apiUrl) { // πŸ‘‡ `return` keyword missing fetch(apiUrl).then((response) => { return response.json(); }); } // ❌ Cannot read property 'then' of undefined fetchData('/api/data') .then((data) => console.log(data))

To fix it, simply return the Promise with return:

JavaScript
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.

JavaScript
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.

JavaScript
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:

JavaScript
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.

JavaScript
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))

[SOLVED] 0308010C:digital envelope routines::unsupported

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 in Vue.js.
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.

Shell
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. 

Shell
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.

Shell
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:

Shell
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:

Shell
npm update -g @vue/cli # OR yarn global upgrade --latest @vue/cli

More info on how to upgrade the Vue CLI here.

Fix: Use --openssl-legacy-provider option

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:

Shell
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.

On Linux/Mac:

JSON
{ ... "scripts": { "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack serve", "build": "webpack --mode production" } ... }

On Windows:

JSON
{ ... "scripts": { "start": "set NODE_OPTIONS=--openssl-legacy-provider && node .", "build": "set NODE_OPTIONS=--openssl-legacy-provider && node build.js" } ... }

Make sure the script is cross-platform

But now the scripts aren’t cross-platform.

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.

Shell
npm i cross-env # Yarn yarn add cross-env
JSON
{ ... "scripts": { "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack .", "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider node build.js" }, "devDependencies": { "cross-env": "^7.0.3" } ... }

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:

JSON
{ ... "scripts": { "serve": "cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve", ... }, "devDependencies": { "cross-env": "^7.0.3" ... } ... }

Fix for Create React App

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.

JSON
{ ... "scripts": { "serve": "cross-env NODE_OPTIONS=--openssl-legacy-provider ", ... }, "devDependencies": { "cross-env": "^7.0.3" ... } ... }

Fix: Downgrade to Node.js v16.13.0

To fix the error:0308010C:digital envelope routines::unsupported error in Node.js, downgrade your Node.js version to 16.13.0.

This solution is more of a hack though, as it leaves your app open to security threats.

Install from the official website

Use this official link to download Node.js v16.13.0.

Install with Chocolatey

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.

Shell
# 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.

Shell
nvm install 16.13.0 nvm use 16.13.0

How to quickly fix the ERR_OSSL_EVP_UNSUPPORTED error in Node.js

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.
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.

Shell
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. 

Shell
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.

Shell
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:

Shell
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:

Shell
npm update -g @vue/cli # OR yarn global upgrade --latest @vue/cli

More info on how to upgrade the Vue CLI here.

Fix: Use --openssl-legacy-provider option

To fix the ERR_OSSL_EVP_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, as 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:

Shell
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.

On Linux/Mac:

JSON
{ ... "scripts": { "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack serve", "build": "webpack --mode production" } ... }

On Windows:

JSON
{ ... "scripts": { "start": "set NODE_OPTIONS=--openssl-legacy-provider && node .", "build": "set NODE_OPTIONS=--openssl-legacy-provider && node build.js" } ... }

Make sure the script is cross-platform

But now the scripts aren’t cross-platform.

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.

Shell
npm i cross-env # Yarn yarn add cross-env
JSON
{ ... "scripts": { "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack .", "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider node build.js" }, "devDependencies": { "cross-env": "^7.0.3" } ... }

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:

JSON
{ ... "scripts": { "serve": "cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve", ... }, "devDependencies": { "cross-env": "^7.0.3" ... } ... }

Fix for Create React App

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.

JSON
{ ... "scripts": { "serve": "cross-env NODE_OPTIONS=--openssl-legacy-provider ", ... }, "devDependencies": { "cross-env": "^7.0.3" ... } ... }

Fix: Downgrade to Node.js v16.13.0

To fix the ERR_OSSL_EVP_UNSUPPORTED error in Node.js, downgrade your Node.js version to 16.13.0.

This solution is more of a hack though, as it leaves your app open to security threats.

Install from official website

Use this official link to download Node.js v16.13.0.

Install with Chocolatey

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.

Shell
# 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.

Shell
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.

How to Fix the “Unexpected reserved word ‘enum'” Error in JavaScript

The “Unexpected reserved word ‘enum'” syntax error happens in JavaScript happens because enum is not a valid keyword in JavaScript, but it is reserved.

The "Unexpected reserved word 'enum'" syntax error happening in JavaScript.

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!

JavaScript
// ❌ 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:

JavaScript
const daysOfWeek = { Mon: Symbol('Mon'), Tue: Symbol('Tue'), Wed: Symbol('Wed'), Thu: Symbol('Thu'), Fri: Symbol('Fri'), Sat: Symbol('Sat'), Sun: Symbol('Sun'), }; const dayOfWeek = daysOfWeek.Tue;

With JavaScript symbols, we make sure that the constants are always different values, as every symbol is unique.

No need to worry duplicates – pretty convenient, right?

If we used this:

JavaScript
const daysOfWeek = { Mon: 'Mon', Tue: 'Tue', Wed: 'Wed', Thu: 'Thu', Fri: 'Fri', Sat: 'Sat', Sun: 'Sun', }; const dayOfWeek = daysOfWeek.Tue;

Someone could easily reassign the object’s properties to something else, giving us something more to worry about.

Fix: Just use TypeScript

Ah, TypeScript.

Alway there for us. Filled to the top with juicy modern stuff.

I mean enums aren’t so modern, but it’s one thing TS has that JS doesn’t.

Our first JS code runs flawlessly in TypeScript.

TypeScript
// βœ… No error - enums all the way! enum Color { Red, Blue, Green } const color = Color.Red;

So, if you really need that enum keyword – even though much of the TypeScript community seems to frown on it – change that file extension.

Oh, it could even be that it’s TypeScript you wanted all along. As it happened here.

Here, this person was new to TypeScript on Node (we’ll all been there) and ran his TS file with the node command directly.

Well, Node didn’t care about the extension and just treated the entire thing like a JavaScript file.

The easy solution was to compile it first with tsc before running node on the JS output. Or to use ts-node on the TypeScript file directly.

Key takeaways

So, the few things to keep in mind on fixing the “Unexpected reserved keyword ‘enum'” error in JavaScript:

  1. enum is a no-go in JavaScript (for now): JavaScript doesn’t have enum. It’s reserved for future use.
  2. Use objects with symbol properties: Want to create enumerations in JavaScript? Use objects with symbol properties.
  3. Symbols keep your code safe: Symbols are unique. They stop others from messing with your object’s properties.
  4. TypeScript has enum: Need enum? Switch to TypeScript. It’s got your back.
  5. Remember to compile TypeScript: Using TypeScript for Node.js? Compile your TypeScript files first. Or quickly use ts-node.

How to Fix the “Unexpected strict mode reserved word ‘yield'” Error in JavaScript

The “Unexpected strict mode reserved word ‘yield'” syntax error happens in JavaScript when you use the yield keyword outside a generator function.

The unexpected strict mode reserved word 'yield' error happening in JavaScript

Here’s an example of the error happening:

JavaScript
function* numberGen() { // ❌ SyntaxError: Unexpected strict mode reserved word 'yield' yield 2; yield 4; } const gen = numberGen(); console.log(gen.next().value); console.log(gen.next().value);

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.

JavaScript
function* numberGen() { // βœ… Runs successfully - no error yield 2; yield 4; } const gen = numberGen(); console.log(gen.next().value); // 2 console.log(gen.next().value); // 4

We create generator functions with function*; the * must be there.

Make sure innermost function is generator function

A common reason why the “Unexpected strict mode reserved word ‘yield'” happens is using yield in an inner function that’s in a generator function.

This could be a callback or closure.

JavaScript
function* numberGen() { return () => { for (let i = 0; i < 30; i += 10) { // ❌ SyntaxError: Unexpected strict mode reserved word 'yield' yield i; } } } const gen = numberGen()(); console.log(gen.next().value); console.log(gen.next().value);

You may think the outer function* will let the yield work, but nope – it doesn’t!

You have to make the innermost function a generator:

JavaScript
function numberGen() { return function* () { for (let i = 0; i < 30; i += 10) { // βœ… Runs successfully - no error yield i; } }; } const gen = numberGen()(); console.log(gen.next().value); // 10 console.log(gen.next().value); // 20

Note we removed the * from the outer one, so it acts like a normal function and returns the generator.

Also we change the arrow function a normal one, because arrow functions can’t be generators.

Here’s another example, seen here:

JavaScript
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:

JavaScript
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:

JavaScript
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!