Search code examples
reactjswebpackreact-boilerplateantd

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.


Solution

  • 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