Parallel slots cannot use kebab case

[Exekyel]

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/holy-tree-lrkxn5

To Reproduce

1. Use appDir option
2. Create a route which will contain parallel routes, e.g. app/parallel-routes
3. Create a layout and page
4. Run the dev server
5. Load app page /parallel-routes
6. Observe that the page loads
7. Create a parallel slot with a kebab-case name, e.g. app/parallel-routes/@parallel-panel
8. Copy the working page into this slot
9. Run the dev server
10. Load app page /parallel-routes

Current vs. Expected behavior

I expected /parallel-routes to load, but instead the app cannot be rendered with the following error message:

ModuleParseError: Module parse failed: Unexpected token (9:14)
File was processed with these loaders:
 * ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js
You may need an additional loader to handle the result of these loaders.
|         'parallel-routes',
|         {
>       parallel-panel: [
|         '@parallel-panel',
|         {

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.6.0: Fri Sep 15 13:39:52 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_X86_64
Binaries:
  Node: 20.0.0
  npm: 9.6.4
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 13.5.4-canary.9
  eslint-config-next: 13.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.9.4
Next.js Config:
  output: N/A

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

App Router

Additional context

Note that the error happens even though the slot isn't referenced anywhere, so it's not possible to reference it even by quoting the slot name in the layout

I'm not able to find any documentation that uses parallel routes with slots that have more than one word in their name

We're using kebab case for most routing in our app because it seems to be the preferred convention in the docs: https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts (re: first-post.js)

Is kebab-case supported for parallel slots or do we need to use camelCase?

[avanderbergh]

I was wondering the same thing.

Would it make sense to automatically convert parallel groups with folder names in kebab-case to camelCase in the component ? 🤔

[IsakFriisJespersen2]

Encountered the same problem today, thought default behaviour would be that NextJs converts it to camelCase.

[tomazmm]

I have the same problem. Has anyone found a workaround?

[nadun-malinda]

I have faced the same issue. After spending a couple of hours on a workaround, I found that naming the slot folder camelCase will solve the problem. In your above scenario,

app/ └── parallel-routes └─── @parallelPanel // this is camelCase └───── page.tsx

Then in your layout.tsx, you can do:-

export default function MyLayout({parallelPanel}: {parallelPanel: React.ReactNode;}) {
  return <>
    {/* your html here */}
    {parallelPanel}
  </>
}

[gabrielricardourbina]

I'm facing the same problem, it wouldn't make sense to use camelCase, since some file systems have case insensitivity

[fishefam]

Kebab case works well with parallel routes. However, we cannot destructure props for these names. Use a param name for the prop object instead and access by square brackets.