Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Unable to import constants from client-side components | GoodFirstPicks

Unable to import constants from client-side components

vercel/next.js 7 comments 1mo ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeNext.jsTypeScriptReact

Why this is a good first issue

Client-side constant imports behaving unexpectedly with unclear root cause.

AI Summary

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.

Issue Description

Link to the code that reproduces this issue

https://github.com/plaa/next-import-from-client-component-bug

To Reproduce

  1. Start the application in development (next dev)
  2. Open the page --> The types of all constants imported from the client component are "function" instead of their respective types

Current vs. Expected behavior

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.

Provide environment information

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

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

Not sure

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

next dev (local), next build (local), next start (local)

Additional context

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

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • potential architectural implications
  • maintainer pushback on approach
Loading labels...

Details

Points10 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno