CODEWITHSUNDEEP
javascriptreact-nativebabeljs
Ilya Denisov
Ilya Denisov

Reputation: 878

How to debug babel.config.js

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.?

Upvotes: 11

Views: 9012

Answers (2)

ROUINEB
ROUINEB

Reputation: 84

If you use babel.config.js you could do the following:

module.exports = function(api) {
  if (api) {
    api.cache(true);
    api.debug = process.env.NODE_ENV === 'development' || false;
  }

  const presets = ['@babel/preset-env'];
  const plugins = [
    '@babel/plugin-proposal-class-properties',
    ...
  ];
 
  return {
    presets,
    plugins,
  };
};

Upvotes: 1

ROUINEB
ROUINEB

Reputation: 84

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

Upvotes: 5

Related Questions