[TODO]: Add .js npm module test

[Tobbe]

In some places of the source code I test for .js imports, assuming they're imports for files local to the app. But there are valid npm packages, e.g. chart.js, that have .js in their name.

Also https://www.npmjs.com/package/pixi.js
I wonder if there are also packages that end with .ts

Make sure to cover a library like that in both dev, serve and prerender tests

Steps:

1. Find a library that supports prerendering (they might call it SSG or SSR). Maybe chart.js does, maybe not, I haven't checked
2. Add it to a page that's marked for prerendering in Routes.tsx in our test-project (__fixtures__/test-project)
3. Update the test-project generation script in tasks/
4. Add validation to CI smoke tests that the component has been rendered (dev and serve both use the same test function). A simple string lookup is sufficient for prerender tests

Semi-related TS issue: microsoft/TypeScript#59597
Also this PR microsoft/TypeScript#59767

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[lisa-assistant]

Implementation Plan

The bug

In packages/babel-config/src/api.ts (line 93), during data-migrate and prerender runs, the module resolver strips .js extensions from import paths so that import { x } from './logger.js' resolves to the TypeScript source file logger.ts. The problem is the regex:

/.*\/.*\.js$/.test(sourcePath)

This matches any path containing a / before a .js extension — which includes sub-path imports from npm packages like chart.js/dist/chart.esm.js. That import would have its extension incorrectly stripped, breaking the resolution.

---

Fix — packages/babel-config/src/api.ts

Scope the rewrite to relative imports only (those starting with ./ or ../). Node bare specifiers (npm packages) should never be rewritten:

// Before
const importPath =
  /.*\/.*\.js$/.test(sourcePath) && (isDataMigrate || isPrerender)
    ? sourcePath.replace(/\.js$/, '')
    : sourcePath

// After
const isRelativeImport = sourcePath.startsWith('.')
const importPath =
  isRelativeImport && sourcePath.endsWith('.js') && (isDataMigrate || isPrerender)
    ? sourcePath.replace(/\.js$/, '')
    : sourcePath

This is a targeted, safe change — the original regex was more permissive than it needed to be.

---

Test addition — __fixtures__/test-project

Step 1 — Pick a library. fraction.js (MIT, zero deps, ~3KB, SSR-safe) is ideal: it's a pure computation library with .js in the package name, no browser globals, and no build-time setup required. Alternatively d3-color works. Avoid chart.js — it references window and will fail during prerender.

Step 2 — Add the import to a prerendered page. The /about page (__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.tsx) already has prerender in Routes.tsx and renders a simple string. Add a usage:

import Fraction from 'fraction.js'

const AboutPage = () => {
  const f = new Fraction(1, 3).toFraction(true)
  return (
    <>
      <Metadata ... />
      <p>Fraction test: {f}</p>   {/* renders '1/3' */}
      ...
    </>
  )
}

Step 3 — Update the test-project generator. In tasks/test-project/rebuild-test-project-fixture.mts, add fraction.js to the web-side package.json install step so it's present in the fixture.

Step 4 — Add CI smoke test assertion. In tasks/smoke-tests/shared/common.ts (or the equivalent prerender smoke test), add a string check for the rendered output:

await expect(page.getByText('Fraction test: 1/3')).toBeVisible()

---

Edge case to watch

The /.*\/.*\.js$/ regex was also preventing any bare npm specifier sub-paths (e.g., lodash-es/cloneDeep.js) from being rewritten. That was actually the correct behavior — the new explicit startsWith('.') check preserves this.

---

Files to change

File	Change
packages/babel-config/src/api.ts	Narrow the regex to relative imports only
__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.tsx	Add fraction.js usage
tasks/test-project/rebuild-test-project-fixture.mts	Add fraction.js to web deps
tasks/smoke-tests/shared/common.ts	Add prerender assertion for the fraction output

[lisa-assistant]

Self-fix confidence: 7/10

The babel-config fix itself is straightforward — one line change with a clear rationale. The lower score comes from the test additions: I'd need to carefully verify which npm library with .js in the name is safe to use during prerender (no window/document access, no dynamic imports that confuse the bundler). I'm confident in the approach but would want to run the full prerender smoke test locally to confirm the chosen library doesn't introduce subtle build issues. The fixture regeneration step also has some complexity since it's a script that rebuilds the entire test project.