Using recommended file extension to import TypeScript file causes error "Module not found"

[jameshfisher]

Run next info (available from version 12.0.8 and up)

$ npx --no-install next --version
Next.js v12.0.7

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

16.13.1

What browser are you using?

n/a

What operating system are you using?

Windows

How are you deploying your application?

n/a

Describe the Bug

When importing a TypeScript file using a .js file extension, Next fails with "Module not found"

$ npm run build

> build
> next build

info  - Checking validity of types...
info  - Creating an optimized production build...
Failed to compile.

./pages/index.tsx
Module not found: Can't resolve '../lib/helper.js' in 'C:\Users\james\dev\foobar\pages'


> Build failed because of webpack errors

Expected Behavior

Next.js should resolve TypeScript imports. TypeScript recommends using the .js file extension to import TypeScript files:

• See examples at https://www.typescriptlang.org/docs/handbook/2/modules.html
• Compiled JavaScript import is missing file extension microsoft/TypeScript#40878
• [FEATURE] absolute->relative module path transformation microsoft/TypeScript#15479 (comment)

My Next.js application is not an isolated project; it shares TypeScript modules with other environments that rely on this .js file extension.

To Reproduce

1. echo 'export const n = 5' > lib/helper.ts
2. In pages/index.tsx, add: import {n} from '../lib/helper.js'
3. Run next build or next dev

[sigma54-ca]

I'm having the same issue... have you found any temporary workarounds?

[jameshfisher]

No workarounds - other than changing the import to .ts or removing the extension. Which then breaks other things that expect the .js extension. Not a good situation.

[timneutkens]

Duplicate of #32237

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.