Webpack i18n build issues

1

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

4 Likes
2

I’m having the same issue and am seeing the same error.
I didn’t add the loaded for soy files (yet) just for js, followed by my babel-loader as per the usage example on the repo: Bitbucket

I even tried just having 1 webpack entry js-file containing

console.log(AJS.I18n.getText('my.global.key'));

But still got the same error about invalid group in regexp.
There’s a similar post here Atlassian Front-End Server utilities
where a babel-related bug was fixed last year so I’m clueless to what the cause is. I’m on versions

"atlassian-webresource-webpack-plugin": "~4.8.0",
"@atlassian/i18n-properties-loader": "~0.7.4",

Maybe @madamczak can shed some light on it? :slight_smile:

2 Likes
3

Hey @rw-dennis and @adisa.craig, thanks for pining me on that one. The problem you mentioned is related to using the old version of Node that doesn’t support a language syntax called RegExp named groups.

The support for the named groups was added in Node version 10:
https://node.green/#ES2018-features--RegExp-named-capture-groups

Additionally, we need String.prototype.matchAll that was added in version 12:
https://node.green/#ES2020-features-String-prototype-matchAll

I’m going to update the package readme to mention the minimal required version of Node.

I hope that solves your problem.

Thanks,
Maciej

Edit: checking further it looks like we need Node 12

3 Likes
4

Hey Maciej,
Updating node indeed seemed to solve the issue on my end. Thanks a bunch, you saved me a lot of time! :+1:
Stay safe,
Cheers, Dennis!

1 Like
5

We might still reconsider downgrading the minimal supported version to version 10. I think we are using only a single API from Node 12 that we could substitute with a non-native API call. Anyway, if you managed to upgrade to Node 12, then you don’t need to worry about any of that :slight_smile:

6

Hey, just to let you know we released both @atlassian/i18n-properties-loader and @atlassian/wrm-react-i18n packages today that have a fixed Node compatibility and are compatible with Node 10+.

Let me know in case you have any other issues.