Cryptic error when deploying Typescript-React App to Heroku

Question

I have a typescript-react app generated with create-react-app. I've never used Heroku before, and when I'm attempting to deploy by doing git push heroku master the install and build process starts, but always ends up failing with the following error message:

remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:        
remote:        ./src/hooks.ts
remote:        Syntax error: Cannot read property 'map' of undefined (0:undefined)

While the src/hooks.ts is a file in my repo, it doesn't actually have any map on it, which makes me think the error probably comes from elsewhere. Additionally, (0:undefined) is hinting line 0, column undefined which just makes it even more cryptic altogether.

These is part of my package.json:

    "name": "lydian",
    "version": "0.1.0",
    "private": true,
    "engines": {
        "node": "10.x"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "CI=false react-scripts build",
        "postinstall": "tsc && mv -i -v public dist/ && rm -v -rf src",
        "test": "react-scripts test --passWithNoTests",
        "eject": "react-scripts eject",
        "deploy": "git add . && git commit -m Heroku && git push heroku master"
    },

I've tried following tutorials and other resources but Heroku's documentation on deploying a typescript-react app is pretty scarce.

Have you tried building it locally ? I think the issue here is heroku for giving you a cryptic message. — Ambroise Rabier
– Ambroise Rabier, Commented Sep 10, 2020 at 14:27
I have, and it builds successfully. That makes it even harder to debug. Makes me think it could do with the Heroku environment or something. — Daniel Le'Sage
– Daniel Le'Sage, Commented Sep 11, 2020 at 1:44
I doesn't know Heroku, but if you can find some information about what it does exactly, it might be helpful. Also something you can do, is to remove small chunk of source code until you isolate what is breaking heroku in build (same principle as git bisect btw). — Ambroise Rabier
– Ambroise Rabier, Commented Sep 11, 2020 at 16:17
I don't think the error comes from my source code, cause it would then fail when building locally. I think the error comes from either the Heroku environment or some other pre-deploy step that I'm missing. — Daniel Le'Sage
– Daniel Le'Sage, Commented Sep 12, 2020 at 0:38
I wouldn't suppose something, I recommend, you make a react starter app, with minimal source code, and see if it break on heroku. I don't think you have understood the intention. The intention is to find what in your source code is breaking heroku build. So that you can better understand, what is wrong on heroku side. If you think it has nothing to do at all, with your source code, then just send an empty nodeJS hello world app, and see if heroku break or not. — Ambroise Rabier
– Ambroise Rabier, Commented Sep 12, 2020 at 9:42

bschuedzig · Accepted Answer · 2020-09-17 10:20:06Z

3

Although I cannot tell you exactly why it happens, I can tell how we "circumvented" the problem.

We had the exact same error and found a method signature that was responsible for it. (TSC had no problem with it, just react-scripts).

function timeOnChange(newDate: Date | [Date, Date] | null) {
  //...
}

Does work:

function timeOnChange(newDate: Date | null) {
  // ...
}

edit:

This alone is enough to break react-scripts:

function breaks(param: [any, any]) { 
  // ...
}

edited Sep 17, 2020 at 10:20

answered Sep 17, 2020 at 10:12

bschuedzig

313 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alex3683 Over a year ago

Yeah, seems that react-scripts (or whatever underneath) has a general problem with tuple types, starting with TypeScript 4. Apart from removing those tuple types or downgrading there seems to be no real solution.

alex3683 Over a year ago

Probably this is related: github.com/facebook/create-react-app/issues/9515

Collectives™ on Stack Overflow

Cryptic error when deploying Typescript-React App to Heroku

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related