Having trouble using ts-transformer in webpack build

[arawden]

Which package?
@formatjs/ts-transformer

Describe the bug
I have an application in which I am currently explicitly setting IDs. My workflow looks like:

1. Add a FormattedMessage component to my codebase
2. Extract the messages using the formatjs CLI
3. Compile the messages
4. Assign the IDs which are in the extracted JSON to each FormattedMessage component
5. Build the application and run it.

I am trying to eliminate step 4 by using the ts-transformer tooling within my webpack file as described here

However, after following the documentation, upon loading of the component, I get an error that an ID must be provided to format a message, and the entire application crashes.

I've created a sandbox to try to recreate the problem.

To Reproduce
Steps to reproduce the behavior:

1. Create a React application with react-intl, webpack, and ts-transformer
2. Add a FormattedMessage component to the application without any ID declaration
3. Configure webpack to use ts-transformer in ts-loader
4. Build the application and load it in the browser. The application will crash when it encounters the the FormattedMessage component without an ID.

Expected behavior
The build system injects the IDs into the compiled JS output

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome 85
• Version:
  • react-intl: 5.8.1
  • webpack: 4.42.0
  • webpack-cli: 3.3.39
  • ts-transformer: 2.9.1
  • ts-loader: 6.2.0

[pyrocat101]

@arawden thanks for reporting the issue. While we are looking into it, you can use the babel plugin to unblock yourself:

module.exports = {
  mode: "development",
  entry: {
    bundle: "./src/index.tsx"
  },
  devtool: false,
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-react',
                '@babel/preset-typescript'
              ],
              plugins: [
                [
                  "react-intl",
                  {
                    "extractFromFormatMessageCall": true,
                    "idInterpolationPattern": "[sha512:contenthash:base64:6]",
                    "ast": true
                  }
                ]
              ]
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  output: {
    filename: "[name].js"
  }
};

Note that you might want to run the type checking separately since Babel doesn't do that for you.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[longlho]

Ok looks like create-react-app doesn't allow custom webpack.config.js so you'd have to eject

[unframework]

I ran into the same issue, I think.

One of the core causes was that ts-transformer docs do not mention the extractFromFormatMessageCall flag. Also, it looks like the ts-transformer docs mention an option called idInterpolationPattern but the overrideIdFn option is what actually pulls double-duty as accepting either a function or a pattern string (as per the recent change in #1926).

Could I suggest adding the idInterpolationPattern option to match the configuration approach of e.g. Babel plugin for consistency? The fact that it would not affect existing IDs is important to highlight as well.

Happy to contribute to the docs myself, but the above proposal means changing functionality too.

[longlho]

@unframework any contribution is welcome :)