Can't compile "using" keyword in Turbopack Dev

Question

Can't compile "using" keyword in Turbopack Dev

aidenlx opened this issue a month ago · 2 comments

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/inspiring-liskov-r72y29

To Reproduce

Write some code with the using keyword (ECMAScript Explicit Resource Management), run dev server with --turbo option

e.g.

class Disposer {
  [Symbol.dispose]() {
    console.log("Disposed")
  }
}

export default function Page({ children }) {
  useEffect(() => {
    using disposer = new Disposer()
  }, [])
  
  return null
}

Current vs. Expected behavior

@ dev /project/workspace
next dev --turbo

▲ Next.js 15.0.4-canary.49 (Turbopack)

Local: http://localhost:3000

Network: http://192.168.241.2:3000

✓ Starting...
✓ Ready in 1205ms
○ Compiling / ...
✓ Compiled / in 2.7s
[Error: Failed to load chunk server/chunks/ssr/[root of the server]__64ec1c..js from parent module [project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/esm/build/templates/app-page.js?page=/page { METADATA_0 => "[project]/app/favicon.ico.mjs { IMAGE => "[project]/app/favicon.ico [app-rsc] (static)" } [app-rsc] (structured image object, ecmascript, Next.js server component)", MODULE_1 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", MODULE_2 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_3 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/forbidden-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_4 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/unauthorized-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_5 => "[project]/app/page.tsx [app-rsc] (ecmascript, Next.js server component)" } [app-rsc] (ecmascript) ] {
[cause]: SyntaxError: Unexpected identifier 'disposer'
at eval ()
}
⨯ unhandledRejection: [Error: Failed to load chunk server/chunks/ssr/[root of the server]__64ec1c..js from parent module [project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/esm/build/templates/app-page.js?page=/page { METADATA_0 => "[project]/app/favicon.ico.mjs { IMAGE => "[project]/app/favicon.ico [app-rsc] (static)" } [app-rsc] (structured image object, ecmascript, Next.js server component)", MODULE_1 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", MODULE_2 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_3 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/forbidden-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_4 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/unauthorized-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_5 => "[project]/app/page.tsx [app-rsc] (ecmascript, Next.js server component)" } [app-rsc] (ecmascript) ] {
[cause]: SyntaxError: Unexpected identifier 'disposer'
at eval ()
}
⨯ unhandledRejection: [Error: Failed to load chunk server/chunks/ssr/[root of the server]__64ec1c..js from parent module [project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/esm/build/templates/app-page.js?page=/page { METADATA_0 => "[project]/app/favicon.ico.mjs { IMAGE => "[project]/app/favicon.ico [app-rsc] (static)" } [app-rsc] (structured image object, ecmascript, Next.js server component)", MODULE_1 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", MODULE_2 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_3 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/forbidden-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_4 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/unauthorized-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_5 => "[project]/app/page.tsx [app-rsc] (ecmascript, Next.js server component)" } [app-rsc] (ecmascript) ] {
[cause]: SyntaxError: Unexpected identifier 'disposer'
at eval ()
}
⨯ [Error: Failed to load chunk server/chunks/ssr/[root of the server]__64ec1c..js from parent module [project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/esm/build/templates/app-page.js?page=/page { METADATA_0 => "[project]/app/favicon.ico.mjs { IMAGE => "[project]/app/favicon.ico [app-rsc] (static)" } [app-rsc] (structured image object, ecmascript, Next.js server component)", MODULE_1 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", MODULE_2 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_3 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/forbidden-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_4 => "[project]/node_modules/.pnpm/next@15.0.4-canary.49_react-dom@19.0.0_react@19.0.0/node_modules/next/dist/client/components/unauthorized-error.js [app-rsc] (ecmascript, Next.js server component)", MODULE_5 => "[project]/app/page.tsx [app-rsc] (ecmascript, Next.js server component)" } [app-rsc] (ecmascript) ] {
digest: '2118425113',
[cause]: SyntaxError: Unexpected identifier 'disposer'
at eval ()
}
GET / 500 in 3134ms

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.0.4-canary.49 // Latest available version is detected (15.0.4-canary.49).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

next dev --turbo does not even transplie the syntax even with explicit_resource_management: true enabled in swc

Answer 1 · 2024-12-10T23:50:36.000Z

It might be helpful to add a test case to cover this issue, as the problem with using the keyword has gone unnoticed in turbopack dev server (a long-standing issue) and babel dev and build (#72584, versions 15.0.3–15.0.5, resolved in the latest canary release) before being reported.