首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >错误:没有模块工厂可用于依赖类型: CssDependency在构建一个nextjs应用程序-mini提取-插件

错误:没有模块工厂可用于依赖类型: CssDependency在构建一个nextjs应用程序-mini提取-插件
EN

Stack Overflow用户
提问于 2021-01-22 12:06:58
回答 1查看 1.5K关注 0票数 1

我在我的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文件:

代码语言:javascript
运行
复制
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配置可能会引发此错误。但我很困惑,因为它不起作用。我该怎么解决呢?

EN

回答 1

Stack Overflow用户

发布于 2021-02-14 23:11:38

我也有过同样的问题。

解决方案

在使用下一个组合插件时,您需要在withPlugin()函数中的配置之外导出所有插件,如下所示:

代码语言:javascript
运行
复制
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相同的结构

代码语言:javascript
运行
复制
module.exports = withPlugins([
  [withOptimizedImages],
  [
    withAntdLess,
    {
      lessVarsFilePath: "./static/styles/antd.less",
    },
  ],
]);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65844893

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档