fix: example 앱에서 devalue의 ES2021 문법(??=)이 트랜스파일되지 않던 문제 수정

[eunjin11]

Summary

example 앱에서 devalue 라이브러리의 ??= (ES2021) 문법이 트랜스파일되지 않아 Lynx 런타임에서 loadCard failed SyntaxError: expecting ';' 에러가 발생하던 문제를 수정했어요.

source.include에 /lynx-console/ 정규식을 추가하고, 불필요해진 packageDir과 { not: /node_modules/ } 규칙을 제거했어요.

원인 분석

배경: rspeedy의 ES 타겟 자동 적용

rspeedy는 Lynx 런타임 엔진 호환성을 위해 번들링 시 SWC target을 production에서는 es2015로, dev에서는 es2019로 자동 설정해요 (getESVersionTarget). 따라서 일반적인 소비 앱에서는 별도 설정 없이도 ??= 같은 최신 문법이 자동으로 트랜스파일돼요.

배경: source.include와 SWC 로더의 기본 동작

rsbuild의 SWC 로더는 rule.include에 다음 조건들을 OR로 등록해요:

rule.include.add({ not: /[\\/]node_modules[\\/]/ });  // node_modules 밖 파일
rule.include.add(/\.(?:ts|tsx|jsx|mts|cts)$/);         // ts/tsx/jsx 확장자
// + source.include 사용자 항목들

node_modules 안의 .js 파일은 위 기본 조건 중 어디에도 매칭되지 않아서 SWC를 거치지 않아요. source.include는 이런 파일을 SWC 대상에 추가하는 역할이에요.

example 앱에서만 에러가 난 이유

모노레포 환경의 example 앱은 폴더 외부에 있는 package 폴더를 직접 transpile 해야해요. 그러나 기존 설정으로는 devalue를 SWC 트랜스파일 대상에 포함시킬 조건이 없었어요:

source: {
  include: [
    /@lynx-js\/preact-devtools/,
    { and: [packageDir, { not: /[\\/]node_modules[\\/]/ }] },
  ],
}

devalue는 hoisting으로 cancun/node_modules/devalue/에 설치되어 있어서, packageDir(cancun/package) 문자열로는 매칭이 안 돼요. 즉, devalue를 SWC 대상에 포함시킬 조건이 어디에도 없었던 게 원인이에요.

/lynx-console/ 정규식으로 해결한 이유

rspack은 조건 타입에 따라 매칭 방식이 달라요 (@rspack/core의 tryMatch):

if ('string' == typeof condition) return payload.startsWith(condition);
if (condition instanceof RegExp) return condition.test(payload);

• 문자열: startsWith — 경로가 해당 문자열로 시작해야 함
• 정규식: test — 경로 어디든 매칭되면 됨

/lynx-console/ 정규식은 프로젝트 디렉토리 경로에 lynx-console이 포함되어 있어서, ../package/src/ 소스 파일과 hoisting된 cancun/node_modules/devalue/ 모두 매칭돼요. rule.include는 OR 조건이라 이 하나의 정규식으로 기존의 packageDir + { not: node_modules } 조합을 대체할 수 있어요.

packageDir을 제거한 이유

기존에 packageDir을 source.include에 넣었던 이유는, alias로 ../package/src/index.tsx(raw TSX 소스)를 직접 참조하는데 rsbuild가 프로젝트 외부 경로를 기본 트랜스파일 대상에서 제외하기 때문이에요. 하지만 ../package/src/의 .tsx 파일들은 rsbuild 기본 조건인 /\.(?:ts|tsx|jsx)$/에 이미 매칭되고, /lynx-console/ 정규식도 경로에 매칭되므로 packageDir은 불필요해요.

소비 앱에서는 문제 없는 이유

실제 소비 앱에 npm pack으로 설치하고 빌드한 결과, 번들에 ??=가 0개였어요. 소비 앱은 source.include에 node_modules 제외 규칙이 없고, rspeedy가 output 레벨에서 es2015 syntax 변환을 자동 적용하기 때문에 문제가 없어요.

Test plan

• example 앱 빌드 성공 확인
• 빌드된 번들에 ??= 없음 확인
• packageDir 제거 후 빌드 정상 동작 확인
• 소비 앱에서 tarball 설치 후 빌드 정상 동작 확인

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lynx-console	Ready	Preview	Apr 15, 2026 6:58am