Skip to content

Not able to bundle Axios 0.30.0 for browsers, seemingly due to a folder reference and mainFiles entry in axios #4187

@wwaaijer-exh

Description

@wwaaijer-exh

When trying to create a browser bundle which depends on axios@0.30.0 the following error is returned:

✘ [ERROR] Could not resolve "./node/"

    node_modules/axios/lib/platform/index.js:3:25:
      3 │ module.exports = require('./node/');

Steps to reproduce with axios and esbuild

  • npm init -y
  • npm install axios@0.30.0
  • Create a file main.mjs with the following content:
import axios from "axios";

axios.get('https://exaple.com')
  .then(() => console.log('ok'));
  • Run npx esbuild --bundle --platform=browser main.mjs

Steps to reproduce with just esbuild

See the speculation section below, I think I've found the issue and created a fairly minimal reproduction of how axios triggers the issue in the "Try in the browser" tool.

https://esbuild.github.io/try/#YgAwLjI1LjQALS1idW5kbGUgLS1wbGF0Zm9ybT1icm93c2VyAGUAZW50cnkuanMAaW1wb3J0IGF4aW9zIGZyb20gImF4aW9zIjsKCmF4aW9zLmdldCgnaHR0cHM6Ly9leGFwbGUuY29tJykKICAudGhlbigoKSA9PiBjb25zb2xlLmxvZygnb2snKSk7CgAAbm9kZV9tb2R1bGVzL2F4aW9zL3BhY2thZ2UuanNvbgB7CiAgImJyb3dzZXIiOiB7CiAgICAiLi9ub2RlL2luZGV4LmpzIjogIi4vYnJvd3Nlci9pbmRleC5qcyIKICB9Cn0AAG5vZGVfbW9kdWxlcy9heGlvcy9pbmRleC5qcwBtb2R1bGUuZXhwb3J0cyA9IHJlcXVpcmUoJy4vbm9kZS8nKTsAAG5vZGVfbW9kdWxlcy9heGlvcy9ub2RlL2luZGV4LmpzAG1vZHVsZS5leHBvcnRzID0geyBnZXQ6ICgpID0+IG5ldyBQcm9taXNlKCdOb2RlJykgfQAAbm9kZV9tb2R1bGVzL2F4aW9zL2Jyb3dzZXIvaW5kZXguanMAbW9kdWxlLmV4cG9ydHMgPSB7IGdldDogKCkgPT4gbmV3IFByb21pc2UoJ0Jyb3dzZXInKSB9

Speculation

This seems to be caused by axios it's package.json containing this entry:

{
  "browser": {
    "./lib/platform/node/index.js": "./lib/platform/browser/index.js"
  },
}

And by the axios file lib/platform/index.js containing a reference to ./node/, with a trailing slash:

'use strict';

module.exports = require('./node/');
  • There is no error if the trailing slash is removed: require('./node')
  • There is no error if the file is referenced directly: require('./node/index.js')
  • There is no error if the bundle is targeting node: npx esbuild --bundle --platform=node main.mjs

Conclusion

I belief esbuild is currently not correctly handling the resolution of folder references with a trailing slash when there is a matching mainFile entry for the index file or the targeted folder in the package.json?

This seems to be breaking the bundling of the axios 0.30.0 (the latest 0.x.x release) for browsers.

Thanks for looking into this 🙏

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions