为什么我的 next.config.js 会破坏我的 heroku 构建？答案

【问题标题】：Why is my next.config.js breaking my heroku build?为什么我的 next.config.js 会破坏我的 heroku 构建？
【发布时间】：2020-03-26 12:35:02
【问题描述】：

我可以在本地运行该项目，但是自从我将 next.config.js 文件更改为包含 @zeit/next-css 后，我的 heroku 构建失败并出现以下错误。

remote: Error: webpack build failed: found page without a React Component as default export in pages/gql/queries/age-ranges.js

这是我的配置文件的内容。两个注释掉的部分是我尝试过的其他配置也失败了。

next.config.js

const withImages = require('next-images');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withImages());

// ---- -----

// const withPlugins = require('next-compose-plugins');
// const withCSS = require('@zeit/next-css');
// const withImages = require('next-images');

// const nextConfig = {
//  useFileSystemPublicRoutes: false,
//  webpack: config => {
//      config.node = {
//          fs: 'empty',
//          modules: false
//      };

//      return config;
//  }
// };

// module.exports = withPlugins([withCSS, withImages], nextConfig);

// ----- synapse -----

// const withCSS = require('@zeit/next-css');
// const withImages = require('next-images');
// module.exports = withCSS(withImages());

// module.exports = withCSS(
//  withImages({
//      target: 'serverless',
//      webpack(config) {
//          config.module.rules.push({
//              test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
//              use: {
//                  loader: 'url-loader',
//                  options: {
//                      limit: 8192,
//                      publicPath: '/_next/static/',
//                      outputPath: 'static/',
//                      name: '[name].[ext]'
//                  }
//              }
//          });
//          return config;
//      }
//  })
// );

/gql/queries/age-ranges.js

import gql from 'graphql-tag';

export const GET_AGE_RANGES = gql`
    query getAgeRanges {
        allAgeRanges {
            nodes {
                name
                nodeId
                id
            }
        }
    }
`;

【问题讨论】：

你能发布你的 pages/gql/queries/age-ranges.js 文件吗？
当然。我将其添加到原始帖子中，但我认为这不是问题的根源。在我将withCSS 添加到我的配置文件之前，我没有发生错误。如果我从文件中删除它，构建工作正常，但他的应用程序在某些页面上崩溃，因为我需要我导入的组件的 css 加载器
我在 github 上阅读了一些问题，这个问题看起来像 github.com/zeit/next.js/issues/7836 如果是真的你不能把非页面资源放在你的 pages 文件夹中
尝试将年龄范围移动到其他地方并再次运行
我已经这样做了，然后它只是提到了一个具有相同错误的新文件。实际上，我已经能够将其范围缩小一点。当我将我的 next 包从 8.1.0 更新到较新的版本 9.1.5-canary.8 时，会发生错误，但我需要较新的版本才能导入 react-flatpickr。

标签： javascript node.js heroku webpack next.js

【解决方案1】：

发现问题。我导入的日历选择器 CSS 引发了错误，但当我将 Next 更新到更当前的版本时，它已得到修复。但是当我更新到 next 的“金丝雀”版本时，构建失败了，因为它们需要不同的文件结构。

【讨论】：