Module not found: Can't resolve '$paraglide/runtime.js'

[muhammedaksam]

Followed this Using ParaglideJS with Next.js' App Router guide.

npx @inlang/paraglide-next init
pnpm install

Changed my moduleResolution to Bundler. A few file is created and got changed as intended.

But whenever I run pnpm dev a Build Error occurs.

Build Error
Failed to compile

Next.js (14.2.3)
./node_modules/.pnpm/@Inlang+paraglide-next@0.1.7_next@14.2.3_@babel+core@7.24.5_react-dom@18.3.1_react@18.3.1__react@18.3.1__react@18.3.1/node_modules/@inlang/paraglide-next/dist/paraglide-next/src/app/providers/ClientLanguageProvider.js:2:1
Module not found: Can't resolve '$paraglide/runtime.js'

https://nextjs.org/docs/messages/module-not-found
This error occurred during the build process and can only be dismissed by fixing the error.

I have "@inlang/paraglide-next": "0.1.7" as dependency and "@inlang/paraglide-js": "1.7.3" as devDependency.

[LorisSigrist]

$paraglide/runtime is a virtual module that's supposed to be resolved by the paraglide bundler plugin. It's supposed to be added automatically by the CLI.

Depending on how it was configured when you ran paraglide-next init it may have failed to install automatically.

Is the paraglide plugin part of your next.config.mjs?

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

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

If it is set up correctly & still doesn't work:

• Are you using Turbopack?
• Which Operating System are you on?

[muhammedaksam]

$paraglide/runtime is a virtual module that's supposed to be resolved by the paraglide bundler plugin. It's supposed to be added automatically by the CLI.

Depending on how it was configured when you ran paraglide-next init it may have failed to install automatically.

Is the paraglide plugin part of your next.config.mjs?

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

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

If it is set up correctly & still doesn't work:

• Are you using Turbopack?
• Which Operating System are you on?

I have paraglide in my next.config.mjs but it doesnt compile.

import withBundleAnalyzer from '@next/bundle-analyzer';
import { paraglide } from '@inlang/paraglide-next/plugin';

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  eslint: { ignoreDuringBuilds: true },
  experimental: { optimizePackageImports: ['@mantine/core', '@mantine/hooks'] },
};

export default process.env.ANALYZE === 'true'
  ? paraglide({
      ...withBundleAnalyzer(nextConfig),
      paraglide: {
        outdir: './paraglide',
        project: './project.inlang',
      },
    })
  : paraglide({
      ...nextConfig,
      paraglide: {
        outdir: './paraglide',
        project: './project.inlang',
      },
    });

Am I missing any steps on https://inlang.com/m/osslbuzt/paraglide-next-i18n ?

[LorisSigrist]

Your config looks correct. I'll try to reproduce your issue

Which OS are you on?
Are you using Turbopack
Which exact NextJS Version are you using?

[muhammedaksam]

Something fixed this somehow.

I was on Windows 11
Not using Turbopack
Next 14.2.3

[LorisSigrist]

Odd but good I guess. LMK if it pops up again!