Webpacker 3.2.0 and typescript project gives "missing appropriate loader" error

[corymcdonald]

I tried to create a new rails/react application with typescript however am running into an issue. I created a new rails application with the following.
rails new myapp --webpack=react

Then I followed the documentation for adding typescript support. Then created a file called hello.tsx in the app/javascript/packs/ directory and copied the basic stateless React component on the typescript language site and received the following output.

ERROR in ./app/javascript/packs/hello.tsx
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type.
| import * as React from "react";
|
| export interface HelloProps { compiler: string; framework: string; }
|
| export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello.tsx
webpack: Failed to compile.

---

When I downgrade the webpacker version in the package.json file webpack compiles the application successfully with the previously released versions.

✅ "@rails/webpacker": "=3.0.2"
✅ "@rails/webpacker": "=3.1.1"
❗️ "@rails/webpacker": "=3.2.0"

[gauravtiwari]

@corymcdonald Please see the changelog: https://github.com/rails/webpacker/blob/master/CHANGELOG.md#breaking-changes

We have moved all loaders to user space so, either you can install it by running the installer or copy the required loaders from https://github.com/rails/webpacker/tree/master/lib/install/loaders

[gauravtiwari]

To generate a new Rails app with typescript support: https://github.com/rails/webpacker#angular-with-typescript

[corymcdonald]

@gauravtiwari

The loader seemed to work just fine. However i'm not using angular. I think the easiest fix is to just update the documentation for typescript support -
https://github.com/rails/webpacker/blob/master/docs/typescript.md to include a section that says you have to include a loader now as well.

One concern that I have is that if someone updates their non-angular project that contains typescript their project will fail to compile and re-running the installers will fail to fix this issue.

I'll submit a quick PR to update the documentation. However is there future consideration to adding a typescript installer, similar to .coffee and .erb?

[gauravtiwari]

@corymcdonald Please do 👍

[guilleiguaran]

I think we should do a typescript installer and make the Angular one dependent on this one, wdyt? @gauravtiwari @corymcdonald

[gauravtiwari]

@guilleiguaran Yeah I was thinking same 👍

[corymcdonald]

I'd agree. I'll start working on this.