javascript - How to debug babel.config.js - Stack Overflow

admin管理员组

文章数量:1290935

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

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

• javascript
• react-native
• babeljs

Share Improve this question Follow edited Oct 5, 2023 at 2:18 Dmitry Shvedov 3,29644 gold badges4040 silver badges5656 bronze badges asked Oct 3, 2019 at 22:41 Ilya DenisovIlya Denisov 87899 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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,
  };
};

本文标签： javascriptHow to debug babelconfigjsStack Overflow