Client-side constant imports behaving unexpectedly with unclear root cause.
The issue involves client-side components exporting constants that are incorrectly interpreted as functions when imported. The problem appears in development, build, and production stages. While there's a workaround (separate constants file), the core behavior discrepancy remains unresolved and undocumented.
https://github.com/plaa/next-import-from-client-component-bug
If you import constants from a client-side component file, you receive functions, not the constants.
Simply having ClientComponent.tsx:
"use client";
export const CONST_STRING="string"
and importing it from page.tsx causes the imported constant to be a function instead of string:
import { CONST_STRING } from "./ClientComponent";
export default function Home() {
console.log(typeof CONST_STRING);
return <p>{CONST_STRING}</p>;
}
Also TypeScript shows the type of CONST_STRING to be string.
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.6.0: Thu Sep 12 23:36:23 PDT 2024; root:xnu-10063.141.1.701.1~1/RELEASE_ARM64_T6031
Available memory (MB): 36864
Available CPU cores: 14
Binaries:
Node: 20.14.0
npm: 10.7.0
Yarn: 1.22.22
pnpm: N/A
Relevant Packages:
next: 15.3.0-canary.13 // Latest available version is detected (15.3.0-canary.13).
eslint-config-next: N/A
react: 19.0.0
react-dom: 19.0.0
typescript: 5.8.2
Next.js Config:
output: N/A
Not sure
next dev (local), next build (local), next start (local)
May be related to #66212 which should have been fixed by #66286 and #66990. Bug occurs in both latest release version 15.2.3 and canary.
A workaround is to move the constants to a separate file that is imported from both components, but that requires an additional file every time. Also the functionality is very unexpected and (as far as I can see
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!