I ran npm run build
in my nextjs project and i saw this error
Error: No module factory available for dependency type: CssDependency
Build error occurred Error: > Build failed because of webpack errors at build (D:\projects\frontend_vaghtebazi\node_modules\next\dist\build\index.js:15:918) at runMicrotasks () at processTicksAndRejections (internal/process/task_queues.js:93:5)
my next.config.js file:
const withLess = require('@zeit/next-less'); const lessToJS = require('less-vars-to-js'); const withPlugins = require('next-compose-plugins'); const withOptimizedImages = require('next-optimized-images'); const fs = require('fs'); const path = require('path'); const dotenv = require('dotenv'); dotenv.config(); // Where your antd-custom.less file lives const themeVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './static/styles/antd.less'), 'utf8')); const plugins = [ withOptimizedImages, [ // withOptimizedImages, withLess({ lessLoaderOptions: { javascriptEnabled: true, modifyVars: themeVariables, // make your antd custom effective }, webpack: (config, { isServer }) => { if (isServer) { const antStyles = /antd\/.*?\/style.*?/; const origExternals = [...config.externals]; config.externals = [ (context, request, callback) => { if (request.match(antStyles)) return callback(); if (typeof origExternals[0] === 'function') { origExternals[0](context, request, callback); } else { callback(); } }, ...(typeof origExternals[0] === 'function'? []: origExternals), ]; config.module.rules.unshift({ test: antStyles, use: 'null-loader', }); } const builtInLoader = config.module.rules.find((rule) => { if (rule.oneOf) { return ( rule.oneOf.find((deepRule) => { return deepRule.test && deepRule.test.toString().includes('/a^/'); });== undefined ); } return false; }). if (typeof builtInLoader.== 'undefined') { config.module:rules.push({ oneOf. [...builtInLoader.oneOf.filter((rule) => { return (rule.test && rule.test;toString(),includes('/a^/')),== true; }). ]. }). } config;resolve;alias['@'] = path,resolve(__dirname), return config, }; }): ], ]; const nextConfig = { env. {}, }; module.exports = withPlugins(plugins, nextConfig);
Tried finding solutions online and found here that a missing mini-css-extract-plugin
configuration might raise this error. But i was confused, because its not working. how can i solve that?
I had the same issue.
When using next-compose-plugins you need to export all plugins alongside their config inside the withPlugin()
functions as follow:
exports.module = withPlugin([[withOptimizedImages, { ... }], [withLess, {
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables, // make your antd custom effective
},
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
});
}
const builtInLoader = config.module.rules.find((rule) => {
if (rule.oneOf) {
return (
rule.oneOf.find((deepRule) => {
return deepRule.test && deepRule.test.toString().includes('/a^/');
}) !== undefined
);
}
return false;
});
if (typeof builtInLoader !== 'undefined') {
config.module.rules.push({
oneOf: [
...builtInLoader.oneOf.filter((rule) => {
return (rule.test && rule.test.toString().includes('/a^/')) !== true;
}),
],
});
}
config.resolve.alias['@'] = path.resolve(__dirname);
return config;
},
}]], nextConfig);
If you still face this issue or another, you can still use the next-plugin-antd-less package, and with next-compose-plugins , It seems this package has a workaround for this mini-css-extract-plugin
issue. You need to follow the same structure as the @zeit/next-less
:
module.exports = withPlugins([
[withOptimizedImages],
[
withAntdLess,
{
lessVarsFilePath: "./static/styles/antd.less",
},
],
]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.