Error Cannot find module '../webpack-runtime.js' when using esbuild-loader

[rizrmd]

Hi,

I tried to improve blitzjs live-reload loading time by installing esbuild-loader in my project. As per privatenumber/esbuild-loader#62,

Good news is live-reload time are noticeably improved, pages are rendered fine, but then this error happened.
the error pops when I tried accessing api route with db access in it.

this is the error message :

24:25:16.425.000         ERROR  Error while processing the request

 Error  Cannot find module '../webpack-runtime.js'
Require stack:
- C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\.next\__db.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\@blitzjs\server\dist\server.cjs.development.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\@blitzjs\server\dist\index.js
- C:\Users\Riz\Desktop\parentuniv\.blitz\caches\dev\next.config.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\next-server\server\config.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\next-server\server\next-server.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\server\next.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\server\lib\start-server.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\cli\next-dev.js
- C:\Users\Riz\Desktop\parentuniv\node_modules\next\dist\bin\next
- C:\Users\Riz\Desktop\parentuniv\node_modules\@blitzjs\server\bin\next-patched
details:
{
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\Riz\\Desktop\\parentuniv\\.blitz\\caches\\dev\\.next\\__db.js',
    'C:\\Users\\Riz\\Desktop\\parentuniv\\node_modules\\@blitzjs\\server\\dist\\server.cjs.de
velopment.js',
    'C:\\Users\\Riz\\Desktop\\parentuniv\\node_modules\\@blitzjs\\server\\dist\\index.js',
    'C:\\Users\\Riz\\Desktop\\parentuniv\\.blitz\\caches\\dev\\next.config.js',
    'C:\\Users\\Riz\\Desktop\\parentuniv\\node_modules\\next\\dist\\next-server\\server\\conf
ig.js',
    'C:\\Users\\Riz\\Desktop\\parentuniv\\node_modules\\next\\dist\\next-server\\server\\next
-server.js',
    'C:\\Users\\Riz\\Desktop\\parentuniv\\node_modules\\next\\dist\\server\\next.js',
    'C:\\Users\\Riz\\Desktop\\parentuniv\\node_modules\\next\\dist\\server\\lib\\start-server
.js',
    'C:\\Users\\Riz\\Desktop\\parentuniv\\node_modules\\next\\dist\\cli\\next-dev.js',
    'C:\\Users\\Riz\\Desktop\\parentuniv\\node_modules\\next\\dist\\bin\\next',
    'C:\\Users\\Riz\\Desktop\\parentuniv\\node_modules\\@blitzjs\\server\\bin\\next-patched'
  ]
}
error stack:
• __db.js:56 <anonymous>
    .next\__db.js:56:27

• __db.js:59 <anonymous>
    .next\__db.js:59:3

• index.js:104 newLoader
    node_modules\pirates\lib\index.js:104:7

code frame:
  051 |
  052 | };
  053 | ;
  054 |
  055 | // load runtime
> 056 | var __webpack_require__ = require("../webpack-runtime.js");
                                  ^
  057 | __webpack_require__.C(exports);
  058 | return __webpack_require__.X([], "./db/index.ts");
  059 | })();
  060 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb
3VyY2VzIjpbIndlYnBhY2s6Ly9ibGl0ei8uL2RiL2luZGV4LnRzIiwid2VicGFjazovL2JsaXR6L2V4dGVybmFsIFwiQH
ByaXNtYS9jbGllbnRcIiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQTt
BQUNBO0FBRUEsSUFBSTtBQUVKLElBQUksS0FBcUMsRUFBRSxFQUMxQjtBQUliLGFBQVcsWUFBWSxXQUFXLGFBQWEsSUFB
SSx3REFBWTtBQUMvRCxXQUFTLFdBQVc7QUFBQTtBQUd4QiwrREFBZSxNQUFNOzs7Ozs7Ozs7Ozs7Ozs7O0FDZHJCLDRDI
iwiZmlsZSI6Ii4uL19fZGIuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQcmlzbWFDbGllbnQgfSBmcm9tIF
wiQHByaXNtYS9jbGllbnRcIlxuZXhwb3J0ICogZnJvbSBcIkBwcmlzbWEvY2xpZW50XCJcblxubGV0IHByaXNtYTogUHJ
pc21hQ2xpZW50XG5cbmlmIChwcm9jZXNzLmVudi5OT0RFX0VOViA9PT0gXCJwcm9kdWN0aW9uXCIpIHtcbiAgICBwcmlz
bWEgPSBuZXcgUHJpc21hQ2xpZW50KClcbn0gZWxzZSB7XG4gICAgLy8gRW5zdXJlIHRoZSBwcmlzbWEgaW5zdGFuY2Uga
XMgcmUtdXNlZCBkdXJpbmcgaG90LXJlbG9hZGluZ1xuICAgIC8vIE90aGVyd2lzZSwgYSBuZXcgY2xpZW50IHdpbGwgYm
UgY3JlYXRlZCBvbiBldmVyeSByZWxvYWRcbiAgICBnbG9iYWxUaGlzW1wicHJpc21hXCJdID0gZ2xvYmFsVGhpc1tcInB
yaXNtYVwiXSB8fCBuZXcgUHJpc21hQ2xpZW50KClcbiAgICBwcmlzbWEgPSBnbG9iYWxUaGlzW1wicHJpc21hXCJdXG59
XG5cbmV4cG9ydCBkZWZhdWx0IHByaXNtYVxuIiwibW9kdWxlLmV4cG9ydHMgPSByZXF1aXJlKFwiQHByaXNtYS9jbGllb
nRcIik7OyJdLCJzb3VyY2VSb290IjoiIn0=

Any suggestion ?

[rizrmd]

Tried removing webpack 5 in my package.json does not do any difference.

[flybayer]

Hmm, I don't know what would be the fix. __db.js is the compiled version of db/index.ts and is configured here: https://github.com/blitz-js/blitz/blob/canary/packages/server/src/with-blitz.ts#L22

[AkifumiSato]

This is an interesting topic for me.
When I tried to reproduce it, I got the following error in my environment.

...
ready - started server on http://localhost:3000
error - ./pages/_app.tsx
Error: [BABEL] <local path>/.blitz/caches/dev/pages/_app.tsx: Cannot find module '@babel/plugin-syntax-typescript'
...

This seems to be a problem that depends heavily on Next.
Do I need to rewrite the loader and some plugins for esbuild to handle __db.js issues and these?
https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack/loaders/next-babel-loader.js

[flybayer]

@AkifumiSato possibly? I'm not sure, this is beyond my experience!