Cannot run Blitz with Webpack 5

[ssledorze]

What is the problem?

Blitzjs does not work (yet) using webpack 5.

Paste all your error logs here:

Try to access the App once compiled results in this crash:

23:31:19.561 ERROR Error while processing the request 

 Error  Cannot find module '../../webpack-runtime.js'
Require stack:
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/.next/blitz/db.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/@blitzjs/core/server/dist/blitzjs-core-server.cjs.dev.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/@blitzjs/core/server/dist/blitzjs-core-server.cjs.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/blitz/dist/blitz.cjs.dev.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/blitz/dist/blitz.cjs.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/blitz.config.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/next.config.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/next-server/server/config.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/next-server/server/next-server.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/server/next.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/server/lib/start-server.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/cli/next-dev.js
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/bin/next
- /Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/@blitzjs/server/bin/next-patched
details:
{
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/.next/blitz/db.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/@blitzjs/core/server/dist/blitzjs-core-server.cjs.dev.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/@blitzjs/core/server/dist/blitzjs-core-server.cjs.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/blitz/dist/blitz.cjs.dev.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/blitz/dist/blitz.cjs.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/blitz.config.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/next.config.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/next-server/server/config.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/server/next.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/server/lib/start-server.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/cli/next-dev.js',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/next/dist/bin/next',
    '/Users/stephaneledorze/Documents/projects/opteameo/cms/ideation-cms/node_modules/@blitzjs/server/bin/next-patched'
  ]
}
error stack:
• require-hook.ts:63 mod._resolveFilename
    node_modules/next/build/webpack/require-hook.ts:63:26

• db.js:52 <anonymous>
    .next/blitz/db.js:52:27

• db.js:58 <anonymous>
    .next/blitz/db.js:58:3

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

• blitzjs-core-server.cjs.dev.js:501 getDb
    node_modules/@blitzjs/core/server/dist/blitzjs-core-server.cjs.dev.js:501:25

• blitzjs-core-server.cjs.dev.js:511 getSession
    node_modules/@blitzjs/core/server/dist/blitzjs-core-server.cjs.dev.js:511:12

Paste all relevant code snippets here:

Here the config blitz.config.js :

const { sessionMiddleware, simpleRolesIsAuthorized } = require("blitz")

module.exports = {
  middleware: [
    sessionMiddleware({
      isAuthorized: simpleRolesIsAuthorized,
    }),
  ],
  future: {
    webpack5: true,
  },
}

What are detailed steps to reproduce this?

1. change the config like exposed
2. start: blitz dev
3. access the page (likely on http://localhost:3000)

Run blitz -v and paste the output here:

macOS Big Sur | darwin-x64 | Node: v14.16.1

blitz: 0.33.0 (global)
blitz: 0.34.3 (local)

  Package manager: yarn 
  System:
    OS: macOS 11.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 9.36 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.10.0 - ~/.nvm/versions/node/v14.16.1/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 2.21.2 => 2.21.2 
    blitz: 0.34.3 => 0.34.3 
    prisma: 2.21.2 => 2.21.2 
    react: 0.0.0-experimental-6a589ad71 => 0.0.0-experimental-6a589ad71 
    react-dom: 0.0.0-experimental-6a589ad71 => 0.0.0-experimental-6a589ad71 
    typescript: 4.2.4 => 4.2.4 

Please include below any other applicable logs and screenshots that show your problem:

No response

[markhughes]

@ssledorze could you share what's going on in your db file around lines 50-60?

(stripping anything sensitive along the way)

[flybayer]

@markhughes .next/blitz/db.js is a bundled version of db/index.[ts|js] which comes from here.

Could be that custom webpack config needs updated for webpack 5

[markhughes]

@flybayer ah, I misread! Interesting!

[benbender]

Can confirm the bug by simply toggling via

future: {
    webpack5: true
}

in blitz.config.ts