Turbopack support for Blitz

[timneutkens]

• Includes the changes of Use this.rootContext instead of webpack internals #4313

This PR includes the changes required to make the Blitz loaders work with Turbopack. The biggest challenge is that Blitz currently uses private fields, namely _compiler (anything _ prefixed in webpack is private) and _compiler is not available in Turbopack. Even if we were to mock the _compiler being there Turbopack does not have the concept of multiple compilers running so the name can't be relied upon to decide when to compile or not.

Potentially a better solution for the webpack implementation is to use the this.target property (also not available in Turbopack) for the webpack implementation, that way you don't have to rely on internals that could change in the future.
Even better would be passing an option for when to apply, e.g. using isServer in the custom webpack config that is applied to Next.js.

Now for the Turbopack side of things:

• We've landed support for conditionally running loaders on e.g. browser or node, PR: add conditions for webpack loader rules vercel/next.js#63333
  • This is available on the latest canary: 14.2.0-canary.25, which I've published for you earlier this evening to try the changes in this PR.
  • There's a small configuration checking warning that we still have to resolve so it will show warnings about config being incorrect but the config I've shared below is the correct one.
• I've refactored the Blitz loader to just always run the transform when there is no name, instead we leverage the loader configuration to correctly apply at which layer we want the loader to run
• I've changed the require()/import() path to be relative instead of absolute since Turbopack does not support reading absolute paths since they cause uncacheable output as the path is specific to your machine.

Here's the next.config.js edits I've made to run the Blitz rpc loaders:

Notably Turbopack's glob matcher doesn't support [ and ] yet and you can't reliably escape them, we'll work on fixing that, but for now I just used * before and after the ...blitz path to wildcard match [[ and ]].

const { withBlitz } = require("@blitzjs/next")

const loaderClient = require.resolve("@blitzjs/rpc/dist/loader-client.cjs")
const loaderServer = require.resolve("@blitzjs/rpc/dist/loader-server.cjs")
const loaderServerResolvers = require.resolve("@blitzjs/rpc/dist/loader-server-resolvers.cjs")

console.log("loaderClient", loaderClient)
console.log("loaderServer", loaderServer)
console.log("loaderServerResolvers", loaderServerResolvers)

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        "cross-spawn": "./turbopack/empty.js",
        "npm-which": "./turbopack/empty.js",
        fs: { browser: "./turbopack/empty.js" },
      },
      rules: {
        "**/*...blitz*.{jsx,tsx,js,ts}": {
          default: {
            loaders: [{ loader: loaderServer, options: {} }],
            as: "*.ts",
          },
        },
        "**/{queries,mutations}/**": {
          browser: {
            loaders: [
              {
                loader: loaderClient,
                options: {},
              },
            ],
            as: "*.ts",
          },
          default: {
            loaders: [
              {
                loader: loaderServerResolvers,
                options: {},
              },
            ],
            as: "*.ts",
          },
        },
      },
    },
  },
}

module.exports = withBlitz(nextConfig)

Please give it a try and let me know if it's working as intended, as far as I can tell it's applying the loaders correctly now but I'm not familiar enough with Blitz to know for certain that e.g. edge cases are working correctly too 🙏

Closes: ?

What are the changes and their implications?

Feature Checklist

• Changeset added (run pnpm changeset in the root directory)
• Integration test added (see test docs if needed)

[changeset-bot]

🦋 Changeset detected

Latest commit: 263f23d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
blitz	Minor
@blitzjs/next	Major
@blitzjs/rpc	Major
next-blitz-auth	Patch
@blitzjs/auth	Major
@blitzjs/codemod	Major
@blitzjs/config	Major
@blitzjs/generator	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[flybayer]

Remaining for us to do

• auto add turbo config in withBlitz
• add test for turbo mode

[gengjiawen]

@timneutkens currently a blitzjs project build consume too much memory, can't even setup build on a 2gb machine (about 3.5g from my bizzare observation), will turbo improve this case ?

[cfragkos]

@timneutkens currently a blitzjs project build consume too much memory, can't even setup build on a 2gb machine (about 3.5g from my bizzare observation), will turbo improve this case ?

No, turbopack, at the moment is for the dev server. Building will remain the same.

[gengjiawen]

@timneutkens currently a blitzjs project build consume too much memory, can't even setup build on a 2gb machine (about 3.5g from my bizzare observation), will turbo improve this case ?

No, turbopack, at the moment is for the dev server. Building will remain the same.

But I guess it's very near, since turbo is almost 100% tests passed.

[kodiakhq]

This PR currently has a merge conflict. Please resolve this and then re-add the 0 - <(^_^)> - merge it! ✌️ label.

[flybayer]

!preview

[flybayer]

!preview turbopack

[gengjiawen]

This better stays on next 13. since next14 broken on vercel deploy.

[siddhsuresh]

!preview turbopack

[siddhsuresh]

!preview turbopack

[github-actions]

Snapshot Release turbopack

[blitzjs-bot]

Added @timneutkens contributions for doc, code and test