| Module not found: Can't resolve 'axios' in Next.js: Causes and How to Fix

Module not found: Can't resolve 'axios' in Next.js: Causes and How to Fix

February 10, 2025

Discover why "Module not found: Can't resolve 'axios'" appears in Next.js and learn simple fixes to resolve this common issue in your projects.

What is Module not found: Can't resolve 'axios' in Next.js

Encountering the Error

The error message "Module not found: Can't resolve 'axios' in Next.js" occurs when Next.js is unable to locate the 'axios' module in the node\_modules directory or in your project's specified paths.

This error typically disrupts the build or runtime processes, preventing the application from rendering as expected.

Consequences in Next.js

Rendering Failure: Pages relying on Axios for data fetching may fail to load or display incomplete data.

Compilation Errors: Next.js requires all modules and dependencies to be available for server-side rendering and static generations.

Exploring the Next.js Project Structure

Ensure your pages/, components/, and other critical directories comply with Next.js conventions.

Verify that files under node\_modules/ are not ignored, and check your .gitignore file if necessary.

Code Structure and References

Examine where and how 'axios' is being imported in your components or API routes. Check the import statements like:

import axios from 'axios';

Ensure there are no typos or incorrect paths in your import statements.

Potential Impact on Dependencies

Dependency Chains: If 'axios' is a required dependency indirectly imported through another library, check the dependency chain.

Application Logic: Consider whether alternative modules or functions depend on 'axios', which might also be affected.

Webpack Configuration Considerations

Review any custom webpack configuration in your Next.js project that might affect module resolution, especially if modifications were made:

const withPlugins = require('next-compose-plugins');

module.exports = withPlugins([], {
  webpack(config, options) {
    return config;
  },
});

Ensure any aliasing or module path resolutions include paths to common node\_modules directories.

Collaborative Development Concerns

If working in a team or on multiple machines, confirm that package discrepancies do not exist across different environments.

Collaboratively review project setup and make sure all team members use the same package versions.

What Causes Module not found: Can't resolve 'axios' in Next.js

Potential Causes for the Error "Module not found: Can't resolve 'axios'" in Next.js

Missing Axios Installation: The most common reason for encountering this issue is not having Axios installed in your Next.js project. If the Axios package is not present in your project, the module bundler will not be able to resolve it. Ensure that the package.json file does not have Axios listed, indicating it hasn't been installed.

Incorrect Import Path: If the import statement for Axios is incorrect or misspelled in your code, it can lead to this error. For example, using `import axioss from 'axios';` instead of `import axios from 'axios';` will cause a module resolution error.

Package Corruption: Occasionally, a corrupted node\_modules folder can lead to unresolved module issues. This might happen if there was an error during the package installation process.

Development Environment Issues: If there is an issue with your local development environment, such as a problem with your Node or npm installation, it could potentially cause problems with module resolution.

Monorepo or Custom Node_Modules Resolution: In complex Next.js projects, especially those configured as monorepos with custom module resolution paths, there may be issues with how node_modules are resolved. If Axios is not correctly referenced in these settings, the bundler may fail to locate it.

Version Incompatibility: Installing a version of Axios that is not compatible with your current Next.js or Node.js version could lead to issues during the module resolution process.

Failed Installation Command: If the command to install Axios, such as `npm install axios`, wasn't successfully executed due to network issues, permission errors, or termination before completion, Axios would not be available in the node\_modules, causing this error.

How to Fix Module not found: Can't resolve 'axios' in Next.js

Install Axios in Your Project

Ensure that Axios is installed in your Next.js project. Run the command below to install Axios:

npm install axios

Check Your Import Statements

Ensure that Axios is correctly imported in your component or module. A typical import statement should look like this:

import axios from 'axios';

Verify Node Modules Installation

If the problem persists, your local `node_modules` might be corrupted. Reinstall them by removing the `node_modules` folder and the `package-lock.json` file:

rm -rf node_modules package-lock.json

Then, reinstall the dependencies:

npm install

Ensure Correct Dependency Versioning

Check your `package.json` file for the Axios package. Ensure it is listed under dependencies with the correct version. If missing, add it manually:

"dependencies": {
  "axios": "^0.x.x"
}

Replace `^0.x.x` with the latest Axios version if necessary, based on the Axios documentation or npm repository.

Examine Module Resolution Path

In some cases, the issue might be related to unexpected module resolution paths. Ensure that your `jsconfig.json` or `tsconfig.json` has the correct baseUrl or paths configuration if you have set custom resolution paths.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

Make sure to clear any build caches by running `next build` afterwards.

Check for Conflicting Packages

Sometimes, other packages might interfere with Axios. Review other installed packages and consider removing or updating potentially problematic ones that might affect Axios.