Tracing fails with webpack 5 and concatenated path import

[ijjk]

When building Next.js pages with webpack 5 the path import has been changed slightly which causes tracing to fail causing needed files to not be caught as expected.

Example page output with webpack 5:

.next/server/pages/api/posts.js

(function() {
var exports = {};
exports.id = 223;
exports.ids = [223];
exports.modules = {

/***/ 216:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {

"use strict";

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "ld": function() { return /* binding */ getSortedPostsData; }
});

// UNUSED EXPORTS: getAllPostIds, getPostData

;// CONCATENATED MODULE: external "fs"
var external_fs_namespaceObject = require("fs");;
var external_fs_default = /*#__PURE__*/__webpack_require__.n(external_fs_namespaceObject);
;// CONCATENATED MODULE: external "path"
var external_path_namespaceObject = require("path");;
var external_path_default = /*#__PURE__*/__webpack_require__.n(external_path_namespaceObject);
;// CONCATENATED MODULE: external "gray-matter"
var external_gray_matter_namespaceObject = require("gray-matter");;
var external_gray_matter_default = /*#__PURE__*/__webpack_require__.n(external_gray_matter_namespaceObject);
;// CONCATENATED MODULE: ./src/lib/posts.js
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }




const postsDirectory = external_path_default().join(process.cwd(), "content/posts");
function getSortedPostsData() {
  // Get file names under /posts
  const fileNames = external_fs_default().readdirSync(postsDirectory);
  const allPostsData = fileNames.map(fileName => {
    // Remove ".md" from file name to get id
    const id = fileName.replace(/\.md$/, ""); // Read markdown file as string

    const fullPath = external_path_default().join(postsDirectory, fileName);
    const fileContents = external_fs_default().readFileSync(fullPath, "utf8"); // Use gray-matter to parse the post metadata section

    const matterResult = external_gray_matter_default()(fileContents); // Combine the data with the id

    return _objectSpread({
      id
    }, matterResult.data);
  }); // Sort posts by date

  return allPostsData.sort((a, b) => {
    if (a.date < b.date) {
      return 1;
    } else {
      return -1;
    }
  });
}
function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);
  return fileNames.map(fileName => {
    return {
      params: {
        id: fileName.replace(/\.md$/, "")
      }
    };
  });
}
async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, "utf8"); // Use gray-matter to parse the post metadata section

  const matterResult = matter(fileContents); // Combine the data with the id

  return _objectSpread({
    id
  }, matterResult.data);
}

/***/ }),

/***/ 277:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "default": function() { return /* binding */ api_posts; }
});

;// CONCATENATED MODULE: external "cors"
var external_cors_namespaceObject = require("cors");;
var external_cors_default = /*#__PURE__*/__webpack_require__.n(external_cors_namespaceObject);
;// CONCATENATED MODULE: ./src/lib/init-middleware.js
// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
function initMiddleware(middleware) {
  return (req, res) => new Promise((resolve, reject) => {
    middleware(req, res, result => {
      if (result instanceof Error) {
        return reject(result);
      }

      return resolve(result);
    });
  });
}
// EXTERNAL MODULE: ./src/lib/posts.js + 3 modules
var posts = __webpack_require__(216);
;// CONCATENATED MODULE: ./src/pages/api/posts.js



const cors = initMiddleware(external_cors_default()({
  methods: ["GET"]
}));
/* harmony default export */ var api_posts = (async (req, res) => {
  const allProjectsData = (0,posts/* getSortedPostsData */.ld)();
  await cors(req, res);
  res.statusCode = 200;
  res.json(allProjectsData);
});

/***/ })

};
;

// load runtime
var __webpack_require__ = require("../../webpack-runtime.js");
__webpack_require__.C(exports);
var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
var __webpack_exports__ = (__webpack_exec__(277));
module.exports = __webpack_exports__;

})();

Here's a diff between webpack 5 output to webpack 4

.next/server/pages/api/posts.js (webpack 5 before -> webpack 4)

diff --git a/posts.js b/posts.js
index 4fd5c0f..8560a5d 100644
--- a/posts.js
+++ b/posts.js
@@ -1,31 +1,184 @@
-// UNUSED EXPORTS: getAllPostIds, getPostData
-
-;// CONCATENATED MODULE: external "fs"
-var external_fs_namespaceObject = require("fs");;
-var external_fs_default = /*#__PURE__*/__webpack_require__.n(external_fs_namespaceObject);
-;// CONCATENATED MODULE: external "path"
-var external_path_namespaceObject = require("path");;
-var external_path_default = /*#__PURE__*/__webpack_require__.n(external_path_namespaceObject);
-;// CONCATENATED MODULE: external "gray-matter"
-var external_gray_matter_namespaceObject = require("gray-matter");;
-var external_gray_matter_default = /*#__PURE__*/__webpack_require__.n(external_gray_matter_namespaceObject);
-;// CONCATENATED MODULE: ./src/lib/posts.js
+/***/ }),
+
+/***/ "mw/K":
+/***/ (function(module, exports) {
+
+module.exports = require("fs");
+
+/***/ }),
+
+/***/ "oyvS":
+/***/ (function(module, exports) {
+
+module.exports = require("path");
+
+/***/ }),
+
+/***/ "tkjJ":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getSortedPostsData; });
+/* unused harmony export getAllPostIds */
+/* unused harmony export getPostData */
+/* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("mw/K");
+/* harmony import */ var fs__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(fs__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("oyvS");
+/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var gray_matter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("uo/4");
+/* harmony import */ var gray_matter__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(gray_matter__WEBPACK_IMPORTED_MODULE_2__);
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -35,18 +188,18 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-const postsDirectory = external_path_default().join(process.cwd(), "content/posts");
+const postsDirectory = path__WEBPACK_IMPORTED_MODULE_1___default.a.join(process.cwd(), "content/posts");
 function getSortedPostsData() {
   // Get file names under /posts
-  const fileNames = external_fs_default().readdirSync(postsDirectory);
+  const fileNames = fs__WEBPACK_IMPORTED_MODULE_0___default.a.readdirSync(postsDirectory);
   const allPostsData = fileNames.map(fileName => {
     // Remove ".md" from file name to get id
     const id = fileName.replace(/\.md$/, ""); // Read markdown file as string
 
-    const fullPath = external_path_default().join(postsDirectory, fileName);
-    const fileContents = external_fs_default().readFileSync(fullPath, "utf8"); // Use gray-matter to parse the post metadata section
+    const fullPath = path__WEBPACK_IMPORTED_MODULE_1___default.a.join(postsDirectory, fileName);
+    const fileContents = fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync(fullPath, "utf8"); // Use gray-matter to parse the post metadata section
 
-    const matterResult = external_gray_matter_default()(fileContents); // Combine the data with the id
+    const matterResult = gray_matter__WEBPACK_IMPORTED_MODULE_2___default()(fileContents); // Combine the data with the id
 
     return _objectSpread({
       id
@@ -62,7 +215,7 @@ function getSortedPostsData() {
   });
 }
 function getAllPostIds() {
-  const fileNames = fs.readdirSync(postsDirectory);
+  const fileNames = fs__WEBPACK_IMPORTED_MODULE_0___default.a.readdirSync(postsDirectory);
   return fileNames.map(fileName => {
     return {
       params: {
@@ -72,10 +225,10 @@ function getAllPostIds() {
   });
 }
 async function getPostData(id) {
-  const fullPath = path.join(postsDirectory, `${id}.md`);
-  const fileContents = fs.readFileSync(fullPath, "utf8"); // Use gray-matter to parse the post metadata section
+  const fullPath = path__WEBPACK_IMPORTED_MODULE_1___default.a.join(postsDirectory, `${id}.md`);
+  const fileContents = fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync(fullPath, "utf8"); // Use gray-matter to parse the post metadata section
 
-  const matterResult = matter(fileContents); // Combine the data with the id
+  const matterResult = gray_matter__WEBPACK_IMPORTED_MODULE_2___default()(fileContents); // Combine the data with the id
 
   return _objectSpread({
     id
@@ -84,61 +237,11 @@ async function getPostData(id) {
 
 /***/ }),
\ No newline at end of file
+/******/ });
\ No newline at end of file

We need to ensure the content/posts directory is detected correctly on webpack 5 as it was on webpack 4.

Related Next.js issues both with reproductions:

• Webpack5 enabled API Route return Internal Server Error when deployed to vercel, but works fine locally next.js#23894
• Webpack5 breaks revalidation if getStaticProps loads data from filesystem next.js#23668

[guybedford]

Yeah this looks like a change in the .n function in Webpack which we need to add support for.

Basically previously it was that the __webpack_require__.n would return a function, and now it is a .a property that is being read off the object.

That seems like a straightforward addition to me.

[guybedford]

@ijjk I've posted a possible fix in #186. If you're able to test that out before release to be sure I've got the right case here that would be a help.