'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 |
|---|
