'React Typescript file getting converted to a video format

I have a small React project that I am in the process of converting to typescript. I am currently trying to convert a Context file into Typescript. For reference, here is the original JS code:

import { createContext, useCallback, useState } from "react";
import netlifyIdentity from 'netlify-identity-widget';



export const AppContext = createContext()

export function useAppContext() {
  const [user, setUser] = useState(netlifyIdentity.currentUser())

  const genericAuthedFetch = useCallback((
    endpoint,
    method = 'GET',
    body = null,
  ) => {
    if (!(!!user && !!user.token && !!user.token.access_token)) {
      return Promise.reject('no user token found');
    }

    const options = {
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: 'Bearer ' + user.token.access_token,
      },
      method,
      body: body === null ? null : JSON.stringify(body),
    };


    return fetch(endpoint, options);
  }, [user]);

  const getStockData = (ticker, target) => {
    var url = new URL('.netlify/functions/get-price', window.location.origin)
    url.search = new URLSearchParams({ ticker, target }).toString()
    return genericAuthedFetch(url);
  }

  const createAccount = (params) => {
    return genericAuthedFetch(
      new URL('.netlify/functions/create-account', window.location.origin),
      'POST',
      params);
  }

  const listAccounts = (date) => {
    var url = new URL('.netlify/functions/list-accounts', window.location.origin);
    url.search = new URLSearchParams({ timestamp: date.getTime() }).toString()

    return genericAuthedFetch(url);
  }

  const loginUser = useCallback((user) => {
    fetch(
      new URL('.netlify/functions/make-user', window.location.origin), 
      {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + user.token.access_token,
        },
        method: 'POST'
      }).then((_) =>
      setUser(user))
  }, [setUser])
  const logoutUser = useCallback((user) => setUser(null), [setUser])

  netlifyIdentity.on("login", loginUser);
  netlifyIdentity.on("logout", logoutUser);

  const loginPopup = () => netlifyIdentity.open('login')
  const signupPopup = () => netlifyIdentity.open('signup')
  const logout = () => netlifyIdentity.logout();

  return {
    user,
    logout,
    loginPopup,
    signupPopup,
    getStockData,
    listAccounts,
    createAccount
  }
}

And here is the associated TS code

import React, { createContext, useCallback, useState } from "react";
import netlifyIdentity, { User } from 'netlify-identity-widget';
import { CreateAccountRequest, CreateAccountResponse, GetPriceRequest, GetPriceResponse, ListAccountsRequest, ListAccountsResponse } from "../types/types";

export interface Context {
  user?: User
  logout: () => void
  loginPopup: () => void
  signupPopup: () => void
  getStockData: (req: GetPriceRequest) => Promise<GetPriceResponse>
  listAccounts:(req: ListAccountsRequest) => Promise<ListAccountsResponse>
  createAccount: (req: CreateAccountRequest) => Promise<CreateAccountResponse>
}

export const AppContext: React.Context<Context> = createContext({} as Context)

export function useAppContext() {
  const [user, setUser] = useState(netlifyIdentity.currentUser())

  const genericAuthedFetch = useCallback((
    endpoint: URL,
    method = 'GET',
    body: any = null,
  ) => {
    if (!user?.token?.access_token) {
      return Promise.reject('no user token found');
    }

    const options = {
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: 'Bearer ' + user.token.access_token,
      },
      method,
      body: body === null ? null : JSON.stringify(body),
    };


    return fetch(endpoint, options);
  }, [user]);

  const getStockData = (req: GetPriceRequest) => {
    var url = new URL('.netlify/functions/get-price', window.location.origin)
    url.search = new URLSearchParams({ ticker: req.ticker, target: req.target }).toString()
    return genericAuthedFetch(url);
  }

  const createAccount = (req: CreateAccountRequest) => {
    return genericAuthedFetch(
      new URL('.netlify/functions/create-account', window.location.origin),
      'POST',
      req);
  }

  const listAccounts = (req: ListAccountsRequest) => {
    var url = new URL('.netlify/functions/list-accounts', window.location.origin);
    url.search = new URLSearchParams({ timestamp: req.timestamp.toString() }).toString()

    return genericAuthedFetch(url);
  }

  const loginUser = useCallback((user: User) => {
    fetch(
      new URL('.netlify/functions/make-user', window.location.origin), 
      {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + user?.token?.access_token,
        },
        method: 'POST'
      }).then((_) =>
      setUser(user))
  }, [setUser])
  const logoutUser = useCallback(() => setUser(null), [setUser])

  netlifyIdentity.on("login", loginUser);
  netlifyIdentity.on("logout", logoutUser);

  const loginPopup = () => netlifyIdentity.open('login')
  const signupPopup = () => netlifyIdentity.open('signup')
  const logout = () => netlifyIdentity.logout();

  return {
    user,
    logout,
    loginPopup,
    signupPopup,
    getStockData,
    listAccounts,
    createAccount
  }
}

The problem I am encountering is that when I use the dev server or create a production build using npm run build, the typescript version of this file becomes mangled in a strange way. Specifically, the contents of the typescript file becomes

module.exports = "data:video/MP2T;base64,<base64 encoded typescript file>"


//////////////////
// WEBPACK FOOTER
// ./src/AppContext.ts
// module id = 115
// module chunks = 0

I have done some research, and the only thing I have found is that .ts is also the extension of MPEG transport stream, so that could partially explain it. Something thinks my typescript code is a video file, but I have no idea what is doing that or why.

How do I get this to compile correctly?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source