0

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.

userinev
  • 75
  • 1
  • 5
  • 16

2 Answers2

1

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

Theos
  • 646
  • 6
  • 13
  • It seems to be an issue with the Menu component of antd. When using the internally used RcMenu, it's working fine even in production-mode. – Theos Mar 01 '17 at 11:36
0

Alternatively, you can remove the boilerplate's including on package.json of the babel plugin that causes error:

Delete this: "plugins": [ "transform-react-inline-elements" ]

user3703385
  • 1