Webpack i18n build issues

I am attempting to setup a frontend dev server using webpack. I am attempting to use the @atlassian/soy-loader along with the @atlassian/i18n-properties-loader so that I can bundle .soy files that have references to {getText(‘my.key.here’)} with content from a .properties file.

/Using only the soy-loader, I am able to bundle to soy template but when I add the i18n properties loader to webpack and try to bundle I get the following error

SyntaxError: Invalid regular expression: /(?:(?:(?<namespace>(?:[A-Za-z$_][0-9A-Za-z$_]{0,1000})?(?:\[["']default["']])?(?:\.default)?)(?:\.I18n|\[['"]I18n['"]]))|(?:\bI18n))\.getText\(\s*["'](?<key>[\w\.\-\s]+)["']\s*(?<endParam>[,|\)])/: Invalid group

Any help with this is greatly appreciated,

below is the code within my webpack.config.js

const path = require('path');

var outputDir = path.resolve(__dirname, 'dist');
const myI18nFiles = [
  './src/hello-world.properties',
  './src/hello-world_de.properties',
];

module.exports = {
  entry: './src/hello-world.js',
  mode: 'development',
  devtool: 'source-map',
  output: {
    path: outputDir,
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.soy/,
      use: [{
        loader: '@atlassian/i18n-properties-loader',
        options: {
          i18nFiles: myI18nFiles
        }
      },
      {
        loader: '@atlassian/soy-loader',
        options: {
          outputDir: outputDir
        }
      }]
    }]
  },
  resolveLoader: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'loaders')
    ]
  }
};

I have also attempted putting the i18n-properties-loader as a rule for .js files and received the same error

2 Likes