Webpack Module parse failed (.po)

Question

I have problem with webpack .po loader.

What I am doing is

**package.json **

- "json-loader": "^0.5.7",
- "po-loader": "^0.4.2",
- "po2json": "^1.0.0-alpha",

In webpack entry file I am collecting my .po files (with all others .js, .css etc.)

After running yarn build webpack compile all files (my .po files are inside)

And then I am getting this error with parsing (see below in webpack config file that I have po loader in loaders)

Why?

In webpack config file I have loader (po2json )

Webpack.config is here

module.exports = {
  devtool: 'eval',
  // all different pages are defined here
  entry,
  output: {
    path: path.join(__dirname, './webroot/dist'),
    filename: '[name].js',
    chunkname: '[name].js',
    publicPath: 'http://localhost:80/dist/',
  },

  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.jsx', '.js', '.po'],
  },

  module: {
    loaders: [
      {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        loader: 'style!css?url=false',
      },
      {
        test: /\.po$/,
        loader: 'json!po'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
    ],
  },
...

Thank you!

Answer 1

I had a similar problem with webpack 4.35.3 and po-loader 0.5.0.

I'm not using json-loader because it's not necessary with newer webpack versions. Webpack can load JSON files "natively" now.

For me the problem was that po-loader returns a stringified JSON object but webpack doesn't actually know that the returned output is JSON instead of JavaScript.

Setting type to json when configuring the loader fixes this.

For example:

  module: {
    rules: [
      {
        test: /\.po$/,
        type: "json", // This line fixes the problem
        use: [{
            loader: 'po-loader'
        }]
      }
    ]