How to debug babel.config.js

Question

I've noticed that there are virtually no info from babel on incorrect configuration. For example I've created new app with react-native-cli, installed decorators plugin and filled my babel.config.js as follows:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['@babel/plugin-proposal-decorators', { legacy: true }],
};

And there were the same complain as if no plugin is installed. Correct config would be:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
};

Now I'm trying to install jsx-control-statements and have the same silent fail causing ReferenceError: Can't find variable: Choose as if no such plugin is installed at all. My babel.config.js is:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'jsx-control-statements',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
  ],
};

So the question is: How do I debug this configuration? How can I get some diagnostic from babel about incorrect configuration/not found packages etc.?

Answer 1

For instance if the presets/plugins are missing or missconfigured, you'll get an error when webpack takes over and try to load all the config. But I think your best shot is to use progressPlugin where you could display each step and see for yourself what is happening.

new webpack.ProgressPlugin((percentage, message, ...args) => {
    console.log(percentage, message, ...args);
  }),

Another approach, would be using debug module, as nearly all other plugins, modules use it.

DEBUG=* webpack [-c webpack.something.js]

Hope it helps