Search code examples
typescripttsclitesbuild

using axios in a modern-web web-dev-server setup using lit, esbuild and ts results in an error while transforming axios/lib/adapters/http.js

Minimal Reproducible Example

First, here's a repo where the problem can be reproduced:

https://github.com/wimdetroyer/litelement-ts-esbuild-axios

the problem can be reproduced by running either npm run start or npm run test

Problem

I'm trying to add the axios dependency in the lit-element-ts-build: https://github.com/modernweb-dev/example-projects/tree/master/lit-element-ts-esbuild

Here's the changed MyElement.ts file:


import axios from "axios";

export class MyElement extends LitElement {
  static styles = css`
    :host {
      display: block;
      padding: 25px;
      color: var(--my-element-text-color, #000);
    }
  `;

  @property({ type: String }) title = 'Hey there';

  @property({ type: Number }) counter = 5;

  __increment() {
    this.counter += 1;
    axios.get('https://example.com').then(
        res => {
          console.log(res)
        }
    )
  }

All great, but running npm start or npm test yields the following:

Error while transforming node_modules/axios/lib/platform/node/classes/URLSearchParams.js: Could not resolve import "url".

  1 | 'use strict';
  2 | 
> 3 | import url from 'url';
    |       ^
  4 | export default url.URLSearchParams;
  5 |

after adding the 'url' dependency via npm i url (which I already feel shouldn't be part of the solution) that becomes:

Error while transforming node_modules/axios/lib/adapters/http.js: Could not resolve import "http".

   6 | import buildURL from './../helpers/buildURL.js';
   7 | import {getProxyForUrl} from 'proxy-from-env';
>  8 | import http from 'http';
     |       ^
   9 | import https from 'https';
  10 | import followRedirects from 'follow-redirects';
  11 | import zlib from 'zlib';

But from this point on I'm stumped.

From what I can tell, axios is using the adapters it should use in a node.js environment, instead of the ones for the browser (?)

Solution

  • This looks like an issue with how the axios library is resolved. The default import for browser environment points to a module that ends up importing those Node built in modules. I've filed an issue here: https://github.com/axios/axios/issues/5495

    The workaround for now would be to patch the package.json of axios such that the default browser import points to ./dist/esm/axios.js here https://github.com/axios/axios/blob/6600d51e6bbb7db984484ea09f62ec22f9044ed8/package.json#L14

    Something like patch-package can be used until axios releases a new version with this fix, if they choose to accept this solution.

    It is possible to force the node resolve in Web Dev Server to also apply the browsers substitution for axios by adding to the web-dev-server.config.mjs

    export default {
  plugins: [esbuildPlugin({ ts: true })],
  nodeResolve: {
    browser: true,
  },
};

    but that also ends up causing some issue with a commonjs package trying to be imported and there's an issue with trying to use @rollup/plugin-commjs to resolve that noted here https://github.com/modernweb-dev/web/issues/1700.