[Feedback] Turbopack Beta

[leerob]

We’re excited to introduce Turbopack, the successor to Webpack:

• Up to 700x faster than Webpack
• Native incremental architecture built w/Rust
• Support for Server Components
• Support for TS, JSX, CSS, and more

This discussion is where you can provide feedback on the beta. View the documentation and see the currently supported features.

[maxwellwalin]

Running next dev --turbo quits instantly.

package.json

{
  "name": "next-13",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^13.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "eslint": "8.26.0",
    "eslint-config-next": "^13.0.0"
  }
}

^^ Quits.

[jqpe]

Doesn't allow two instances as is. You might have another instance of Next.js running or something else running on port 3000.

[maxwellwalin]

That was it. Thank you.

[icyJoseph]

Or pass -p 3001 for example to run in another port

[jridgewell]

We'll have a fix for the silent port exit in vercel/next.js#41989.

[m1guelpf]

no tailwind :(

[WildEgo]

Tailwind does work, you have an example right here.

[asddataking]

So I'm running into this issue as well, I'm getting the Tailwind on Inspect in my dom but, no styling changes on screen. .

[sor4chi]

same :(

[sor4chi]

oh... following the example repo, run tailwind static regeneration watch with dev, it works! sorry!

[WildEgo]

After upgrading I've hit a wall while using turbopacks, it seems like my images.remotePatterns in next.config.js is completely ignored.

I get spat the following

This is the error on the localhost itself

My next.config.js is the following

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: '127.0.0.1',
        port: '3001',
        pathname: '/uploads/**',
      },
    ],
  },
  experimental: {
    appDir: true,
  },
};

module.exports = nextConfig;

edit: I've also had to add height and width to all my import images since it said it could not find it, it spat the same thing in the console tho.

[hubertkuoch]

Just to quite a few other options seem to be not yet ported to turbopack e.g. distDir etc.

[bavicj]

having same issue with external images with next/image

[WildEgo]

having same issue with external images with next/image

Even local images refuse to work with me unless they're SVGs

[Almarex-Web-Dev]

i also had the same issue. it needs to be fixed tho

[alexanderfanz]

Looks like my {experimental:{appDir: true}} in my next.config.js is also being ignored. If I use Webpack I can use the /app directory without issues.

[m1guelpf]

Seems to struggle with loading my Prisma config

[mkalvas]

Might have something to do with this?

[OMikkel]

@m1guelpf Did you figure it out?
I had the exact same error however, inserting the below line into my next.config.js fixed it.
serverComponentsExternalPackages: ['@prisma/client'],
Check out this link for further context https://beta.nextjs.org/docs/api-reference/next.config.js#servercomponentsexternalpackages

[reckter]

We use Typescripts baseUrl: "src" flag, to enable us to have no relative imports, and instead import everything from a common base-folder ("src" in our case).
Turbopack does not seem to support this option yet. It instead complains, that it can not find the given module.

[JohnDaly]

I'm getting warnings when using Turbopack that I don't think are valid.

service/events.ts
  unexpected export *
  export * used with module [project-with-next]/service/events.ts which has no exports
  Typescript only: Did you want to import only types with `export type * from "..."`?

TypeScript shows a warning when attempting to use export type * from '...' syntax however:

export type * from './events';

Results in an Only named exports may use 'export type'. error from TypeScript.

It looks like TypeScript support for this syntax is not available yet, but may be coming soon:
microsoft/TypeScript#37238

[MarcusHSmith]

How do I debug using turbopack? I'm in the example and trying to add console.log within my lib. I'm not seeing logs

[williamwesterlund]

following

[JohnDaly]

The styled-components module is being referenced, when that package is not used in the project I'm working on.

    components/Sample.tsx
      Error resolving esm request
      unable to resolve module "styled-components"

I think this might have to do with the styled-components transform being enabled by default?

d15308b#diff-f925c8a54d0915699648170786b422f2132ff4751034dfe5c06afbcf565b94b0R92

One of my components is using a css prop, which is intended for Emotion, but the styled-components transform might be adding a styled-components import statement if it sees a css prop?

[JohnDaly]

Just confirmed the behavior by creating a new Next project with yarn create next-app --typescript and then adding the following code to the index.tsx page:

<div css={{ color: 'green' }}>Hello</div>

It results in this output in the terminal when running yarn dev --turbo:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - initial compilation 4.921ms
error - [resolve] pages/index.tsx
  Error resolving esm request
  unable to resolve module "styled-components"

event - updated in 640ms

[Multiply]

I'm seeing the same for one of my projects.

[mkalvas]

Turbopack failed for me without any message when the port was in use. Freeing the port and trying again worked fine.

[jridgewell]

We'll have a fix for the silent port exit in vercel/next.js#41989.

[Yoinky3000]

when i start development mode with turbo enabled (next dev --turbo) and visit to a page i get the this in my console:

warning - [other] 
  Could not resolve React Refresh runtime
  React Refresh will be disabled.
  To enable React Refresh, install the `react-refresh` and `@next/react-refresh-utils` modules.

warning - [other] 
  Could not resolve React Refresh runtime
  React Refresh will be disabled.
  To enable React Refresh, install the `react-refresh` and `@next/react-refresh-utils` modules.

error -
  [rendering]
    [root of the dev server]/
      Error during SSR Rendering
      Error: Cannot find module 'next/dist/server/node-polyfill-fetch'
        at <unknown> (.next/server/app/chunks/ssr/_4c4a56.js:1:0)
        at <unknown> (.next/server/app/chunks/ssr/_4c4a56.js:1:0)
        at Module.[project-with-next]/app/entry (ecmascript, ssr) (.next/server/app/chunks/ssr/_4c4a56.js:368:3)
        at <unknown> (.next/server/app/chunks/ssr/_4c4a56.js:747:21)
        at runModuleExecutionHooks (.next/server/app/chunks/ssr/_4c4a56.js:785:5)
        at instantiateModule (.next/server/app/chunks/ssr/_4c4a56.js:746:5)
        at instantiateRuntimeModule (.next/server/app/chunks/ssr/_4c4a56.js:1331:12)
        at <unknown> (.next/server/app/chunks/ssr/_4c4a56.js:386:1)
        at <unknown> (.next/server/app/chunks/ssr/_4c4a56.js:1382:39)
        at <anonymous>
        at Object.registerChunk [as push] (.next/server/app/chunks/ssr/_4c4a56.js:1382:25)
        at Object.<anonymous> (.next/server/app/chunks/rsc/ui_AddressBar.tsx.js:1:41)
        at Module._compile (node:internal/modules/cjs/loader:1155:14)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
        at Module.load (node:internal/modules/cjs/loader:1033:32)
        at Function.Module._load (node:internal/modules/cjs/loader:868:12)
        at Module.require (node:internal/modules/cjs/loader:1057:19)
        at require (node:internal/modules/cjs/helpers:103:18)
        at Object.<anonymous> (.next/server/app/index.js:17:1)
        at Module._compile (node:internal/modules/cjs/loader:1155:14)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
        at Module.load (node:internal/modules/cjs/loader:1033:32)
        at Function.Module._load (node:internal/modules/cjs/loader:868:12)
        at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
        at <unknown> (node:internal/main/run_main_module:22:47)
      

  [resolve]
    [next]/entry/fallback.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

      Error resolving esm request
      unable to resolve module "react-dom" with subpath "/client"

    [next]/overlay/internal/ErrorBoundary.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/ReactDevOverlay.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/components/CodeFrame/CodeFrame.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/components/Dialog/Dialog.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/components/Dialog/DialogBody.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/components/Dialog/DialogContent.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/components/Dialog/DialogHeader.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/components/Overlay/Overlay.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/components/ShadowPortal.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

      Error resolving esm request
      unable to resolve module "react-dom"

    [next]/overlay/internal/components/Terminal/Terminal.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/components/Toast/Toast.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/container/BuildError.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/container/Errors.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/container/RuntimeError.tsx
      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/hooks/use-on-click-outside.ts
      Error resolving esm request
      unable to resolve module "react"

    [next]/overlay/internal/icons/CloseIcon.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/styles/Base.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/styles/ComponentStyles.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    [next]/overlay/internal/styles/CssReset.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    app/GlobalNav.tsx
      Error resolving esm request
      unable to resolve module "clsx"

      Error resolving esm request
      unable to resolve module "next" with subpath "/link"

      Error resolving esm request
      unable to resolve module "next" with subpath "/navigation"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    app/GlobalNav.tsx/client-proxy.tsx
      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/build/webpack/loaders/next-flight-loader/module-proxy"

    app/entry
      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/server/app-render"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/server/node-polyfill-fetch"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/server/node-polyfill-web-streams"

    app/layout.tsx
      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    app/layout.tsx/layout-entry.tsx
      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/client/components/app-router.js"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/client/components/layout-router.js"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/client/components/render-from-template-context.js"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/compiled/react-server-dom-webpack/server.browser"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/esm/client/components/hooks-server-context.js"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/esm/client/components/request-async-storage.js"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/esm/client/components/static-generation-async-storage.js"

    app/page.tsx
      Error resolving esm request
      unable to resolve module "next" with subpath "/link"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    app/page.tsx/layout-entry.tsx
      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/client/components/app-router.js"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/client/components/layout-router.js"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/client/components/render-from-template-context.js"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/compiled/react-server-dom-webpack/server.browser"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/esm/client/components/hooks-server-context.js"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/esm/client/components/request-async-storage.js"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/esm/client/components/static-generation-async-storage.js"

    app/page.tsx/next-app-hydrate.tsx
      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/compiled/react-server-dom-webpack/client"

      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/shared/lib/head-manager-context"

      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

      Error resolving esm request
      unable to resolve module "react-dom" with subpath "/client"

    ui/AddressBar.tsx
      Error resolving esm request
      unable to resolve module "next" with subpath "/navigation"

      Error resolving esm request
      unable to resolve module "react"

      Error resolving esm request
      unable to resolve module "react" with subpath "/jsx-runtime"

    ui/AddressBar.tsx/client-proxy.tsx
      Error resolving esm request
      unable to resolve module "next" with subpath "/dist/build/webpack/loaders/next-flight-loader/module-proxy"

(i am using the with-turbopack example and i didnt change anything)

[stephtr]

In my case these errors came from using Yarn 2 (berry) or pnp inside a monorepo/workspace. Without workspace, it was working in my case.

[JasonBoy]

[email protected], same error when in a monorepo(with turborepo and pnpm) using turbo dev, the inside app using next dev --turbo option,

Error: Cannot find module 'next/dist/server/node-polyfill-fetch'

Debug info:
- Error: Cannot find module 'next/dist/server/node-polyfill-fetch'
      [at /Users/jason/workspace/github/wechat-jssdk/apps/web/.next/server/app/chunks/ssr/[next]_polyfill_app-polyfills.ts_d17a09._.js:14:15]
      [at Object.<anonymous> (/Users/jason/workspace/github/wechat-jssdk/apps/web/.next/server/app/chunks/ssr/[next]_polyfill_app-polyfills.ts_d17a09._.js:17:3)]
      [at Object.[next]/polyfill/app-polyfills.ts (ecmascript, ssr) (/Users/jason/workspace/github/wechat-jssdk/apps/web/.next/server/app/chunks/ssr/[next]_polyfill_app-polyfills.ts_d17a09._.js:35:3)]
      [at /Users/jason/workspace/github/wechat-jssdk/apps/web/.next/server/app/chunks/ssr/[next]_entry_app-renderer.tsx_0d8ffb._.js:496:21]
      [at runModuleExecutionHooks (/Users/jason/workspace/github/wechat-jssdk/apps/web/.next/server/app/chunks/ssr/[next]_entry_app-renderer.tsx_0d8ffb._.js:542:3)]
      ...

[abyii]

same error with turborepo, pnpm workspace, next 13.4. Any updates on this?

[bestickley]

Same here. Hope this gets fixed soon!

[stephtr]

For everyone ending up on this issue: The solution is documented in #4763 (comment)

[JohnDaly]

In the with-turbopack example, the Boundary component doesn't render when using turbopack:

Expected (next dev)

Borders are rendered around the sections

Actual (next dev --turbo)

No borders rendered

[nerdo]

I tried using top level await and it doesn't work with turbopack - no surprise there; there are plenty of core features that have yet to be fleshed out.

I just wanted to put my two cents in and say that I hope that there will be support for it since the top level await proposal is in stage 4 😬

[YuJM]

{
  "scripts": {
    "dev": "concurrently \"next dev --turbo\" \"npm run tailwind --watch\""
  }
}

update tailwind classname
-> does not apply smoothly.

[apecollector]

In the example from npx create-next-app --example with-turbopack there is a file in app/GlobalNav.tsx which results in a weird 404 error that causes a download of a file called layouts:

npx create-next-app --example with-turbopack
cd next13-with-turbopack
npm run dev
# open http://localhost:3000/GlobalNav

[Sonequa]

Keep getting this error when running 'next dev --turbo' after installing next v13 to my project:

error - [rendering] [root of the dev server]/  Error during SSR Rendering
  ReferenceError: defaultStyleFunctionMapping is not defined
    at unstable_createStyleFunctionSx (.next/server/pages/chunks/node_modules__c0dde0.pnpm.js:16:70)
    at <unknown> (.next/server/pages/chunks/node_modules__c0dde0.pnpm.js:104:24)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_j7wi73ltmg3t45cjnttv5wsory/node_modules/@mui/system/esm/styleFunctionSx/styleFunctionSx.js (ecmascript) (.next/server/pages/chunks/node_modules__c0dde0.pnpm.js:28938:3)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:4951:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_1bc7ea.js:4989:5)
    at instantiateModule (.next/server/pages/chunks/_1bc7ea.js:4950:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_1bc7ea.js:5031:12)
    at esmImport (.next/server/pages/chunks/_1bc7ea.js:4760:20)
    at <unknown> (.next/server/pages/chunks/node_modules__c0dde0.pnpm.js:1:0)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_j7wi73ltmg3t45cjnttv5wsory/node_modules/@mui/system/esm/styleFunctionSx/index.js (ecmascript) (.next/server/pages/chunks/node_modules__c0dde0.pnpm.js:27388:3)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:4951:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_1bc7ea.js:4989:5)
    at instantiateModule (.next/server/pages/chunks/_1bc7ea.js:4950:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_1bc7ea.js:5031:12)
    at esmImport (.next/server/pages/chunks/_1bc7ea.js:4760:20)
    at <unknown> (.next/server/pages/chunks/node_modules__c0dde0.pnpm.js:1:0)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_j7wi73ltmg3t45cjnttv5wsory/node_modules/@mui/system/esm/index.js (ecmascript) (.next/server/pages/chunks/node_modules__c0dde0.pnpm.js:26346:3)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:4951:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_1bc7ea.js:4989:5)
    at instantiateModule (.next/server/pages/chunks/_1bc7ea.js:4950:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_1bc7ea.js:5031:12)
    at esmImport (.next/server/pages/chunks/_1bc7ea.js:4760:20)
    at <unknown> (.next/server/pages/chunks/node_modules__0b0f3c.pnpm.js:1:0)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_zf7ckydgka3owh777vmiilym5q/node_modules/@mui/material/esm/styles/adaptV4Theme.js (ecmascript) (.next/server/pages/chunks/node_modules__0b0f3c.pnpm.js:6517:3)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:4951:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_1bc7ea.js:4989:5)
    at instantiateModule (.next/server/pages/chunks/_1bc7ea.js:4950:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_1bc7ea.js:5031:12)
    at esmImport (.next/server/pages/chunks/_1bc7ea.js:4760:20)
    at <unknown> (.next/server/pages/chunks/node_modules__0b0f3c.pnpm.js:1:0)
    at Module.[project-with-next]/node_modules/.pnpm/@[email protected]_zf7ckydgka3owh777vmiilym5q/node_modules/@mui/material/esm/styles/index.js (ecmascript) (.next/server/pages/chunks/node_modules__0b0f3c.pnpm.js:3916:3)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:4951:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_1bc7ea.js:4989:5)
    at instantiateModule (.next/server/pages/chunks/_1bc7ea.js:4950:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_1bc7ea.js:5031:12)
    at esmImport (.next/server/pages/chunks/_1bc7ea.js:4760:20)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:1:0)
    at Module.[project-with-next]/pages/_app.tsx (ecmascript) (.next/server/pages/chunks/_1bc7ea.js:460:3)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:4951:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_1bc7ea.js:4989:5)
    at instantiateModule (.next/server/pages/chunks/_1bc7ea.js:4950:5)
    at getOrInstantiateModuleFromParent (.next/server/pages/chunks/_1bc7ea.js:5031:12)
    at esmImport (.next/server/pages/chunks/_1bc7ea.js:4760:20)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:1:0)
    at Object.[project-with-next]/pages/index.tsx/server-renderer.tsx (ecmascript) (.next/server/pages/chunks/_1bc7ea.js:288:3)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:4951:21)
    at runModuleExecutionHooks (.next/server/pages/chunks/_1bc7ea.js:4989:5)
    at instantiateModule (.next/server/pages/chunks/_1bc7ea.js:4950:5)
    at instantiateRuntimeModule (.next/server/pages/chunks/_1bc7ea.js:5535:12)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:4590:1)
    at <unknown> (.next/server/pages/chunks/_1bc7ea.js:5586:39)
    at <anonymous>
    at Object.registerChunk [as push] (.next/server/pages/chunks/_1bc7ea.js:5586:25)
    at Object.<anonymous> (.next/server/pages/chunks/_43250f.js:1:41)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (.next/server/pages/index.js:12:1)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at <unknown> (node:internal/main/run_main_module:17:47)
  
  
  | Node.js exit code: 1

[oalexdoda]

Same issue here. Simple starter project with Next 13 + MUI + Emotion + dev Turbo: ReferenceError: defaultStyleFunctionMapping is not defined

[enricoros]

Same issue here. Using Material UI (v5, comes with emotion by default) over Next 13: ReferenceError: defaultStyleFunctionMapping is not defined

[oalexdoda]

Emotion JS says it’s not something on their side: emotion-js/emotion#2930 - maybe it’s something in MUI?

Also opened an issue here if anyone can get to the bottom of this: mui/material-ui#34910

[mnajdova]

The issue is not related to emotion. Looks like this import in @mui/system cannot be resolved for some reason - https://github.com/mui/material-ui/blob/master/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js#L2

[Srijan-D]

Facing the same issue, whilst using Next 13.2.4 + react-social-icons v5.15.0 + dev Turbo

[apinanyogaratnam]

i would like to enable turbopack after i've created a nextjs application without adding the arg when installing. i.e. add to existing projects with nextjs as I've just heard about this feature but unable to

[kratos-respawned]

Add a new script in package.json

turbo:"next dev --turbo"

Then use npm run turbo or yarn turbo

[tonyxiao]

Cannot even get the starter example to work. :(

[padmaia]

Sorry, this was due to git ignoring a case change when I updated the example code recently. It should be fixed in the next patch version. Relevant: vercel/next.js#50223

[padmaia]

Confirmed this is fixed in the latest canary if you want to try it out pnpm create next-app@canary -e with-turbopack

[tonyxiao]

Confirmed this is working. Did it impact only the example app or other projects trying turbopack also?

[padmaia]

Just the example app

[davbazz]

I got severe overheating problems and enormous ram usage when using turbo pack. Been using mac pro m1 for two years now and it is the first time it got overheated.

[padmaia]

Sorry to hear you're experiencing this. Does it happen right away, or if you are using it for a long time? We have been focusing on finishing features and fixing bugs, but plan to spend more time looking into performance as we get closer to stable.

[syslaz]

Same issue on my M2 Mac Pro, node running at 100%+ CPU usage and browser cannot even connect to the dev server at all. Did not notice the CPU usage until I looked at this comment but sure enough I can confirm. Ran turbo with DEBUG=* env options, and all it says is this after server says ready:

ready - started server on [::]:3000, url: http://localhost:3000
TIMER 97398: process timer lists 1079
TIMER 97398: timeout callback 1000
TIMER 97398: 1000 list wait because diff is -1
TIMER 97398: process timer lists 2081
TIMER 97398: timeout callback 1000
TIMER 97398: 1000 list wait because diff is -2
TIMER 97398: process timer lists 3083
TIMER 97398: timeout callback 1000
TIMER 97398: 1000 list wait because diff is -1
TIMER 97398: process timer lists 4084
TIMER 97398: timeout callback 1000

[remyoudemans]

Hi, turbopack is very exciting and thanks for all the hard work!
Just upgraded a project to [email protected] yesterday and tried running npx next dev --turbo, and it looks like publicRuntimeConfig and serverRuntimeConfig aren't supported in next.config.js.
It doesn't look like that's listed as a planned feature on the Missing Features tracker issue vercel/next.js#49174.
Are there plans to add support?

[padmaia]

It's considered a legacy feature, so it's low on the priority list if we even get to it before it's deprecated. You should be able to accomplish the same behavior with environment variables, but if you have issues, let us know.

[tonyxiao]

Getting Error: Cannot find module 'next/dist/server/node-polyfill-fetch' after switching, can't quite figure out why.

[tonyxiao]

It appears that this has something to do with the fact that I'm trying to use turbopack inside a mono repo. I ran pnpm create next-app@canary -e with-turbopack inside my monorepo and the resulting project failed to launch with the above error. If I create outside then it works.

[tonyxiao]

Ok I was able to get a reproducible example here. https://github.com/tonyxiao/next-turbopack-example. All that is needed to break turbopack is to set it up inside a pnpm workspace, with starting point being the example app

[padmaia]

This should be fixed with 13.4.4

[jb-thery]

try : next dev --turbo --root /

[padmaia]

Thanks for all of your feedback so far! Now that we are in the beta phase for next dev --turbo, we would prefer people to open a GitHub issue with a reproduction if they are experiencing issues.

Some features are still not implemented, and we have been tracking them in this issue: vercel/next.js#49174

[Zer-0ne]

it stuck at ready for hours

[Zer-0ne]

i am using app dir but in app dir SSR not render with turbo pack

[Zer-0ne]

@boredjoker
i haven't open this in browser if you not open in browser the turbopack display only ready

[Zer-0ne]

@shauryaaher latest next 13.4 app dir

[kratos-respawned]

Mongoose error(maybe it is not supported ), try using prisma for a while

[padmaia]

Could you try out with v13.5+ and open an issue in the Next.js repo if you are still experiencing an issue?

[yuta-hidaka]

Hello !

The Nextjs and turbo pack is the best combination so far!

Is there a plan to support the i18n setting in the turbo pack?

[padmaia]

These option should now be enabled in v13.5+

[salmansheri]

constantly fetching data while using clerk auth

[padmaia]

Could you try out with v13.5+ and open an issue in the Next.js repo if you are still experiencing an issue?

[RaghavBhat02]

Fonts seem to default to lowest possible font weights.

[wojtekmaj]

I'm getting an error:

[500] error (844ms): Non matching path (auth_callback) provided for /(auth)/auth_callback

Debug info:
- Execution of get_from_source failed
- Execution of resolve_source_request failed
- Execution of NodeRenderContentSource::get failed
- Non matching path (auth_callback) provided for /(auth)/auth_callback

Of course, it runs just fine on Webpack mode.

[jlucaso1]

Same error here:

Non matching path (signin) provided for /(public)/(marketingpage)/(auth)/signin

Debug info:
- Execution of <NodeRenderContentSource as GetContentSourceContent>::get failed
- Non matching path (signin) provided for /(public)/(marketingpage)/(auth)/signin

[stephtr]

Are you working in a monorepo? In this case you could try #4763 (comment).

[wojtekmaj]

Nope, not a monorepo. Tried monorepo too actually, same issue, but it doesn't seem to be related at all.

The setup I've done to reproduce the issue is extremely simple.

Archive.zip

app
  (dashboard)
    page.tsx -> <h1>Dashboard</h1>
  layout.tsx -> <html lang="en"><body>{children}</body></html>

that's it.

[wojtekmaj]

As of 13.4.13, I'm no longer getting this error. However, my application still does not run:

Show error

- error Error: Cannot find module 'modularize-import-loader?name=BookOpenIcon&from=default&as=default&join=./icons/book-open!lucide-react' [at /.next/server/app/chunks/ssr/_028628._.js:135092:15] [at /.next/server/app/chunks/ssr/_028628._.js:135095:3] [at [project]/src/app/(dashboard)/MainMenu.tsx (ecmascript, rsc) (/.next/server/app/chunks/ssr/_028628._.js:135230:3)] at /turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:322:21 [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:394:27] at runModuleExecutionHooks (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:373:5) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:426:9] at instantiateModule (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:321:5) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:393:9] at getOrInstantiateModuleFromParent (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:421:10) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:453:12] at esmImport (/turbopack/[turbopack]/shared/runtime-utils.ts:203:18) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:102:20] [at /.next/server/app/chunks/ssr/_028628._.js:135251:124] [at [project]/src/app/(dashboard)/layout.tsx (ecmascript, rsc) (/.next/server/app/chunks/ssr/_028628._.js:135338:3)] at /turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:322:21 [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:394:27] at runModuleExecutionHooks (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:373:5) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:426:9] at instantiateModule (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:321:5) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:393:9] at getOrInstantiateModuleFromParent (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:421:10) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:453:12] at esmImport (/turbopack/[turbopack]/shared/runtime-utils.ts:203:18) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:102:20] [at Module.default (/.next/server/app/chunks/ssr/_028628._.js:135342:20)] at Array. (/turbopack/[next]/entry/app-entry.tsx:26:14) [/.next/server/app/chunks/ssr/[next]_entry_app-entry_tsx_af3a0c._.js:44:195] at getLayoutOrPageModule (node_modules/next/dist/server/lib/app-dir-module.js:31:32) [/.next/server/app/chunks/ssr/node_modules_338bfa._.js:24862:32] at createComponentTree (node_modules/next/dist/server/app-render/app-render.js:417:83) [/.next/server/app/chunks/ssr/node_modules_338bfa._.js:28111:85] at node_modules/next/dist/server/app-render/app-render.js:551:84 [/.next/server/app/chunks/ssr/node_modules_338bfa._.js:28224:82] at Array.map () at createComponentTree (node_modules/next/dist/server/app-render/app-render.js:512:84) [/.next/server/app/chunks/ssr/node_modules_338bfa._.js:28191:84] [at async /.next/server/app/chunks/ssr/node_modules_338bfa._.js:28506:62] - error Error: Cannot find module 'modularize-import-loader?name=BookOpenIcon&from=default&as=default&join=./icons/book-open!lucide-react' [at /.next/server/app/chunks/ssr/_028628._.js:135092:15] [at /.next/server/app/chunks/ssr/_028628._.js:135095:3] [at [project]/src/app/(dashboard)/MainMenu.tsx (ecmascript, rsc) (/.next/server/app/chunks/ssr/_028628._.js:135230:3)] at /turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:322:21 [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:394:27] at runModuleExecutionHooks (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:373:5) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:426:9] at instantiateModule (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:321:5) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:393:9] at getOrInstantiateModuleFromParent (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:421:10) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:453:12] at esmImport (/turbopack/[turbopack]/shared/runtime-utils.ts:203:18) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:102:20] [at /.next/server/app/chunks/ssr/_028628._.js:135251:124] [at [project]/src/app/(dashboard)/layout.tsx (ecmascript, rsc) (/.next/server/app/chunks/ssr/_028628._.js:135338:3)] at /turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:322:21 [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:394:27] at runModuleExecutionHooks (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:373:5) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:426:9] at instantiateModule (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:321:5) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:393:9] at getOrInstantiateModuleFromParent (/turbopack/[turbopack]/dev/runtime/base/runtime-base.ts:421:10) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:453:12] at esmImport (/turbopack/[turbopack]/shared/runtime-utils.ts:203:18) [/.next/server/app/chunks/ssr/[next]_entry_app-renderer_tsx_5a1dc9._.js:102:20] [at Module.default (/.next/server/app/chunks/ssr/_028628._.js:135342:20)] at Array. (/turbopack/[next]/entry/app-entry.tsx:26:14) [/.next/server/app/chunks/ssr/[next]_entry_app-entry_tsx_af3a0c._.js:44:195] at getLayoutOrPageModule (node_modules/next/dist/server/lib/app-dir-module.js:31:32) [/.next/server/app/chunks/ssr/node_modules_338bfa._.js:24862:32] at createComponentTree (node_modules/next/dist/server/app-render/app-render.js:417:83) [/.next/server/app/chunks/ssr/node_modules_338bfa._.js:28111:85] at node_modules/next/dist/server/app-render/app-render.js:551:84 [/.next/server/app/chunks/ssr/node_modules_338bfa._.js:28224:82] at Array.map () at createComponentTree (node_modules/next/dist/server/app-render/app-render.js:512:84) [/.next/server/app/chunks/ssr/node_modules_338bfa._.js:28191:84] [at async /.next/server/app/chunks/ssr/node_modules_338bfa._.js:28506:62] digest: "2778807758" error - [parse] ... [1 paths] are hidden, run with --show-all to show them [resolve] src/app/(dashboard)/Flyout.tsx Error resolving EcmaScript Modules request unable to resolve module "modularize-import-loader?name=XIcon&from=default&as=default&join=." with subpath "/icons/x!lucide-react"

      src/app/(dashboard)/MainMenu.tsx
      Error resolving EcmaScript Modules request
      unable to resolve module "modularize-import-loader?name=BookOpenIcon&from=default&as=default&join=." with subpath "/icons/book-open!lucide-react"

      Error resolving EcmaScript Modules request
      unable to resolve module "modularize-import-loader?name=CalculatorIcon&from=default&as=default&join=." with subpath "/icons/calculator!lucide-react"

      Error resolving EcmaScript Modules request
      unable to resolve module "modularize-import-loader?name=ContactIcon&from=default&as=default&join=." with subpath "/icons/contact!lucide-react"

      ... [5 more issues] are hidden, run with --show-all to show all
    src/app/(dashboard)/UserMenu.tsx
      Error resolving EcmaScript Modules request
      unable to resolve module "modularize-import-loader?name=ChevronRightIcon&from=default&as=default&join=." with subpath "/icons/chevron-right!lucide-react"

      Error resolving EcmaScript Modules request
      unable to resolve module "modularize-import-loader?name=LogOutIcon&from=default&as=default&join=." with subpath "/icons/log-out!lucide-react"

      Error resolving EcmaScript Modules request
      unable to resolve module "modularize-import-loader?name=SettingsIcon&from=default&as=default&join=." with subpath "/icons/settings!lucide-react"

      ... [1 more issues] are hidden, run with --show-all to show all
    ... [4 more paths] are hidden, run with --show-all to show all
warning - [parse]
  ... [4 paths] are hidden, run with --show-all to show them

[padmaia]

Could you try out with v13.5+ and open an issue in the Next.js repo if you are still experiencing an issue?

[user2410]

i have the same issue #2312 (comment) . i created a new nextjs project. it stucks at ready for more than an hour. i tried accessing localhost:3000/ on browser and got stuck at loading state

[padmaia]

Could you try out with v13.5+ and open an issue in the Next.js repo if you are still experiencing an issue?

[wogno]

Turbo not working with rechart js, but works well without it.

[padmaia]

Could you try out with v13.5+ and open an issue in the Next.js repo if you are still experiencing an issue?

[ddcrobert]

Is it possible to use trailingSlash with turbopack? I have enabled trailingSlash and Next.js said it is not compatible with turbopack.

TrailingSlash is working great on Next.js, however it's blocking the use of Turbo. There is no sign of it, is it coming someday or is it deprecated? It would greatly help me with future choices, thank you guys.

[padmaia]

It was just enabled today in 13.5+ today! Try it out and let us know how it goes 🙏

[padmaia]

I neglected to lock the conversation when I last provided an answer

If you are experiencing issues with using Turbopack in Next.js, please open an issue with a reproduction on the Next.js repo. Thanks!