not working with react

[bartoszbinda]

How can I solve this?
Typescript error in file '/home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/home.ts': /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(575,32): error TS1110: Type expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(581,29): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(586,25): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(588,29): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(593,25): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(598,26): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(603,28): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(608,26): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(613,23): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(618,18): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(623,16): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(629,22): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(634,27): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(639,32): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(644,33): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(649,27): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(654,27): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(659,24): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(668,21): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(673,27): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(678,27): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(683,26): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(688,20): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(694,25): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(699,25): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(704,25): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(709,21): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(715,26): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(720,26): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(725,26): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(730,23): error TS1109: Expression expected. /home/bimbok/Programming/webAppForManagingSportClub/app/assets/javascripts/typing/react.d.ts(735,21): error TS1109: Expression expected.

[zarakay]

@bartoszbinda Having the same issue with the same error, you make any progress on this?

[zarakay]

@bartoszbinda Just a heads up, I got it working. Typescript version need to be bumped to the latest version. This current depends on typescript-ruby/typescript-src-ruby#10 to be merged in. In addition .tsx file extension support needs to be added to typescript-rails and typescript-node-ruby. I have done any pull requests for this just yet.

[itepsilon]

Hi. I have the same problem. How can I fix it? or is it going to be merged soon ?

[zarakay]

@itepsilons Hey man,

So since my last post, my team has actually abandoned moving to TypeScript. The main problem being that you cannot use the full TypeScript feature set. The moment you use modules, the compilation strategy changes, instead of compiling a single file at a time, the entire project is needed which doesn't really work well with the asset pipeline as each file is compiled individually before a bundle is made.

However, I do have a smaller team working with TypeScript without modules or any fancy features, just using the basic type system. If you are interested you could follow that approach.

In terms of the pull requests, I am still waiting for typescript-ruby/typescript-src-ruby#10 to be merged. I have not done any of the other pull requests yet. But the changes are available on the following repositories:

OzGuild/typescript-src-ruby on branch '1.8.10'
OzGuild/typescript-node-ruby on branch 'tsx-support'
OzGuild/typescript-rails on branch 'tsx-support'

Good Luck!

[ehsanul]

@mliyanagamage Interesting that TypeScript modules are incompatible with with typescript-rails (and I guess asset-pipeline/sprockets) compilation strategy. I'm looking to move my own team to TypeScript on Rails, but this gives me pause.

Given the problems you mentioned, maybe a better strategy would be to use webpack (or similar) to handle the TypeScript compilation, and then use a gem like https://github.com/mipearson/webpack-rails to integrate it into Rails. Have you considered doing something like this @mliyanagamage?

[zarakay]

So we decided to split out frontend and backend, with rails driving the backend and node serving the frontend. This also makes it easier for us to hire people who have no knowledge of ruby to develop our product. It also ties in nicely with out containerization with kubernetes. But just having a quick glance at the gem, I think it looks like a viable option, although definitely do some tests before committing to it.

[ehsanul]

@mliyanagamage thanks for the response, that works too.

[zarakay]

@ehsanul No problem, good luck. Let me know how it goes if you go with webpack-rails. I might try use it on some smaller projects if it goes well

[actsasbuffoon]

@mliyanagamage Your fork for adding .tsx support is working well for me. Would you mind opening a PR?

If you don't have time, would you mind if I did it? My team could really benefit from your changes.

[zarakay]

@actsasbuffoon Hey man, I am glad to hear that my fork is working out for you. I have gone ahead and opened typescript-ruby/typescript-node-ruby#11 and #46 as requested. Hopefully they will be merged soon.

[preetpalS]

I also forked this gem (https://github.com/preetpalS/typescript-sprockets), mainly because I wanted to be able to use the latest versions of TypeScript installed locally with NPM, and I also wanted to use TypeScript with Sprockets only (like with Middleman-Sprockets (without Rails)). My fork also works with Rails. I added support for JSX (I haven't tested the JSX support extensively though). Feel free to check it out as an alternative if you are still having issues.

[ehsanul]

I can report that the experience with webpack-rails has been pretty good. Seems to me that webpack > sprockets, at least for a complicated-ish web app.