CODEWITHSUNDEEP
javascriptreactjstypescriptcreate-react-app
romanonthego
romanonthego

Reputation: 31

create-react-app with typescript compiles functions to something very strange

I've encountered some very, very strange error in my create-react-app application ([email protected]) with typescript (at this point and have no idea if it's relevant or not - error persists through even if I rewrite affected files to plain vanilla js):

I have a very basic plain utility functions to compose action types for redux:

// ...../utils.ts
export type Type = string;
export type Types = {
  [key: string]: Type;
};

export const typeWithPrefix = (prefix: string, type: string): string => {
  return `${prefix}/${type}`;
};

export const typesWithPrefix = (prefix: string, types: Array<string>): Types => {
  return types.reduce((result: Types, type) => {
    result[type] = typeWithPrefix(prefix, type);

    return result;
  }, {});
};

export const asyncTypes = (type: string): Array<string> => {
  return [
    type,
    `${type}_START`,
    `${type}_SUCCESS`,
    `${type}_FAIL`,
    `${type}_FINALLY`
   ];
};

Usage:

// ....auth/types.ts
import { typesWithPrefix, asyncTypes } from '../../utils';

export default typesWithPrefix('auth', [
    ...asyncTypes('SIGN_IN'), 
    ...asyncTypes('SIGN_OUT')
]);

// nothing fancy, plain object:
// => {SIGN_IN: 'auth/SIGN_IN', SIGN_IN_START: 'auth/SIGN_IN_START'....}

In development it works pretty much as you would expect - some utils are imported, plain object with types constants exported;

But as soon as I build application with react-scripts build I see strange thing in browser console: 

Uncaught TypeError: Object(...) is not a function

Inspecting compiled and minified source shows that asyncTypes is actually an Object - see screenshot. As far as my understanding goes in build time one of compilers or minifies decided to fold function calls to constants but how and why - beyond me, especially without ejecting from react-scripts...

So if any of you have any ideas what the hell is going on and how it can be avoided - I would be very, very glad to hear because frankly I'm out of ideas..

Upvotes: 2

Views: 103

Answers (1)

romanonthego
romanonthego

Reputation: 31

Well, since nobody has any clue I'll answer close this one since I did solve the problem with build but I am not sure how and why:

turns out code above

// ....auth/types.ts
import { typesWithPrefix, asyncTypes } from '../../utils';

typesWithPrefix(// ...

does work in development but does not in production;

but the code

// ....auth/types.ts
import * as utils from '../../utils';

utils.typesWithPrefix(// ...

does works both in development and production, despite the fact thats just pure functions as named exports and reexports in index.ts files.

I would love to dig deeper and uncover this mystery but this will require to eject and I really, really don't won't to do it until I can avoid it...

Upvotes: 1

Related Questions