Trouble integrating axios for API calls in React/Phoenix app with Brunch

Other Questions API
1

Hey everyone, I’m having a hard time getting axios to work in my React/Phoenix project. I’m using Brunch for asset management. I’ve installed axios with npm and added it to the brunch-config.js whitelist. But when I try to use axios.post, I get this error:

Cannot find module "axios/lib/adapters/xhr"

It looks like Brunch isn’t loading axios’s dependencies properly. I can see the file in node_modules/axios/lib/adapters, but it’s not being picked up.

Has anyone run into this with npm modules in a Brunch/Phoenix setup? Any ideas on how to fix it?

Update: Seems like this might be a bigger Brunch issue. I’m having similar problems with React-Bootstrap too. It can’t find the sub-dependencies there either.

Any help would be awesome. Thanks!

2

hey man, i’ve been there. brunch can be a real pain with npm stuff. have u tried using the npm-install-brunch plugin? it helped me out big time with similar issues. just add it to ur dependencies and it should handle the axios import automatically. worth a shot!

3

I’ve encountered similar issues when working with Brunch and external libraries. One workaround that solved it for me was to explicitly require the problematic modules in your entry point file (usually app.js).

Try adding this at the top of your main JavaScript file:

require('axios/lib/adapters/xhr');

This forces Brunch to include the module in the build. You might need to do the same for other missing dependencies.

Another approach is to switch to using CDN versions of these libraries instead of npm. You can include them via script tags in your HTML template, which bypasses Brunch’s module bundling entirely.

If neither of these work, it might be worth considering a switch to a more modern build tool like webpack or Rollup, as they tend to handle npm dependencies more reliably.

4

I’ve faced similar challenges with Brunch and external dependencies. One solution that worked for me was manually copying the required files into my project’s vendor directory. For axios, you’d copy the entire axios folder from node_modules to your vendor directory.

Then, update your brunch-config.js to include these files:

modules: {
  autoRequire: {
    'js/app.js': ['vendor/axios']
  }
}

This approach bypasses Brunch’s npm integration issues. It’s not ideal for long-term maintenance, but it can get you unstuck quickly.

If this doesn’t work, consider exploring alternative build tools like Webpack or Rollup, which tend to handle npm dependencies more seamlessly in my experience.