速记React prop使用transform-react-constant-elements Babel插件导致引用错误

Question

我有一个问题，只有在生产和得到ReferenceError: _ref7 is not defined错误。当我更改这一行时，我也可以在本地重现这个问题：

isProduction ? "@babel/plugin-transform-react-constant-elements" : null,

要这样做：

"@babel/plugin-transform-react-constant-elements",

在我的babel.config.js文件中。

显然，该问题是由transform-react-constant-elements Babel插件在呈现以下组件时引起的：

// This gives error
return (
  <EntityRoute
    backToRoot={backToRoot}
    levels={levels}
    manyToManyRelation
  />
);

我尝试了一些方法来解决这个问题，解决方案对我来说是有效的，不是使用速记道具，而是像这样使用它：

// This works
const manyToManyRelation = true;

return (
  <EntityRoute
    backToRoot={backToRoot}
    levels={levels}
    manyToManyRelation={manyToManyRelation}
  />
);

我至少希望下面的一个也能工作，但它不是。

// This fails
return (
  <EntityRoute
    backToRoot={backToRoot}
    levels={levels}
    manyToManyRelation={true}
  />
);

我想知道为什么最后一个不能工作。谢谢。

更新:在下面你可以找到我的babel配置和版本号：

babel.config.js

/* eslint-env node */
"use strict";

const mode = process.env.NODE_ENV || "development";
const isDevelopment = mode === "development";
const isProduction = mode === "production";
const isTest = mode === "test";

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      isTest
        ? {
            targets: {
              node: "current", // Overrides .browserslistrc
            },
          }
        : {
            corejs: { version: 3, proposals: true },
            loose: true, // https://github.com/facebook/create-react-app/issues/4263
            modules: false,
            useBuiltIns: "entry",
          },
    ],
    [
      "@babel/preset-react",
      {
        development: isDevelopment,
        useBuiltIns: true,
      },
    ],
    "@babel/preset-flow",
  ],
  plugins: [
    [
      "babel-plugin-module-resolver",
      {
        alias: {
          src: "./src",
        },
      },
    ],
    [
      "@babel/plugin-transform-regenerator",
      {
        async: false, // Done by @babel/preset-env
      },
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        helpers: false,
        useESModules: true,
      },
    ],
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-class-properties",
    isDevelopment ? "react-hot-loader/babel" : null,
    isProduction ? "@babel/plugin-transform-react-constant-elements" : null,
    isProduction
      ? [
          "babel-plugin-transform-react-remove-prop-types",
          {
            removeImport: true,
          },
        ]
      : null,
    isProduction
      ? [
          "babel-plugin-react-intl",
          {
            messagesDir: "build/messages",
          },
        ]
      : null,
  ].filter(plugin => plugin !== null),
};

来自package.json的巴别塔相关部分：

"dependencies": {
  "@babel/runtime": "^7.5.5",
  ...
},
"devDependencies": {
  "@babel/core": "^7.7.4",
  "@babel/plugin-proposal-class-properties": "^7.7.4",
  "@babel/plugin-proposal-export-default-from": "^7.7.4",
  "@babel/plugin-transform-react-constant-elements": "^7.7.4",
  "@babel/plugin-transform-regenerator": "^7.7.4",
  "@babel/plugin-transform-runtime": "^7.7.4",
  "@babel/preset-env": "^7.7.4",
  "@babel/preset-flow": "^7.7.4",
  "@babel/preset-react": "^7.7.4",
  "babel-eslint": "^10.0.3",
  "babel-jest": "^24.9.0",
  "babel-loader": "^8.0.6",
  "babel-plugin-module-resolver": "^3.2.0",
  "babel-plugin-react-intl": "^4.1.0",
  "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
  ...
}

Answer 1

对我来说，你的预设应该像下面这样，让babel默认配置以他们在路线图中推荐的方式为你完成工作。但同样，如果你需要定制它，你可以这样做。

 presets: [
    [
      "@babel/preset-env",
      isTest
        ? {
            targets: {
              node: "current", // Overrides .browserslistrc
            },
          }
        : {
            corejs: { version: 3, proposals: true },
            useBuiltIns: "usage",
          },
    ],

    "@babel/preset-react",
    "@babel/preset-flow",
  ]

然后在插件中删除这一整行

isProduction ? "@babel/plugin-transform-react-constant-elements" : null,

运行一个本地测试，看看这是否有帮助，我们确实按照您前面提到的方式编写了代码，并且不需要声明bool变量来作为属性传递。