Webpacker: Error upgrading to 5.1.1 with Typescript

[mikestone14]

I am attempting to upgrade webpacker from version 5.0.1 to 5.1.1 and am getting TS compiler errors. I have updated my babel.config.js to be the Webpacker default and followed the instructions for upgrading webpack with typescript. I can'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.

Below is my package.json, babel.config.js, and tsconfig.js

package.json

{
  "name": "my-app",
  "private": true,
  "scripts": {
    "test": "jest",
    "test:ci": "yarn tslint-check && jest",
    "tslint-check": "tslint-config-prettier-check ./tslint.json"
  },
  "dependencies": {
    "@babel/preset-typescript": "^7.9.0",
    "@rails/actioncable": "^6.0.2-2",
    "@rails/actiontext": "^6.0.2",
    "@rails/activestorage": "^6.0.2-2",
    "@rails/ujs": "^6.0.2-2",
    "@rails/webpacker": "^5.1.1",
    "@types/node": "^13.13.4",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "classnames": "^2.2.6",
    "file-loader": "^6.0.0",
    "materialize-css": "^1.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react_ujs": "^2.6.1",
    "stimulus": "^1.1.1",
    "trix": "^1.2.3",
    "ts-loader": "^7.0.4",
    "turbolinks": "^5.2.0",
    "typescript": "^3.8.3",
    "webpack": "^4.42.1",
    "whatwg-fetch": "^3.0.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "@types/enzyme": "^3.10.5",
    "@types/jest": "^25.2.1",
    "@types/react-router-dom": "^5.1.5",
    "babel-jest": "^26.0.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.0.1",
    "prettier": "^2.0.5",
    "ts-jest": "^25.4.0",
    "tslint": "^6.1.2",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^5.0.0",
    "tslint-react-hooks": "^2.2.2",
    "webpack-dev-server": "^3.10.3"
  }
}

babel.config.js

module.exports = function (api) {
  var validEnv = ['development', 'test', 'production']
  var currentEnv = api.env()
  var isDevelopmentEnv = api.env('development')
  var isProductionEnv = api.env('production')
  var isTestEnv = api.env('test')

  if (!validEnv.includes(currentEnv)) {
    throw new Error(
      'Please specify a valid `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(currentEnv) +
        '.',
    )
  }

  return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current',
          },
          modules: 'commonjs',
        },
        '@babel/preset-react',
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol'],
        },
      ],
      [
        '@babel/preset-react',
        {
          development: isDevelopmentEnv || isTestEnv,
          useBuiltIns: true,
        },
      ],
      ['@babel/preset-typescript', { allExtensions: true, isTSX: true }],
    ].filter(Boolean),
    plugins: [
      'babel-plugin-macros',
      '@babel/plugin-syntax-dynamic-import',
      isTestEnv && 'babel-plugin-dynamic-import-node',
      '@babel/plugin-transform-destructuring',
      [
        '@babel/plugin-proposal-class-properties',
        {
          loose: true,
        },
      ],
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          useBuiltIns: true,
        },
      ],
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
          corejs: false,
        },
      ],
      [
        '@babel/plugin-transform-regenerator',
        {
          async: false,
        },
      ],
      isProductionEnv && [
        'babel-plugin-transform-react-remove-prop-types',
        {
          removeImport: true,
        },
      ],
    ].filter(Boolean),
  }
}

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "jsx": "react",
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*", "app/javascript/*"]
    },
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "**/*.test.ts",
    "**/*.test.tsx",
    "node_modules",
    "vendor",
    "public"
  ],
  "compileOnSave": false
}

Thanks in advance for your help!

[mikestone14]

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 😄 . I'm not sure whether or not I should leave this open or close it, as maybe there's a ticket to update the documentation to come out of this?

[madroneropaulo]

@mikestone14 so did you fix that just by following the upgrade instructions without the "Typescript with React" ? I can't manage to get it work only with that, I'm still getting the typescript error

[mikestone14]

@madroneropaulo yes, following the upgrade instructions without the "Typescript with React" section worked for me. Are you getting the same errors as I posted? How do you package versions and tsconfig compare to what I posted?

[shipstar]

In case it helps someone else, I upgraded webpacker in my Gemfile but forgot to upgrade @rails/webpacker in my package.json. This yielded the "unexpected token" errors mentioned above. 🤦

Matching the versions between Gemfile and package.json solved my issue. 🎉

[Airboy]

On my side, I followed the following instructions in that order:

• Webpacker: Upgrade => https://github.com/rails/webpacker#upgrading
• Webpacker with TS: Upgrading to 5.1 => https://github.com/rails/webpacker/blob/master/docs/typescript.md#upgrading-to-51
• Add the useSpread: true option to @babel/preset-react within the babel config file. You can find more info right here => https://blog.logrocket.com/whats-coming-in-babel-8/. NOTE: Only for those who are using React!
• Upgrade Typescript to the latest version

I hope that would help others with the Webpacker upgrade.