Cannot use react-intl-webpack-plugin with create-react-app

323 Views Asked by At

I want to use react-intl-webpack-plugin to combine messages from babel-plugin-react-intl into one message file. I have configured the webpack.config.dev.js, however, when I run "yarn start", I got the following error:

Cannot read property 'compilation' of undefined

I setup react-intl-webpack-plugin according to the instructions. Related configurations in webpack.config.dev.js is shown as following:

const ReactIntlPlugin = require('react-intl-webpack-plugin');
...
module.exports = {
  ...
  resolve: {
    ...
    plugins: [
      new ReactIntlPlugin()
    ],
  },
  module: {
    ...
    // Process JS with Babel.
    {
      test: /\.(js|jsx|mjs)$/,
      include: paths.appSrc,
      loader: require.resolve('babel-loader'),
      options: {
        cacheDirectory: true,
        metadataSubscribers: [ReactIntlPlugin.metadataContextFunctionName],
        presets: ['env', 'react-app'],
        plugins: [
          'transform-runtime',
          ['react-intl', {
            'messagesDir': './public/messages/',
            'enforceDescriptions': false
          }]
        ]
      },
...

My project is created by create-react-app and then ejected. The version of webpack and react-intl-webpack-plugin are 3.8.1 and 0.3.0 respectively.

Thank you.

0

There are 0 best solutions below