[SOLVED] Aurelia-i18n + Webpack 4 - help needed

Aurelia-i18n + Webpack 4 - help needed

I followed tips in those topics:

[SOLVED] How to use i18N with backend in au-cli webpack projects?

Failed to load translation with aurelia backend and latest webpack 2.6.1 · Issue #221 · aurelia/i18n · GitHub

But I get this error:

ERROR in ./src/locales/fr_CA/translation.json (./node_modules/bundle-loader?lazy&name=fr_CA!./src/locales/fr_CA/translation.json)
Module parse failed: Unexpected token m in JSON at position 0
You may need an appropriate loader to handle this file type.

Here is my main.ts:

aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'))
    .plugin(PLATFORM.moduleName('aurelia-i18n'), (instance) => {
          let aliases = ['t', 'i18n'];
          // add aliases for 't' attribute
          TCustomAttribute.configureAliases(aliases);

          // register backend plugin
          instance.i18next.use(Backend.with(aurelia.loader));

          // adapt options to your needs (see http://i18next.com/docs/options/)
          // make sure to return the promise of the setup method, in order to guarantee proper loading
          return instance.setup({
              backend: {                                   // <-- configure backend settings
                  loadPath: 'locales/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
              },
              attributes: aliases,
              lng : 'fr_CA',
              fallbackLng : 'en_CA',
              debug : false
          });
      });

and my webpack.config.js (generated with the CLI):

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { ProvidePlugin } = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
  condition ? ensureArray(config) : ensureArray(negativeConfig);

// primary config:
const title = 'Aurelia Navigation Skeleton';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';

const cssRules = [
  { loader: 'css-loader' },
];

module.exports = ({production, server, extractCss, coverage, analyze} = {}) => ({
  resolve: {
    extensions: ['.ts', '.js'],
    modules: [srcDir, 'node_modules'],
      alias: {
          'assets': path.resolve('assets')
      }
  },
  entry: {
    app: ['aurelia-bootstrapper'],
    vendor: ['bluebird'],
  },
  mode: production ? 'production' : 'development',
  output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
    sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
    chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
  },
  performance: { hints: false },
  devServer: {
    contentBase: outDir,
    // serve index.html for all 404 (required for push-state)
    historyApiFallback: true
  },
  devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
  module: {
    rules: [
      // CSS required in JS/TS files should use the style-loader that auto-injects it into the website
      // only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
      {
        test: /\.css$/i,
        issuer: [{ not: [{ test: /\.html$/i }] }],
        use: extractCss ? ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: cssRules
        }) : ['style-loader', ...cssRules],
      },
      {
        test: /\.css$/i,
        issuer: [{ test: /\.html$/i }],
        // CSS required in templates cannot be extracted safely
        // because Aurelia would try to require it again in runtime
        use: cssRules
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        issuer: /\.[tj]s$/i
      },
      {
        test: /\.scss$/,
        use: ['css-loader', 'sass-loader'],
        issuer: /\.html?$/i
      },
      { test: /\.html$/i, loader: 'html-loader' },
      { test: /\.ts?$/i, loader: "ts-loader" },
      { test: /locales(.*)\.json$/i, loader: 'raw-loader' },
      { test: /\.json$/i, loader: 'json-loader', exclude: [/locales(.*)\.json$/i] },
      // use Bluebird as the global Promise implementation:
      { test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },
      // embed small images and fonts as Data Urls and larger ones as files:
      { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
      // load these fonts normally, as files:
      { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
      ...when(coverage, {
        test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
        include: srcDir, exclude: [/\.{spec,test}\.[jt]s$/i],
        enforce: 'post', options: { esModules: true },
      })
    ]
  },
  plugins: [
    new AureliaPlugin(),
    new ProvidePlugin({
        'Promise': 'bluebird'
    }),
    new ModuleDependenciesPlugin({
      'aurelia-testing': [ './compile-spy', './view-spy' ],
      'aurelia-i18n': [ 
             { name: 'locales/en_CA/translation.json', chunk: 'en_CA' },
             { name: 'locales/fr_CA/translation.json', chunk: 'fr_CA' }
      ]
    }),
    new HtmlWebpackPlugin({
      template: 'index.ejs',
      metadata: {
        // available in index.ejs //
        title, server, baseUrl
      }
    }),
    ...when(extractCss, new ExtractTextPlugin({
      filename: production ? '[contenthash].css' : '[id].css',
      allChunks: true
    })),
    ...when(production, new CopyWebpackPlugin([
      { from: 'static/favicon.ico', to: 'favicon.ico' }])),
    ...when(analyze, new BundleAnalyzerPlugin())
  ]
});

What I tried so far:

  1. use raw-loader (doesn’t work)

npm install raw-loader --save

{ test: /\.json$/i, loader: 'raw-loader' },

  1. use pattern and exclude for locales (doesn’t work)

    { test: /locales(.).json$/i, loader: ‘raw-loader’ },
    { test: /.json$/i, loader: ‘json-loader’, exclude: [/locales(.
    ).json$/i] },

The only way I was able to make it work was to rename files with .i18n extension (not ideal):

{ test: /locales(.*)\.i18n$/i, loader: 'json-loader' },
 { test: /\.json$/i, loader: 'json-loader' },
...		
new ModuleDependenciesPlugin({
      'aurelia-testing': [ './compile-spy', './view-spy' ],
      'aurelia-i18n': [ 
             { name: 'locales/en_CA/translation.i18n', chunk: 'en_CA' },
             { name: 'locales/fr_CA/translation.i18n', chunk: 'fr_CA' }
      ]

//main.ts
backend: {   // <-- configure backend settings
       loadPath: 'locales/{{lng}}/{{ns}}.i18n', // <-- XHR settings for where to get the files from
}

Strange enough, it works even with json-loader, not raw-loader.

So how can I configure it to keep .json extension?

I’ve tackled it by adding the following:

{ test: /.json$/i, loader: ‘json-loader’, type: ‘javascript/auto’ },

2 Likes

Works perfectly, thanks!