Next.js：尽管在 next.config.js 中有一个 exportPathMap，但未找到

Question

错误：

No "exportPathMap" found in "next.config.js". Generating map from "./pages"

---

但我确实有基于official docs 的exportPathMap：

我的next.config.js 包含：

const withCss = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withTM = require("next-transpile-modules");

module.exports = {
  exportPathMap: async function(
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      "/": { page: "/" },
      "/menu": { page: "/menu" },
      "/about": { page: "/about" }
    };
  }
};

module.exports = withCss({
  cssModules: true
});

module.exports = withSass(
  withTM({
    transpileModules: ["react-bulma-components"],
    sassLoaderOptions: {
      includePaths: ["./components"]
    }
  })
);

我也尝试过删除默认映射：

module.exports = {
  exportPathMap: async function() {
    return {
      "/": { page: "/" },
      "/menu": { page: "/menu" },
      "/about": { page: "/about" }
    };
  }
};

根据我的研究，除了将其移动到withCss() 中之外：

module.exports = withCss({
  exportPathMap: async function() {
    return {
      "/": { page: "/" },
      "/menu": { page: "/menu" },
      "/about": { page: "/about" }
    };
  }
});

withSass() 和 withCss() 的两个导出似乎可以正常工作， 我做错了什么？

---

编辑：

我的next.config.js 位于项目根目录中，如果您想知道的话。

Answer 1

您正在多次重新分配您的 module.exports，因此 exportPathMap 和 withCss 丢失了。在这种情况下，配置应如下所示：

module.exports = withCss(
  withSass(
    withTM({
      transpileModules: ["react-bulma-components"],
      sassLoaderOptions: {
        includePaths: ["./components"]
      },
      exportPathMap: async function(
        defaultPathMap,
        { dev, dir, outDir, distDir, buildId }
      ) {
        return {
          "/": { page: "/" },
          "/menu": { page: "/menu" },
          "/about": { page: "/about" }
        };
      }
    })
  )
);

Answer 2

next.js 贡献者目前不鼓励 exportPathMap。请看https://github.com/zeit/next.js/issues/10983#issuecomment-611147932

否则正确答案是

module.exports = withCss(
  withSass(
    withTM({
      transpileModules: ["react-bulma-components"],
      sassLoaderOptions: {
        includePaths: ["./components"]
      },
      exportPathMap: async function(
        defaultPathMap,
        { dev, dir, outDir, distDir, buildId }
      ) {
        return {
          "/": { page: "/" },
          "/menu": { page: "/menu" },
          "/about": { page: "/about" }
        };
      }
    })
  )
);

Answer 3

module.exports = withCss(withSass(
 withTM({
 transpileModules: ["react-bulma-components"],
sassLoaderOptions: {
  includePaths: ["./components"]
},
cssModules: true,
exportPathMap: async function(
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
) {
    return {
    "/": { page: "/" },
    "/menu": { page: "/menu" },
    "/about": { page: "/about" }
    };
}
})
));