Typescript Could not find declaration file for module 'react'

Mopharr — Fri, 09 Sep 2022 10:34:31 +0000

Typescript has made it easy to locate errors, but most time QuickFix doesn't work. The error Could not find a declaration file for module 'Module Name' often happens when you start typescript. This is because typescript couldn't find the type deceleration for a react-related module. Don't panic it is easy to solve. Let's jump on it

This is what the error message looks like in the terminal and these are ways to solve it.

Install the @type package for the module

// Installing the type module with npm
npm install @type/Module-Name

// Installing the type module for react-dom with npm
npm install @type/react-dom

// Installing the type module with npm

npm install @type/react-reveal

On the other hand, the error below might pop up when npm could not find the type of the module you are trying to install.

If you fall into this error, that the module you are trying to install doesn't provide typing. So let's discuss another way of fixing this.

Using a .d.ts files

What are .d.ts files? These are declaration files that contain only type information. They are only used for checking types and typescript read them the same way it does with the regular .ts file which is mostly determined by the Include and Exclude setting in the tsconfig.json file

So create a .d.ts file in your project file inside your project file, it can have any name you want like the react-reveal.d.ts file (mostly use the module name), let's continue. Inside the file, you need to declare the module like this.

declare module 'module-name'

Make sure you change the module name to the module you are trying to fix the error. In most cases, this fixes the error because, with this, typescript automatically set the module type of any and the code should work fine.
In some cases, we might want to set the type ourselves, if you want to set the type you can just can this to your code

declare module 'module-name' {
    export function myFunction(): string 
}

Unfortunately, if the error isn't clear, we might have another option to fix it,

Adding the eslint-disable next line comment

You can easily resolve the error by adding the eslint-disable next line comment to ignore the error on the code and allow your typescript to run perfectly without error

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { myFunction } from 'module-name';

// Example
import { Bounce } from "react-reveal";

So, with any of these solution Typescript Could not find declaration file for module 'react' can be fix.

If you like the article and it would be beneficial, please like and share for friends to they can benefit.

Thank you

Fixing CROSS Origin Resource Sharing (CORS) from the Front end.

Mopharr — Sat, 18 Dec 2021 02:11:41 +0000

Most front-end developer tends to come across CORS issue and they try to fix it with a solution on Stack overflow as I did, some turns out wrong and some didn't explain fully for better understanding.

In this article, I will talk about CORS and how it can be fixed from the Front End (client-side).

Know Your Enemy, What is CORS? 👹👹

The common Cross Origin Resource Sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.

Why does it Exist?🤔

To protect us! It’s our friend!💯🐕

Most of the time a website will require resources hosted in the same place as the website is, for example, making API calls to the same Back end that is serving the website.🏡

So this policy would be the first layer of protection to avoid other unknown people using our API.⚔️

Why do we end up having CORS issues?

Because in some scenarios we need to request resources from one origin to a different one. For example, when our API is hosted in a different domain than our website (any 3rd party API), or when you need to use web fonts.

CORS doesn’t allow this by default, so an error will appear that can be seen in the browser console.

What is happening between our browser and the destination of our requests?

Web browsers can use special headers to determine whether or not an XMLHttpRequest call should continue or fail.

Let’s get into more technical detail… 👇👇👇👇👇👇👇

OPTIONS request 🧐

Most people know the basic request methods (POST, GET, PUT) but not everyone is familiarized with the OPTIONS method. This request method is used to ask for information from a specific endpoint about what communication options it supports.

This request is used to determine the exact CORS capabilities of the server, which is in turn used to determine whether or not the intended CORS protocol is understood. If the result of the OPTIONS call dictates that the request cannot be made, the actual request to the server will not be executed.

The options contained in an OPTIONS request are the following:

Access-Control-Request-Method: The intended method of the request (e.g. GET or POST)
Access-Control-Request-Headers: An indication of the custom headers that will be sent with the request
Origin: The usual origin header that contains the script's current origin

So our client is asking🤔:

“_I would like to make a GET request with the Content-Type and Accept headers from http://localhost:3000 — is that possible?_”.

curl -i -X OPTIONS localhost:3001/api/ping 
'Access-Control-Request-Method: GET'
'Access-Control-Request-Headers: Content-Type, Accept'
'Origin: <http://localhost:3000>'

The server will include some Access-Control-* headers within the response to indicate whether the request that follows will be allowed or not. These include:

Access-Control-Allow-Origin: The origin that is allowed to make the request, or * if a request can be made from any origin.
Access-Control-Allow-Methods: A comma-separated list of HTTP methods that are allowed.
Access-Control-Allow-Headers: A comma-separated list of the custom headers that are allowed to be sent.
Access-Control-Max-Age: The maximum duration that the response to the pref light request can be cached before another call is made.

The response would then be examined by the browser to decide whether to continue with the requester to abandon it.

So our server is replying🤓:

“I accept requests from every domain (*) and I allow the following methods GET, HEAD, PUT, PATCH, POST, DELETE”

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Vary: Access-Control-Request-Headers
Access-Control-Allow-Headers: Content-Type, Accept
Content-Length: 0
Date: Fri, 05 Apr 2019 11:41:08 GMT
Connection: keep-alive

So if the first request the client is trying to perform meets the requirements it sends the initial request and the process continues normally, and everyone is happy 🎊🎊🎉😁 . If it doesn’t you get a dramatic CORS error which means your initial request wasn’t even sent and you cry 😭.

So, how do we fix it? 🔧

If a CORS issue appears during development, because we are using a local development server, this is not an “error”, it is just an inconvenience that we will learn to solve.

🤔Maybe you are thinking about changing the “origin” header to avoid CORS, forget about it, ‘origin’ is a forbidden header which means you can’t update it.🙄

🤔The next and most common solution is to ask the server to set the headers to *** (allow all)**.

💩🤦‍♀️This is not a good practice, the final domain for the Front end should be whitelisted of course, but to simply allow all is a breach of security that shouldn’t be encouraged.🤦‍♂️💩
While developing our domain is usually localhost and toward the outside world that domain is our IP, unless you whitelist it, which can be ineffective if the IP changes, it is never allowed by CORS restrictions unless you allow all domains. 🤷‍♂️🤷‍♀️

🤓Now the most efficient and least painful way to bypass this restriction for development is to use a proxy. This way we do the request to a proxy server that allows our requests and this one does the request to the original API domain. This request will be performed by a proxy server, not a browser, so it will be able to perform the requests without restrictions. It will also send the original content back to our Front end in the response from the API.👌

There are already built proxy servers, so you don’t have to create your own, just install one cors-proxy from npm and you are all set.

Setting up a CORS proxy 🛠

In my case, I used this:

https://www.npmjs.com/package/local-cors-proxy but there are hundreds. You can install it locally in your project or globally on your computer, depending on if you want to add it to your project development dependencies and make it run while you are developing.

(Usually automating stuff is a good idea, just saying🙄)

In this case, the steps are easy to follow, but just in case I’m going to review them one by one:

Simple Example

API endpoint that we want to request that has CORS issues:

https://www.yourdomain.ie/movies/list

Install dependency by running the following command:

npm i local-cors-proxy

Start proxy for the specific domain if it’s giving you issues:

lcp --proxyUrl https://www.yourdomain.ie

In your client update your API endpoint to point it to your proxy: From this:

<https://www.yourdomain.ie/movies/list>

To this:

<http://localhost:8010/proxy/movies/list>

CORS Fixed 🎉🎉🎉🎉

Conclusion

As I hope you can see now, there is no magic surrounding CORS🧙‍♂️, it’s something “the backend is supposed to fix”. But if you are working with a Public API, we have the issue and now you can fix CORS yourself. Thank You

DEV Community: Mopharr