CODEWITHSUNDEEP
reactjswebpackreact-boilerplateantd
userinev
userinev

Reputation: 75

Integrating antd with react-boilerplate

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.

Upvotes: 0

Views: 1308

Answers (2)

user3703385
user3703385

Reputation: 1

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" ]

Upvotes: 0

Theos
Theos

Reputation: 666

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

Upvotes: 1

Related Questions