Search code examples
javascriptnext.js

Next.js: exportPathMap not found despite having one in next.config.js


Error:

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


But I do have exportPathMap based on the official docs:

my next.config.js contains:

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"]
    }
  })
);

I have also tried removing the default mappings:

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

As well as moving it inside the withCss() based on my research:

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

The two exports withSass() and withCss() seems to be working though, what did I do wrong?


EDIT:

My next.config.js is in the root project directory, if you're by any chance wondering.


Solution

  • You are re-assigning your module.exports multiple times, so the exportPathMap and withCss get missing. The config, in this case, should look like this:

    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" }
            };
          }
        })
      )
    );