How to load babel-plugin-react-intl using babel-loader? - react-intl

Question

I recently initialized a react app using create-react-app.
I ejected the app and I now have all the files exported to my main directory.
This set up creates a babel.dev.js instead of using .babelrc (it uses babel-loader).
I am trying to figure out how do I configure react-intl and babel-plugin-react-intl without the .babelrc file.
The documentation says .babelrc is recommended
Via .babelrc (Recommended)
.babelrc
{
"plugins": [
["react-intl", {
"messagesDir": "./build/messages/"
}]
]
}
What is the syntax to have this behavior with babel-loader? Right now the plugins in babel.dev.js look like this:
plugins: [
// class { handleClick = () => { } }
require.resolve('babel-plugin-transform-class-properties'),
// { ...todo, completed: true }
require.resolve('babel-plugin-transform-object-rest-spread'),
// function* () { yield 42; yield 43; }
[require.resolve('babel-plugin-transform-regenerator'), {
// Async functions are converted to generators by babel-preset-latest
async: false
}],
// Polyfills the runtime needed for async/await and generators
[require.resolve('babel-plugin-transform-runtime'), {
helpers: false,
polyfill: false,
regenerator: true,
// Resolve the Babel runtime relative to the config.
// You can safely remove this after ejecting:
moduleName: path.dirname(require.resolve('babel-runtime/package'))
}]
]
My components currently have the strings defined as follows:
const messages = defineMessages({
summaryTitle: {
"id": "checkout.section.title.summary",
"description": "Summary Section Title",
"defaultMessage": "Summary"
},
shippingTitle: {
"id": "checkout.section.title.shipping",
"description": "Shipping Section Title",
"defaultMessage": "Shipping"
}
});

Answer 1

Add the babel-plugin-react-intl to your plugins array like this:
plugins: [
..., // some plugins here
[require.resolve('babel-plugin-react-intl'), { messageDir: "./build/messages"}]
]
This will load the plugin passing the messageDir as an option to it.