Почему мой next.config.js ломает мою сборку героку?

Question

Я могу запустить проект локально, но с тех пор, как я изменил файл 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 / query / age-range.js

import gql from 'graphql-tag';

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

Answer 1

Нашел проблему. Выбор CSS календаря, который я импортировал, выдавал ошибку, но это было исправлено, когда я обновлялся рядом с более новой версией. Но когда я обновился до «канарской» версии next, сборка не удалась, потому что они требуют другой файловой структуры.