Unable to resolve module `axios`

Summary

I’m trying to implement Axios into a React Native project. But the bundler refuse to pack, saying it’s not found. I’m not sure if it is a React Native bug (cause i’ve tried on fresh project and it worked) or a Axios one.

I’ve imported that way:

import axios from 'axios';

and it produces:

error: bundling failed: Error: Unable to resolve module axios from /Users/bernard/Dev/Reach/application/App.js: Module axios does not exist in the Haste module map or in these directories: /Users/bernard/Dev/Reach/application/node_modules

This might be related to https://github.com/facebook/react-native/issues/4968 To resolve try the following:

1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*. at ModuleResolver.resolveDependency (/Users/bernard/Dev/Reach/application/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15) at ResolutionRequest.resolveDependency (/Users/bernard/Dev/Reach/application/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18) at DependencyGraph.resolveDependency (/Users/bernard/Dev/Reach/application/node_modules/metro/src/node-haste/DependencyGraph.js:283:16) at Object.resolve (/Users/bernard/Dev/Reach/application/node_modules/metro/src/lib/transformHelpers.js:261:42) at dependencies.map.result (/Users/bernard/Dev/Reach/application/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31) at Array.map (<anonymous>) at resolveDependencies (/Users/bernard/Dev/Reach/application/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18) at /Users/bernard/Dev/Reach/application/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33 at Generator.next (<anonymous>) at asyncGeneratorStep (/Users/bernard/Dev/Reach/application/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

I’ve tried a lot of things:

• Doing all the command in error message => same bug
• Removing node_modules and all lock files then reinstalling => same bug
• Switching from/to yarn/npm => same bug
• Importing directly axios/dist/index => same bug.

I’m kinda desperate and i’m requiring your help…

Context

• axios version: 0.19.0
• Environment: node v10.15.3, mac os x 10.14.5, react 16.8.3, react native 0.59.9

[icaroharry]

I had this config in my metro.config.js:

  resolver: {
    blacklistRE: blacklist([
      /nodejs-assets\/.*/,
      /android\/.*/,
      /ios\/.*/,
    ]),
  },

It turns out axios matches the regex /ios\/.*/ so the lib was being ignored by the metro bundler. I changed it to /\/ios\/.*/ and it worked:

  resolver: {
    blacklistRE: blacklist([
      /nodejs-assets\/.*/,
      /\/android\/.*/,
      /\/ios\/.*/,
    ]),
  },

[nirsky]

I’m also getting the same error, tried configuring the metro.config.js with extraNodeModules:

const config = {
  resolver: {
      extraNodeModules: {
        'axios': path.resolve(__dirname, './node_modules/axios/index.js')
      }
  },
};

paths tried:

• './node_modules/axios/index'
• './node_modules/axios/lib/axios'
• './node_modules/axios'
• './node_modules/axios/dist/axios'

Nothing works… 🤷‍♂️