Modular antd imports with next.js, next-less and babel-plugin-import

next.config.js

const withLess = require('@zeit/next-less')
const resolve = require('resolve')

// styled jsx will fail without it
if (typeof require !== 'undefined') {
    require.extensions['.less'] = (file) => {}
}

module.exports = withLess({
    lessLoaderOptions: {
        javascriptEnabled: true,
        // theme antd here
        modifyVars: {'@primary-color': '#1Dd57A'}
    },
    webpack: (config, { defaultLoaders, dir, isServer }) => {
        // Probably a better way to do this: https://github.com/nuxt-community/modules/issues/98#issuecomment-318736546
        if (defaultLoaders.babel.options.plugins === undefined) {
            defaultLoaders.babel.options.plugins = []
        }
        defaultLoaders.babel.options.plugins.push(['import', {
            'libraryName': 'antd',
            'style': true
        }])

        config.externals = []

        if (isServer) {
        
            // add antd to https://github.com/zeit/next.js/blob/canary/build/webpack.js#L34-L59
            // This makes sure paths are relative when pushing build to other systems
            config.externals.push((context, request, callback) => {
                resolve(request, { basedir: dir, preserveSymlinks: true }, (err, res) => {
                    if (err) {
                        return callback()
                    }

                    // Default pages have to be transpiled
                    if (res.match(/node_modules[/\\]next[/\\]dist[/\\]pages/)) {
                        return callback()
                    }

                    // Webpack itself has to be compiled because it doesn't always use module relative paths
                    if (res.match(/node_modules[/\\]webpack/) || res.match(/node_modules[/\\]css-loader/) || res.match(/node_modules[/\\]antd/)) {
                        return callback()
                    }

                    if (res.match(/node_modules[/\\].*\.js$/)) {
                        return callback(null, `commonjs ${request}`)
                    }

                    callback()
                })
            })

        }

        return config
    },
})

I got an idea here for a potential fix for next 6. Unfortunately I still see the full css loading so I must be missing something.

@Enalmada, did you manage to make this work with newer versions of Next.js?

@iquabius No, I moved to a different project a long time ago and forget where I am at but I seem to have removed it in my latest work before I finished getting it all working: https://github.com/Enalmada/next-reason-boilerplate/blob/feature/jsx3/next.config.js