由于异步Object.build中的webpack错误，构建失败

Question

因为我已经升级了我的next.js应用程序从下一个JS9到11。我收到错误了。我们有一个自定义webpack配置在我们的下一个config.js。下面我想这是和Webpack有关的。我也把webpack升级到Webpack 5了。仍然有同样的问题。

> Build error occurred
Error: > Build failed because of webpack errors
    at ../node_modules/next/dist/build/index.js:397:19
    at async Span.traceAsyncFn (../node_modules/next/dist/telemetry/trace/trace.js:60:20)
    at async Object.build [as default] (../node_modules/next/dist/build/index.js:77:25)

我的Package.json是-

{
    "devDependencies": {
        "@babel/core": "^7.4.5",
        "@babel/plugin-proposal-optional-chaining": "^7.6.0",
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/preset-env": "^7.4.5",
        "@babel/preset-react": "^7.0.0",
        "@testing-library/react": "^10.0.4",
        "babel-loader": "^8.0.6",
        "browserslist": "^4.6.0",
        "jest": "^24.7.1",
        "node-sass": "^4.14.1",
        "nodemon": "^2.0.3",
        "prettier": "^1.16.4",
        "sass-loader": "^7.1.0",
        "stylelint": "^9.10.1",
        "stylelint-scss": "^3.6.1",
        "supertest": "^4.0.2"
    },
    "dependencies": {
        "@babel/runtime": "^7.4.4",
        "@contentful/rich-text-react-renderer": "^13.4.0",
        "@contentful/rich-text-types": "^13.4.0",
        "@fast-csv/parse": "^4.1.2",
        "@next/bundle-analyzer": "^9.4.4",
        "@yolkai/next-routes": "^3.0.0",
        "@zeit/next-css": "^1.0.1",
        "@zeit/next-sass": "^1.0.1",
        "animate.css": "^3.7.2",
        "appdynamics": "^4.5.23",
        "axios": "^0.23.0",
        "babel-plugin-transform-optional-chaining": "^7.0.0-beta.3",
        "babel-plugin-wildcard": "^6.0.0",
        "body-parser": "^1.19.0",
        "compression": "^1.7.4",
        "contentful": "^7.6.0",
        "cors": "^2.8.5",
        "date-fns": "^2.10.0",
        "dotenv": "^8.2.0",
        "enzyme": "^3.9.0",
        "enzyme-adapter-react-16": "^1.12.1",
        "enzyme-to-json": "^3.3.5",
        "express": "^4.17.1",
        "express-boom": "^3.0.0",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^3.0.1",
        "focus-trap-react": "^6.0.0",
        "google-auth-library": "^5.5.1",
        "googleapis": "^89.0.0",
        "helmet": "^4.4.1",
        "json-stringify-safe": "^5.0.1",
        "jwt-js-decode": "^1.4.1",
        "next": "^11.1.2",
        "next-compose-plugins": "^2.1.1",
        "next-fonts": "^0.18.0",
        "node-fetch": "^2.6.0",
        "prop-types": "^15.7.2",
        "pure-react-carousel": "^1.20.0",
        "query-string": "^6.8.1",
        "react": "^17.0.2",
        "react-countup": "^4.1.3",
        "react-datepicker": "^3.1.3",
        "react-device-detect": "^1.6.2",
        "react-dom": "^17.0.2",
        "react-medium-image-zoom": "^3.0.16",
        "react-modal": "^3.12.1",
        "react-transition-group": "^4.2.1",
        "sanitize-html": "^2.3.2",
        "slick-carousel": "^1.8.1",
        "stylelint-config-standard": "^18.3.0",
        "underscore": "^1.9.1",
        "webpack": "^5.1.3",
        "xml-js": "^1.6.11"
    },
    "resolutions": {
        "webpack": "5.41.1"
    },
    "jest": {
        "collectCoverageFrom": [
            "**/*.{js,jsx}",
            "!**/node_modules/**",
            "!**/vendor/**",
            "!**/src/.next/",
            "!**/setupTests.js",
            "!**/*.config.js",
            "!**/coverage/**",
            "!**/test_automation/**",
            "!**/src/static/**"
        ],
        "coverageThreshold": {
            "global": {
                "branches": 80,
                "functions": 80,
                "lines": 80
            }
        }
    }
}

我的next.config.js是-

const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const withFonts = require('next-fonts');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.analyze === 'true',
});

const nextConfig = {
  env: {
    search_key: process.env.search_key,
    appDynamicsKey: process.env.appDynamicsKey,
    ENVIRONMENT: process.env.ENVIRONMENT,
  },
  // https://nextjs.org/docs#customizing-webpack-config
  webpack: (webpackConfig) => {
    const { module = {} } = webpackConfig;
    return {
      ...webpackConfig,
      module: {
        ...module,
        rules: [
          ...(module.rules || []),
          {
            test: /\.(txt|png|woff|woff2|eot|ttf|gif|jpg|ico|svg)$/,
            use: {
              loader: 'file-loader',
              options: {
                name: '[name]_[hash].[ext]',
                publicPath: '/_next/static/files',
                outputPath: 'static/files',
              },
            },
          },
          {
            test: /\.spec.jsx$/,
            loader: 'ignore-loader',
          },
        ],
      },
    };
  },
};

const sassOptions = {
  sassLoaderOptions: {
    outputStyle: 'compressed',
  },
};

module.exports = withPlugins(
  [[withSass, sassOptions], [withFonts], [withCSS], [withBundleAnalyzer]],
  nextConfig,
);

会很感激你的帮助，已经坚持了一段时间了。试图在互联网上实现所有的解决方案，但没有任何效果。

Answer 1

我得到了类似的错误，并使用下面的next.config.js解决了它：

const { withSentryConfig } = require('@sentry/nextjs');
const execSync = require("child_process").execSync;

const lastCommitCommand = "git rev-parse HEAD";

const moduleExports = {
 // Your existing module.exports
   async generateBuildId() {
     return execSync(lastCommitCommand).toString().trim();
   },
  /* Code for redirect Old URL to New URL */
 async redirects() {
   return [
     {
      source: "/seller/SERENDIPITY/",
      destination: "/",
      permanent: true,
     },
   ];
 },
 trailingSlash: true,
 // generateEtags: false,
 distDir: "dist",
 sentry: {
   disableServerWebpackPlugin: true,
   disableClientWebpackPlugin: true,
 },
};

module.exports = withSentryConfig(moduleExports);