How to configure Typescript for react-universally?

[Falieson]

Motivation: I've been seeking a typescript-react-universal starter for a week, and who hasn't been on the hunt since starting React? CRA w/ TS script plugin was good but I didn't like any solution I've found for doing universal w/ CRA and other people's repos were tough to figure out how to plugin TS too. This repo hits all the checkboxes for me except there is no TS feature branch, so I've started my TS fork here: https://github.com/Falieson/react-universally--typescript (Commit: https://github.com/Falieson/react-universally--typescript/commit/ce0f76132e61231000c16b323e9df6a83b68d372 ) I'm receiving an error when setting up react-universal w/ typescript:

REQUEST: Received for "/counter"
SERVER: Error in server execution, check the console for more info.
(node:19065) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1):Invariant Violation: Invalid tag: http://0.0.0.0:7331/client/68f9c2efb95ab7eb43bf6edb10fafb26.tsx
SERVER: Error in server execution, check the console for more info.
(node:19065) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Any other TS enthusiasts fixed this error already? I've posted to stack too https://stackoverflow.com/questions/47268473/

• Falieson

P.S. when I get the fork working I'm going to setup a new repo w/ redux, kea, more tooling, at: https://github.com/Falieson/2017-typescript-react

[Falieson]

@domir I've been basing my changes off your PR (#241) , do you have a working fork of a recent version of Universally w/ TS or suggestions for my issue?

[fivethreeo]

Add

process.on('unhandledRejection', (reason, p) => {
  console.log(reason.stack);
});

To the bottom of server/index.ts

[Falieson]

@fivethreeo Thank you for the hint!!

REQUEST: Received for "/"
Error: Invariant Violation: Invalid tag: http://0.0.0.0:7331/client/68f9c2efb9  5ab7eb43bf6edb10fafb26.tsx

  - invariant.js:44 invariant
    [fork-react-universally--typescript]/[fbjs]/lib/invariant.js:44:15

  - ReactDOMComponent.js:345 validateDangerousTag
    [fork-react-universally--typescript]/[react-dom]/lib/ReactDOMComponent.js:34    5:74

  - ReactDOMComponent.js:372 new ReactDOMComponent
    [fork-react-universally--typescript]/[react-dom]/lib/ReactDOMComponent.js:37    2:3

  - ReactHostComponent.js:41 Object.createInternalComponent
    [fork-react-universally--typescript]/[react-dom]/lib/ReactHostComponent.js:4    1:10

  - instantiateReactComponent.js:79 ReactCompositeComponentWrapper.instantiateRe    actComponent [as _instantiateReactComponent]
    [fork-react-universally--typescript]/[react-dom]/lib/instantiateReactCompone    nt.js:79:37

  - ReactCompositeComponent.js:366 ReactCompositeComponentWrapper.performInitial    Mount
    [fork-react-universally--typescript]/[react-dom]/lib/ReactCompositeComponent    .js:366:22

  - ReactCompositeComponent.js:257 ReactCompositeComponentWrapper.mountComponent    [fork-react-universally--typescript]/[react-dom]/lib/ReactCompositeComponent    .js:257:21

  - ReactReconciler.js:45 Object.mountComponent
    [fork-react-universally--typescript]/[react-dom]/lib/ReactReconciler.js:45:3    5

  - ReactCompositeComponent.js:370 ReactCompositeComponentWrapper.performInitial    Mount
    [fork-react-universally--typescript]/[react-dom]/lib/ReactCompositeComponent    .js:370:34

  - ReactCompositeComponent.js:257 ReactCompositeComponentWrapper.mountComponent    [fork-react-universally--typescript]/[react-dom]/lib/ReactCompositeComponent    .js:257:21

[Falieson]

My tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["es6", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "newLine": "LF",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "outDir": "build/dist",
    "preserveConstEnums": true,
    "removeComments": true,
    "rootDir": "shared",
    "sourceMap": true,    
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5"
  },
  "exclude": [...]
}

Maybe the outDir should not be set or set to build/client ?

[Falieson]

Maybe this is helpful...

In my build/client/ directory I have 2 files: index-522575c9f6052d599d68.js and 68f9c2efb95ab7eb43bf6edb10fafb26.tsx

I imagine that if everything was configured properly that I would only have the .js file?

[Falieson]

Sorry for so much traffic on this non-issue issue, I've put a $50 bounty on helping me, and have moved the request to a ticket on my fork: https://github.com/Falieson/react-universally--typescript/issues/1

[Falieson]

I got some help on my fork, so I'm going to close this ticket.

But if there's interest in making a typescript feature branch (yes please!) make a new issue on my fork. I propose we approach it in 2 stages: A) convert the whole DemoApp to .ts/.tsx B) convert the whole repo to use typescript