GOT with React and Typescript issue with http2

[jlanza]

Describe the bug

• Node.js version: v10.0.7
• OS & version: Ubuntu 18.04.5 LTS

GOT not working well with React Typescript. I don't know if this is a bug, or I haven't found the published solution.

Actual behavior

I'm developing an app with React and typescript and want to use GOT to access my remote API.

When I include :

import got from 'got';
....
const response: Whatever = await got.get("http://192.168.56.14:3001/api/").json();

in my code after installing GOT I get the following error

Error: ENOENT: no such file or directory, open '/mypath/node_modules/http2/lib/index.js'

After installing http2, which is deprecated BTW, I get the following in the console:

./node_modules/http2/lib/protocol/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

./node_modules/keyv/src/index.js
Critical dependency: the request of a dependency is an expression

And this in the browser when calling the frontend:

(anonymous function)
node_modules/@szmarczak/http-timer/dist/source/index.js:4
  1 | "use strict";
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | const defer_to_connect_1 = require("defer-to-connect");
> 4 | const nodejsMajorVersion = Number(process.versions.node.split('.')[0]);
  5 | const timer = (request) => {
  6 |     const timings = {
  7 |         start: Date.now(),
View compiled
./node_modules/@szmarczak/http-timer/dist/source/index.js
http://192.168.56.14:3000/static/js/1.chunk.js:710:30
__webpack_require__
/home/jlanza/projects/science-uc/frontend-react/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/home/jlanza/projects/science-uc/frontend-react/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled

Expected behavior

Nothing as it should be working ;)

Code to reproduce

import React, { Component } from "react";

import got from 'got';

interface StandProps { 
};

interface StandDb {
  id: number,
  name: string,
  description: string,
};

interface StandState {
  stands: Array<StandDb>,
};

export class Stand extends Component<StandProps, StandState> {
  constructor(props: StandProps) {
    super(props);
    this.state = {
      stands:[],
    };
    this.loadStands = this.loadStands.bind(this);
  }

  componentDidMount() {
    this.loadStands();
  }

  async loadStands() {
    const response: Array<StandDb> = await got
      .get("http://192.168.56.14:3001/api").json();
    this.setState({stands: response});
  }

  render() {
    return(
      <div>
        <h1>Stands</h1>
            {
              this.state.stands.map((value, key) => {
                return <h4 key={key}>{value.name}</h4>
              })
            }
      </div>
    )
  }
}

Checklist

• I have read the documentation.
• I have tried my code with the latest version of Node.js and Got.

[sindresorhus]

Got is meant for Node.js. While it can work in the browser with the right polyfills, you're on your own support-wise. Try asking on Stack Overflow instead.

[szmarczak]

Also from the docs:

For browser usage, we recommend Ky by the same people.

[jlanza]

Thanks a lot. I will try ky. If it was in the docs, I missed it :(