Error: Caching was left unconfigured. Babel's plugins when I installed Font Awesome to my react app

Question

我想在我的 React 应用程序中使用 Font Awesome，但是当我安装 Font Awesome 的 npm 时，我遇到了这个错误：

Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured
  for various types of caching, using the first param of their handler functions:
  module.exports = function(api) {
    // The API exposes the following:
    // Cache the returned value forever and don't call this function again.
    api.cache(true);
    // Don't cache at all. Not recommended because it will be very slow.
    api.cache(false);
    // Cached based on the value of some function. If this function returns a value different from
    // a previously-encountered value, the plugins will re-evaluate.
    var env = api.cache(() => process.env.NODE_ENV);
    // If testing for a specific env, we recommend specifics to avoid instantiating a plugin for
    // any possible NODE_ENV value that might come up during plugin execution.
    var isProd = api.cache(() => process.env.NODE_ENV === "production");
    // .cache(fn) will perform a linear search though instances to find the matching plugin based
    // based on previous instantiated plugins. If you want to recreate the plugin and discard the
    // previous instance whenever something changes, you may use:
    var isProd = api.cache.invalidate(() => process.env.NODE_ENV === "production");
    // Note, we also expose the following more-verbose versions of the above examples:
    api.cache.forever(); // api.cache(true)
    api.cache.never();   // api.cache(false)
    api.cache.using(fn); // api.cache(fn)
    // Return the value that will be cached.
    return { };
  };

这是我的开发依赖项：

"devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "webpack": "^5.70.0"
  }

我像在教程中一样创建了 2 个新文件 babel.config.js:

module.exports = function (api) {
  return {
    plugins: ['macros'],
  }
}

和 babel-plugin-macros.config.js:

module.exports = {
  'fontawesome-svg-core': {
    'license': 'free'
  }
}

但我仍然有这个错误

Answer 1

为了修复这个错误，我做了一些改动babel.config.js:

module.exports = function (api) {
    api.cache(true);
    return {
      plugins: ['macros'],
    }
  }

Answer 2

对我来说最简单的方法是将 babel 配置的格式从 babel.config.js 更改为 .babelrc。之后，我没有看到任何此类错误。转到 here 了解更多说明。

Error: Caching was left unconfigured. Babel's plugins when I installed Font Awesome to my react app

Error: Caching was left unconfigured. Babel's plugins when I installed Font Awesome to my react app

javascript

font-awesome

reactjs

babeljs