Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Modular antd imports with next.js, next-less and babel-plugin-import
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
},
})
@Enalmada

This comment has been minimized.

Copy link
Owner Author

@Enalmada Enalmada commented Sep 7, 2018

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.

@iquabius

This comment has been minimized.

Copy link

@iquabius iquabius commented Aug 9, 2019

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

@Enalmada

This comment has been minimized.

Copy link
Owner Author

@Enalmada Enalmada commented Aug 9, 2019

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment