将antd与反应 - 样板结合起来

Question

我将其添加到生产配置中：

babelQuery: {
    plugins: [["import", { libraryName: "antd", style: true }]],
  },

但是我仍然遇到像ReferenceError: Menu is not defined.这样的错误我错过了什么吗？

当我将相同的内容添加到开发配置中时，一切都在本地工作正常。

Answer 1

我目前遇到了完全相同的问题。所以我在这里添加额外的信息。

我也是以下页面中的信息来设置ant设计套件： https://ant.design/docs/react/use-with-create-react-app

webpack.dev.babel包含以下babelQuery并且运行正常：

babelQuery: {
    presets: ['babel-preset-react-hmre'].map(require.resolve),
    plugins: [['import', { libraryName: 'antd', style: true }]],
},

开发环境运行良好。

但是，将相同的插件配置添加到webpack.prod.babel时，如下所示：

babelQuery: {
    plugins: [['import', { libraryName: 'antd', style: true }]],
},

我在运行生产版本后加载页面时遇到像@userinev这样的错误。

Uncaught ReferenceError: Menu is not defined

在加载从antd库加载的第一个组件时遇到了问题。

从prod-config中删除插件配置时，应用程序正在加载，但缺少样式。

<强>更新 Menu.Item中的点（。）是生产构建中的问题。 解决方法是创建一个＆＃39;别名＆＃39;，如

const Item = Menu.Item;

请参阅：https://github.com/ant-design/ant-design/issues/5060#issuecomment-283339199

Answer 2

或者，您可以删除类似于导致错误的babel插件的package.json上的样板：

删除此： “插件”：[        “变换反应的内联元素”      ]