WTF updating Webpacker from 5.0.1 to 5.1.1

I attempted to upgrade webpacker from version 5.0.1 to 5.1.1 and got a number of TS compiler errors. I updated my babel.config.js to be the Webpacker default and followed the instructions for upgrading webpack with typescript but couldn’t seem to find why I’m still getting the following errors:

SyntaxError: /path-to-file.tsx: Unexpected reserved word 'interface' (6:0)

  4 | import { Layout } from '../src/website/layouts/Layout'
  5 |
> 6 | interface IProps {
ERROR in ./app/javascript/src/admin/app/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /path-to-file.tsx: Unexpected token (10:20)

   8 |
   9 |   if (websitePage) {
> 10 |     ReactDOM.render(<Router />, websitePage)
     |                     ^
  11 |   }
  12 | }
[tsl] ERROR in /path-to-file.ts(3,380)
TS2554: Expected 2 arguments, but got 1.

For anyone running into this issue, here’s what I found:

  • The upgrade instructions say to remove the config/webpack/loaders/typescript.js file and the lines referencing the file in config/webpack/environment.js .
  • Below the upgrade instructions is a “Typescript with React” section that asks you to run bundle exec rails webpacker:install:typescript . This command adds the loader back into the project. You don’t want this!

My assumption was that I had to follow the “Typescript with React” steps along with the “Upgrading to 5.1 steps”. I was wrong :smile: .

I’m also really annoyed by this (5.1 introduces TypeScript property errors (too strict?) · Issue #2558 · rails/webpacker · GitHub), they introduced a significant breaking change in the 5.1 release. The new loader breaks Stimulus controllers using TypeScript.