Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Async chunk URLs drop the file extension, so .cjs async imports fail with "Requiring unknown module"

Đang mở
  • Có gì không ổn?
#1,959 1 bình luận 2 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
74/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, react-native
Lĩnh vực
build-system

Hướng nghiên cứu

Read Serializers/helpers/js.js, focusing on getModuleParams and the chunk URL construction, then trace parseBundleOptionsFromBundleRequestUrl to understand how extensions are handled. Reproduce the lazy import with a package resolving to dist/index.cjs and verify the served chunk registers the same module id as the importing bundle; also confirm the existing .ts async boundary remains valid.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

With lazy bundling, an import() of a package that resolves to dist/index.cjs throws at runtime: Requiring unknown module "11122".

getModuleParams builds the chunk URL from the resolved path but strips its extension (Serializers/helpers/js.js):

const bundlePath = path.relative(options.serverRoot, dependency.absolutePath);
paths[id] = '/' + path.join(
    path.dirname(bundlePath),
    path.basename(bundlePath, path.extname(bundlePath)),  // `.cjs` is lost here
) + '.bundle?' + searchParams.toString();

The dependency resolved to dist/index.cjs is addressed as /…/dist/index.bundle, and when the server resolves that entry it picks dist/index.js via sourceExts — a different file, a different module id. The served chunk never defines the id baked into the importing bundle.

Measured on an Android dev bundle (Metro 0.84.4, Expo SDK 57) for @walletconnect/core (just one example — any package with this exports shape is affected), whose exports map is { ".": { "module": "./dist/index.js", "default": "./dist/index.cjs" } }:

module id file
main bundle expects 11122 dist/index.cjs
served chunk defines 11125 dist/index.js

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

  1. npx create-expo-app with expo-dev-client
  2. yarn add @walletconnect/core
  3. await import('@walletconnect/core') on a path that runs at startup
  4. start the dev server and open the app

Any package shipping dual builds with different extensions and no require/import conditions hits this. .mjs should be affected the same way.

What is the expected behavior?

The chunk URL addresses the file that was actually resolved, so the chunk registers the same module id as the importing bundle.

Possible fix

Keep the extension. parseBundleOptionsFromBundleRequestUrl already strips exactly one trailing extension (.replace(/\.[^/.]+$/, '')), so both index.cjs.bundle → index.cjs and today's exports.ts.bundle → exports.ts resolve exactly, and no server-side change is needed:

paths[id] = '/' + bundlePath.split(path.sep).join('/') + '.bundle?' + searchParams.toString();

I patched exactly this in @expo/metro-config's fork of the file (serializer/fork/js.ts, identical code, carrying a // TODO: This is not the proper Metro URL encoding of a file path) and re-measured the same app: the @walletconnect/core chunk now registers 11122 → dist/index.cjs, and an existing .ts async boundary in the same bundle still matched (id 11117). The split also fixes the backslashes path.join would produce on Windows. Not tested with web splitChunks, worker async type, or on Windows.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

Metro 0.84.4, Expo SDK 57 (expo 57.0.8), React Native 0.86, Node 24, Yarn 4.18, macOS. Default Expo Metro config plus a custom resolveRequest that does not touch these packages.

Ngôn ngữ chính
JavaScript
Star
5.6k
Fork
696
Merge trung bình
15 giờ 5 phút
Pull request đã merge (30 ngày)
10

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react/metro

Tất cả issue của react/metro

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.