How To Fix Module Not Found: Can’t Resolve ‘@Date-io/Date-fns’

You encountered the error message “Module not found: Can’t resolve ‘@date-io/date-fns'” while working in your React application. This article will show you how to fix this error. Let’s see how that is.

Reason for getting this error message

Reproduce the error case:

import DateFnsAdapter from '@date-io/date-fns';

// Other lines of code...

Output:

The reason why you are getting this error is that the ‘@date-io/date-fns’ module is not installed on your computer. You need to install it before using it, and then you won’t have this problem anymore.

Solution for error “Module not found: Can’t resolve ‘@date-io/date-fns’“

As mentioned above, you must install the ‘@date-io/date-fns’ module on your computer. 

To do that, open the terminal in the root directory of your project and execute the following command:

NPM

npm install @date-io/date-fns date-fns

Yarn

yarn add @date-io/date-fns date-fns

After successful installation, ensure that the ‘dependencies’ object in package.json file contains the ‘@date-io/date-fns’ package. Your package.json file should look like this:

{
    // ...
    "dependencies": {
        "@date-io/date-fns": "^2.13.1",
        "date-fns": "^2.28.0",
    },
	// ...
}

If you check your package.json file and don’t find the ‘@date-io/date-fns’ package, as shown above, you have failed to install it.

At this point, you can choose to run the install command again. In addition, you can manually fill in your package.json file with the same content as the example shown above and then execute the command npm install. Note, please enter the version you want to install. The above example is just a specific case.

Now you can use the ‘@date-io/date-fns’ module in your project. You can test it yourself through a short program:

import DateFnsAdapter from '@date-io/date-fns';

const demoDateFns = new DateFnsAdapter();
const initialDate = demoDateFns.date('2022-10-15T12:00:00.000Z');
console.log(initialDate);

Output:

2022-10-15T12:00:00.000Z

In case the error persists, try deleting the ‘node_modules’ folder and ‘package-lock.json‘ file, then run the npm install command again. Run the following commands on terminal:

rm -rf node_modules

rm -f package-lock.json

npm install

After executing the above commands, I recommend you restart the IDE and development server.

Beside @date-io/date-fns, there are some other modules you can consider using such as: @date-io/moment, @date-io/luxon, @date-io/dayjs. You can find the installation and usage instructions in their GitHub repository if you want to use them.

Summary

That is all we want to discuss about the “Module not found: Can’t resolve ‘@date-io/date-fns'” error. We hope you understand the information we conveyed in the article and hope it helps you. Thanks for your reading!

Maybe you are interested:

• Export ‘usehistory’ was not found in react-router-dom
• module not found: can’t resolve @emotion/react
• Module not found: Can’t resolve ‘@mui/material’
• Module not found: Can’t resolve ‘react-bootstrap’ in React

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js