CODEWITHSUNDEEP
reactjstypescriptheroku
Daniel Le'Sage
Daniel Le'Sage

Reputation: 106

Cryptic error when deploying Typescript-React App to Heroku

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.

Upvotes: 1

Views: 379

Answers (1)

bschuedzig
bschuedzig

Reputation: 31

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]) { 
  // ...
}

Upvotes: 3

Related Questions