I added this to the production config:
babelQuery: {
plugins: [["import", { libraryName: "antd", style: true }]],
},
but I'm still getting errors like ReferenceError: Menu is not defined.
Am I missing something? Everything works fine locally when I add the same to the dev config so I'm a little confused.
I'm currently having the exact same problem. So I'll add the extra info here.
I too the information from the following page to setup the ant-design kit: https://ant.design/docs/react/use-with-create-react-app
The webpack.dev.babel contains the following babelQuery and is working fine:
babelQuery: {
presets: ['babel-preset-react-hmre'].map(require.resolve),
plugins: [['import', { libraryName: 'antd', style: true }]],
},
The development environment runs fine.
But, when adding the same plugins configuration to the webpack.prod.babel like this:
babelQuery: {
plugins: [['import', { libraryName: 'antd', style: true }]],
},
I'm getting the error like @userinev when loading the page after running the production build.
Uncaught ReferenceError: Menu is not defined
It's having issues with loading the first component that gets loaded from the antd library.
When removing the plugins configuration from the prod-config, the app is loading, but the styling is missing.
UPDATE: The dot (.) in Menu.Item is the problem in the production-build. The workaround is to create an 'alias', like
const Item = Menu.Item;
See: https://github.com/ant-design/ant-design/issues/5060#issuecomment-283339199