Next.js: TypeScript imports with .js file extensions don't work

[justinfagnani]

Bug report

Describe the bug

When importing a TypeScript module from another, TypeScript allows the use of the .js file extension:

foo.ts:

export const foo = 42;

bar.ts

import {foo} from './foo.js'

This is important in plain TypeScript projects because browsers don't do any module resolution and require the correct extensions. The compiled output works as it.

If you copy the same files into a Next.js project you will get a compile error that foo.js cannot be found.

To Reproduce

See above

Expected behavior

No compile errors

System information

• OS: macOS
• Version of Next.js: 9.1.2

[jeremy-coleman]

Another problem that could be solved by separating transpiling from bundling

[Timer]

Hey @justinfagnani! Thanks for letting us know about this issue.

I wasn't aware TypeScript allowed for this behavior. What happens when a .ts and .js version exist, do you know which it prefers?

Are there any other toolkits that support this behavior out-of-the-box? We'd love to see a reference implementation.

We'll explore the above questions if they're more nuanced when we get around to implementing this.

Feel free to send a PR as well!

[jeremy-coleman]

@Timer ts prefers ts and will ignore the js file when both are present, you can confirm with tsc -w without an outDir specified and changing the contents of the .js file - it won't recompile.

to get this working in next, i think https://github.com/tleunen/babel-plugin-module-resolver/blob/master/src/resolvePath.js has everything you need

[lifeiscontent]

seems that next.js prefers .ts files in node_modules folder over .js files as well, in a library I'm writing in TS which I build all my typescript files to js in the same folder, next.js starts crawling the node_modules directory for types and throws an error because I have a babel plugin that processes SVG and typescript doesn't know what it is.