v2.0.7 `pnpm blitz dev --turbo` error with Invalid next.config.js options

[Gary Fung]

What is the problem?

problem in title

Paste all your error logs here:

terminal output:

> blitz dev --turbo

Loaded env from /Users/gfung/Documents/code/boomtv/vsm-nft-fe/.env.local
Loaded env from /Users/gfung/Documents/code/boomtv/vsm-nft-fe/.env
✔ Next.js was successfully patched with a React Suspense fix
✔ Routes manifest was successfully generated
   ▲ Next.js 14.1.4 (turbo)
   - Local:        http://localhost:3000
   - Environments: .env.local, .env
   - Experiments (use at your own risk):
     · turbo

 ⚠ Invalid next.config.js options detected:
 ⚠     Invalid input at "experimental.turbo.rules.**/*...blitz*.{jsx,tsx,js,ts}"
 ⚠     Expected array, received object at "experimental.turbo.rules.**/*...blitz*.{jsx,tsx,js,ts}"
 ⚠     "experimental.turbo.rules.**/*...blitz*.{jsx,tsx,js,ts}.loaders" is missing, expected array
 ⚠     "experimental.turbo.rules.**/*...blitz*.{jsx,tsx,js,ts}.as" is missing, expected string
 ⚠     Invalid input at "experimental.turbo.rules.**/{queries,mutations}/**"
 ⚠     Expected array, received object at "experimental.turbo.rules.**/{queries,mutations}/**"
 ⚠     "experimental.turbo.rules.**/{queries,mutations}/**.loaders" is missing, expected array
 ⚠     "experimental.turbo.rules.**/{queries,mutations}/**.as" is missing, expected string
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
TypeError: loaderItems is not iterable
    at ensureLoadersHaveSerializableOptions (/Users/gfung/Documents/code/boomtv/vsm-nft-fe/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.49.11/node_modules/next/dist/build/swc/index.js:633:38)
    at serializeNextConfig (/Users/gfung/Documents/code/boomtv/vsm-nft-fe/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.49.11/node_modules/next/dist/build/swc/index.js:612:13)
    at async rustifyProjectOptions (/Users/gfung/Documents/code/boomtv/vsm-nft-fe/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.49.11/node_modules/next/dist/build/swc/index.js:483:47)
    at async Object.createProject (/Users/gfung/Documents/code/boomtv/vsm-nft-fe/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.49.11/node_modules/next/dist/build/swc/index.js:641:57)
    at async createHotReloaderTurbopack (/Users/gfung/Documents/code/boomtv/vsm-nft-fe/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.49.11/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js:161:25)
    at async startWatcher (/Users/gfung/Documents/code/boomtv/vsm-nft-fe/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.49.11/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js:1185:38)
    at async setupDevBundler (/Users/gfung/Documents/code/boomtv/vsm-nft-fe/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.49.11/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js:1809:20)
    at async Span.traceAsyncFn (/Users/gfung/Documents/code/boomtv/vsm-nft-fe/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.49.11/node_modules/next/dist/trace/trace.js:151:20)
    at async initialize (/Users/gfung/Documents/code/boomtv/vsm-nft-fe/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.49.11/node_modules/next/dist/server/lib/router-server.js:78:30)
    at async Server.<anonymous> (/Users/gfung/Documents/code/boomtv/vsm-nft-fe/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.49.11/node_modules/next/dist/server/lib/start-server.js:247:36)

Paste all relevant code snippets here:

What next.config.js rules are expected? Pasting mine as ref:

// @ts-check
/** @type {import('next').NextConfig} */

const { withSentryConfig } = require('@sentry/nextjs')
const { withBlitz } = require('@blitzjs/next')

const config = {
  reactStrictMode: true,
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
  env: {
    APP_ENV: process.env.APP_ENV || 'development',
  },
  // experimental: {
  //   forceSwcTransforms: true,
  // },
  // swcMinify: true,

  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgoConfig: {
              plugins: [{ name: 'removeViewBox', active: false }],
            },
          },
        },
      ],
    })

    return config
  },
}

const sentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore
  authToken: process.env.SENTRY_AUTH_TOKEN,

  silent: true, // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
}

if (process.env.APP_ENV) module.exports = withBlitz(withSentryConfig(config, sentryWebpackPluginOptions))
else module.exports = withBlitz(config)

What are detailed steps to reproduce this?

pnpm blitz dev --turbo with blitz 2.0.7, which supposedly added turbopack support

Run blitz -v and paste the output here:

Blitz version: 2.0.7 (local)
macOS Sonoma | darwin-x64 | Node: v21.7.2


 Package manager: pnpm

  System:
    OS: macOS 14.3
    CPU: (8) x64 Apple M1
    Memory: 12.35 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.2 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
  npmPackages:
    @blitzjs/auth: ~2.0.7 => 2.0.7
    @blitzjs/next: ~2.0.7 => 2.0.7
    @blitzjs/rpc: ~2.0.7 => 2.0.7
    @prisma/client: Not Found
    blitz: ~2.0.7 => 2.0.7
    next: ^14.1.4 => 14.1.4
    prisma: Not Found
    react: ~18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ~5.3.3 => 5.3.3

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

No response

[Siddharth Suresh]

hey @fungilation sorry about this, I missed adding the warning to upgrade of the next version to use this feature in the release. (Updated now)

To use this feature, please upgrade to latest next canary: >14.2.0-canary.25.

Regarding the warnings, the config is correct and should be fixed in some time upstream in next. See #4314 (comment) for more details.

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.

[Siddharth Suresh]

My above comment is with regards to the usage of blitz webpack loaders, I see that you are using the @svgr/webpack loader. You would need to migrate from using webpack loaders to turbopack

Docs: https://nextjs.org/docs/app/api-reference/next-config-js/turbo#webpack-loaders