Search code examples
next.jszeit-pkg

Attempting to use 'pkg' to build 'nextjs' app results in dependency errors and/or 404 errors once built


I'm attempting to build an executable of a small NextJS example app based on the example here using zeit/pkg. Problem is the only feasible entry point (server.js) seems to give me a bunch of errors not currently listed in their issues related to webpack compilation.

If you'd like to reproduce just follow the instructions here and then add pkg. Also - here's the error output below.

ERROR Failed to compile with 2 errors
10:48:35 AM These dependencies were not found:

  • @babel/runtime/helpers/extends in D:/snapshot/pkg-ssr/node_modules/next/dist/lib/app.js
  • webpack-hot-middleware/client?autoConnect=false&overlay=false&reload=true in D:/snapshot/pkg-ssr/node_modules/next/dist/client/webpack-hot-middleware-client.js

To install them, you can run: npm install --save @babel/runtime/helpers/extends webpack-hot-middleware/client?autoConnect=false&overlay=false&reload=true (node:15964) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead

Ready on http://localhost:3000 Client pings, but there's no entry for page: /about { Error: Cannot find module 'D:_experiments\pkg-ssr.next\build-manifest.json' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:592:15) at Function.Module._resolveFilename (pkg/prelude/bootstrap.js:1278:46) at Function.Module._load (internal/modules/cjs/loader.js:518:25) at Module.require (internal/modules/cjs/loader.js:648:17) at Module.require (pkg/prelude/bootstrap.js:1157:31) at require (internal/modules/cjs/helpers.js:20:18) at _callee3$ (D:\snapshot\pkg-ssr\node_modules\next\dist\server\render.js:202:29) at tryCatch (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:62:40) at Generator.invoke [as _invoke] (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:296:22) at Generator.forEach.prototype.(anonymous function) [as next] (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:114:21) at step (D:\snapshot\pkg-ssr\node_modules\@babel\runtime\helpers\asyncToGenerator.js:12:30) at _next (D:\snapshot\pkg-ssr\node_modules\@babel\runtime\helpers\asyncToGenerator.js:27:9) at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' } Client pings, but there's no entry for page: /about { Error: Cannot find module 'D:_experiments\pkg-ssr.next\build-manifest.json' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:592:15) at Function.Module._resolveFilename (pkg/prelude/bootstrap.js:1278:46) at Function.Module._load (internal/modules/cjs/loader.js:518:25) at Module.require (internal/modules/cjs/loader.js:648:17) at Module.require (pkg/prelude/bootstrap.js:1157:31) at require (internal/modules/cjs/helpers.js:20:18) at _callee3$ (D:\snapshot\pkg-ssr\node_modules\next\dist\server\render.js:202:29) at tryCatch (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:62:40) at Generator.invoke [as _invoke] (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:296:22) at Generator.forEach.prototype.(anonymous function) [as next] (D:\snapshot\pkg-ssr\node_modules\regenerator-runtime\runtime.js:114:21) at step (D:\snapshot\pkg-ssr\node_modules\@babel\runtime\helpers\asyncToGenerator.js:12:30) at _next (D:\snapshot\pkg-ssr\node_modules\@babel\runtime\helpers\asyncToGenerator.js:27:9) at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' }


Solution

  • In my case, the issue was that I wasn't packaging a built app. I needed to do a few things:

    • specify the assets and scripts in the package.json like below (note that dist was actually server in my case because I had a custom server and middleware)

      "pkg": { "assets": [ ".next/**/*" ], "scripts": [ ".next/dist/**/*.js" ] },

    • build the app first using next build
    • then ensure that whichever way I built the package, I used the package.json. For me the best command was their default example: pkg .

    See the following article from Mike Hsu in case you want a repo and instructions to compare to: https://medium.com/@evenchange4/deploy-a-commercial-next-js-application-with-pkg-and-docker-5c73d4af2ee