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 inconfig/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 .