我在我的nextjs项目中运行了npm run build
,我看到了这个错误。
Error: No module factory available for dependency type: CssDependency
生成错误:>生成失败是由于构建(D:\projects\frontend_vaghtebazi\node_modules\next\dist\build\index.js:15:918) at runMicrotasks () at processTicksAndRejections (内部/process/processTicksAndRejections_processTicksAndRejections: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
配置可能会引发此错误。但我很困惑,因为它不起作用。我该怎么解决呢?
发布于 2021-02-14 23:11:38
我也有过同样的问题。
解决方案
在使用下一个组合插件时,您需要在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);
如果您仍然面临这个或另一个问题,您仍然可以使用下一个插件-antd无包,对于下一个组合插件,这个包似乎可以解决这个mini-css-extract-plugin
问题。您需要遵循与@zeit/next-less
相同的结构
module.exports = withPlugins([
[withOptimizedImages],
[
withAntdLess,
{
lessVarsFilePath: "./static/styles/antd.less",
},
],
]);
https://stackoverflow.com/questions/65844893
复制相似问题