reactjs - 错误:没有可用于依赖类型的模块工厂:CssDependency on build a nextjs app - mini-css-extract-plugin
问题描述
我npm run build
在我的 nextjs 项目中运行,我看到了这个错误
Error: No module factory available for dependency type: CssDependency
发生构建错误错误:> 构建失败,因为 webpack 错误在构建 (D:\projects\frontend_vaghtebazi\node_modules\next\dist\build\index.js:15:918) at runMicrotasks () at processTicksAndRejections (internal/process/task_queues .js:93:5)
我的 next.config.js 文件:
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);
尝试在线查找解决方案并在此处发现缺少mini-css-extract-plugin
配置可能会引发此错误。但我很困惑,因为它不起作用。我该如何解决?
解决方案
我遇到过同样的问题。
解决方案
使用next-compose-plugins时,您需要在函数中导出所有插件及其配置withPlugin()
,如下所示:
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);
如果您仍然面临这个或其他问题,您仍然可以使用next-plugin-antd-less包,并且使用next-compose-plugins,似乎这个包有解决这个mini-css-extract-plugin
问题的方法。您需要遵循与以下相同的结构@zeit/next-less
:
module.exports = withPlugins([
[withOptimizedImages],
[
withAntdLess,
{
lessVarsFilePath: "./static/styles/antd.less",
},
],
]);
推荐阅读
- edge-detection - CODESYS 边缘检测问题(反弹)
- r - Is there a way to make R code only able to be run and not edited? Essentially read-only?
- python - 为什么 Python docx 或 lxml 将属性从一个节点移动到另一个节点?
- javascript - 标题过滤和选择带有复选框列的行返回所有行
- sql - 在(Hive)的情况下使用查询表的一列的总和
- excel - Excel VLOOKUP 打破了一定的价值
- wpf - Button Border clipped in WPF with 125% DPI Setting
- excel - Excel if statement produces `#NUM` unexpectedly
- r - Upload Powerpoint to Google Drive as file
- java - selenium 中的测试脚本以验证网页标题