Unable to merge json files

[alveshelio]

Hi,

I've created a project with a custom webpack and using Typescript and I'm trying to merge i18n json files into a single one but it is not generating any output.

Here's my Webpack 4 file

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin")
const webpackMerge = require('webpack-merge');
const path = require('path');

const mergeJsonPlugin = new MergeJsonWebpackPlugin({
  "encoding": "ascii",
  "debug": true,
  "output": {
    "groupBy": [
      {
        "pattern": "{./src/components/app/i18n/app-fr.json}",
        "fileName": "./src/i18n/app-fr.json"
      },
      {
        "pattern": "{./src/components/app/i18n/app-en.json}",
        "fileName": "./src/i18n/app-en.json"
      },
    ]
  },
  "globOptions": {
    "nosort": true
  }
});

const loadPresets = require('./build-utils/loadPresets');
const modeConfig = env => require(`./build-utils/webpack.${env}`)(env);

function srcPath(subdir) {
	return path.join(__dirname, './src', subdir);
}

module.exports = ({ mode, presets } = { mode: 'production', presets: [] }) => webpackMerge(
  {
    entry: './src/index.tsx',
    mode,
    output: {
      filename: 'bundle.js',
      publicPath: '/',
    },
    devServer: {
      port: 3000,
      historyApiFallback: true,
    },
    resolve: {
      // Add `.ts` and `.tsx` as a resolvable extension.
      extensions: [".ts", ".tsx", ".js"],
      alias: {
        actions: srcPath('store/actions'),
        reducers: srcPath('store/reducers'),
        components: srcPath('components'),
        store: srcPath('store'),
        types: srcPath('types'),
        actiontypes: srcPath('store/actiontypes'),
      },
    },
    module: {
      rules: [
        {
          test: /\.jpe?g/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 5000,
              }
            }
          ],
        },
      ],
    },
    plugins: [new HtmlWebpackPlugin({
      title: 'Préposé au contenu',
      template: './public/index.html',
      filename: './index.html'
    }), new webpack.ProgressPlugin(), mergeJsonPlugin]
  },
  modeConfig(mode),
  loadPresets({ mode, presets }),
);

Here's the plugin debug output

MergeJsonWebpackPluginMergeJsonsWebpackPlugin emit started...
MergeJsonsWebpackPlugin emit completed...                                                                                                            MergeJsonWebpackPluginMergeJsonsWebpackPlugin after-emit starts...
MergeJsonsWebpackPlugin after-emit completed... 

Am I doing something wrong?

Thank you for your time and effort you put into this plugin.

[tettusud]

@alveshelio thanks for using the plugin, when there is only one entry in the pattern ,could you please remove the {} brackets, like shown below and give a try?

Change this,

"groupBy": [
      {
        "pattern": "{./src/components/app/i18n/app-fr.json}",
        "fileName": "./src/i18n/app-fr.json"
      }

to

 "groupBy": [
      {
        "pattern": "./src/components/app/i18n/app-fr.json",
        "fileName": "./src/i18n/app-fr.json"
      },

Please let me know if the issue still persists

[alveshelio]

Hi @tettusud

Thank you for the quick follow up.

I've made the changes you suggested but it's still not generating the output

[tettusud]

@alveshelio can you try relative path or src not ./src can you give one more try please ?

[lmislm]

Confirm your "webpack-dev-server" version is "^3.1.10" or later,and add "devServer: { writeToDisk: true }," to webpack.config.js。devServer.writeToDisk