Paraglide Issues with Next App Router installation

[themataleao]

I have tried to install paraglide for nextjs within my project with the app router but I am facing a few issues.

I am using pnpm as a package manager.

I have initialized the project with the following command:

pnpx @inlang/paraglide-next init

At first, during the installation, I get an error while changing the imports of the Link elements.

This will replace any imports from next/link and next/navigation with their localized counterparts
Yes
node:internal/fs/promises:628
  return new FileHandle(await PromisePrototypeThen(
                        ^

Error: EMFILE: too many open files, open '/Users/marc/Code/frontend/ai-chatbot/node_modules/.pnpm/eslint-config-next@12.3.4_eslint@8.56.0_typescript@5.3.3/node_modules/eslint-plugin-react/lib/rules/jsx-space-before-closing.js'
    at async open (node:internal/fs/promises:628:25)
    at async Proxy.readFile (node:internal/fs/promises:1228:14)
    at async file:///Users/marc/Library/pnpm/store/v3/tmp/dlx-41632/node_modules/.pnpm/@inlang+paraglide-next@0.2.0_next@14.2.3_react@18.3.1/node_modules/@inlang/paraglide-next/dist/inlang/source-code/paraglide/paraglide-next/src/cli/flows/set-up-i18n-routing/index.mjs:19:25
    at async file:///Users/marc/Library/pnpm/store/v3/tmp/dlx-41632/node_modules/.pnpm/@inlang+paraglide-next@0.2.0_next@14.2.3_react@18.3.1/node_modules/@inlang/paraglide-next/dist/inlang/source-code/paraglide/paraglide-next/src/cli/flows/set-up-i18n-routing/index.mjs:80:13
    at async Promise.all (index 48)
    at async walk (file:///Users/marc/Library/pnpm/store/v3/tmp/dlx-41632/node_modules/.pnpm/@inlang+paraglide-next@0.2.0_next@14.2.3_react@18.3.1/node_modules/@inlang/paraglide-next/dist/inlang/source-code/paraglide/paraglide-next/src/cli/flows/set-up-i18n-routing/index.mjs:83:5)
    at async file:///Users/marc/Library/pnpm/store/v3/tmp/dlx-41632/node_modules/.pnpm/@inlang+paraglide-next@0.2.0_next@14.2.3_react@18.3.1/node_modules/@inlang/paraglide-next/dist/inlang/source-code/paraglide/paraglide-next/src/cli/flows/set-up-i18n-routing/index.mjs:77:13
    at async Promise.all (index 0)
    at async walk (file:///Users/marc/Library/pnpm/store/v3/tmp/dlx-41632/node_modules/.pnpm/@inlang+paraglide-next@0.2.0_next@14.2.3_react@18.3.1/node_modules/@inlang/paraglide-next/dist/inlang/source-code/paraglide/paraglide-next/src/cli/flows/set-up-i18n-routing/index.mjs:83:5)
    at async file:///Users/marc/Library/pnpm/store/v3/tmp/dlx-41632/node_modules/.pnpm/@inlang+paraglide-next@0.2.0_next@14.2.3_react@18.3.1/node_modules/@inlang/paraglide-next/dist/inlang/source-code/paraglide/paraglide-next/src/cli/flows/set-up-i18n-routing/index.mjs:77:13 {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/Users/marc/Code/frontend/ai-chatbot/node_modules/.pnpm/eslint-config-next@12.3.4_eslint@8.56.0_typescript@5.3.3/node_modules/eslint-plugin-react/lib/rules/jsx-space-before-closing.js'
}

Node.js v21.2.0

Secondly, after installation I get the following error when running the dev server

 ⨯ ./node_modules/.pnpm/@inlang+paraglide-next@0.2.0_next@14.1.3_react@18.2.0/node_modules/@inlang/paraglide-next/dist/paraglide-next/src/app/getLanguage.client.js:1:0
Module not found: Can't resolve '$paraglide/runtime.js'

https://nextjs.org/docs/messages/module-not-found

The issue could be caused by the middleware. Since I already have a file and in your doc is written it will create one:

But I don't see from the tutorial how the middleware should look like, so I can combine it with my existing one.

Really like the idea of your project but in the current state I can't use it in my project.

[samuelstroschein]

@themataleao transferred the issue to the paraglide issue tracker. cc @LorisSigrist

[LorisSigrist]

@themataleao
There are two issues here

• Opening too many files
• The $paraglide/runtime virtual module not being resolved properly

You're the first person to report too many files being opened, but that should be fixable. It's likely caused by the way the src/ files are crawled when updating Links.

The issues with the virtual module not being resolved has come up before in https://github.com/opral/inlang-paraglide-js/issues/108, but there it magically fixed itself before it could be reproduced. It would help a lot to know the following thins so we can reproduce and fix:

• Which Operating System are you running on?
• Are you using turbopack?
• Are you using the src/ directory?
• Which exact next version are you using?

Thanks!

[themataleao]

@LorisSigrist Hey Loris,

I assume the replacement I can handle on my own. I have roughly 30 files which are modified by the crawler. But the issue there is it blocks the additional installation steps. Also not a problem I just run it twice, but not as smooth as possible :)

Second issue:

OS: Mac OS latest, M3 Pro Turbopack: No src dir: No Next version: 14.1.3

I am using the clerkMiddleware for my authentication so I have to combine it with the paraglide middleware. For the bundler do I have to add something to my tsconfig.json?

Merci!

[LorisSigrist]

Thanks! I'll see if I can fix this

[LorisSigrist]

The "Too many open Files" error should be fixed (will be in the next version).

@themataleao Does the Could not resolve module "$paraglide/runtime" error still occur or was that fixed once you ran the init command a second time?

[themataleao]

@LorisSigrist The issue is not resolved if I run the init a second time.

Could you point me to the docs how to setup everything needed for paraglide to work without the init command?

I couldn't find anything in the docs.

[themataleao]

@LorisSigrist I made it work. I had to adjust accordingly:

middleware.ts

import { clerkMiddleware } from '@clerk/nextjs/server'
import { middleware as paraglide } from '@/lib/i18n'

export default clerkMiddleware((auth, req) => {
  auth().protect()
  const response = paraglide(req)
  return response
})

next.config.js --> next.config.mjs

import { paraglide } from '@inlang/paraglide-next/plugin'

const nextConfig = {
// whatever you want to put in
}

export default paraglide({
  paraglide: {
    project: './project.inlang',
    outdir: './paraglide'
  },
  ...nextConfig
})

tsconfig.json

"moduleResolution": "Bundler",

Let me know if this is how you imagined it to work or if there are some pitfalls with my solution.

[LorisSigrist]

Haha, I was just writing the docs you requested, awesome that you made it work!

Most likely the next.config.js -> next.config.mjs change is what did the trick!

Does it really break without moduleResolution: Bundler? I can't reproduce that

[themataleao]

@LorisSigrist nope also works with 'node' as moduleResolution. :)

[themataleao]

@LorisSigrist I have just seen, if I do not put the moduleResolution to 'Bundler'. it will cause to not show the correct messages on calling the message function.

It shows: welcome_message instead of Welcome to the platform..