Can't import '.ts' file from '.tsx' file

[felixcatto]

• Rollup Plugin Name: @rollup/plugin-node-resolve
• Rollup Plugin Version: 15.0.1
• Rollup Version: 3.20.2
• Operating System (or Browser): Ubuntu 20.04, Chrome 111
• Node Version: 18.14.1
• Link to reproduction: /~https://github.com/felixcatto/vite-test/tree/bug

Expected Behavior

When i import '.ts' file from '.tsx' file, and specify '.js' extension, it should be imported.

Actual Behavior

I get error

Additional Information

ES modules want that we add file extensions to all files https://nodejs.org/api/esm.html#mandatory-file-extensions
But Typescript doesn't like '.ts', '.tsx', it want '.js', '.jsx', '.mjs', ...

But if i import utils.js, when actual files have different extension i got following error

index.tsx

import { x } from './utils.js';

utils.ts

export const x = '';

index.tsx  'import'  utils.ts    # error
index.ts   'import'  utils.tsx   # error
index.js   'import'  utils.tsx   # error
index.ts   'import'  utils.ts    # works
index.tsx  'import'  utils.tsx   # works

In webpack i can define resolveextensionalias https://webpack.js.org/configuration/resolve/#resolveextensionalias

In rollup nodeResolve extensions option seems combines webpack extensionalias & extensions options. But only partially. It only works if all extensions matches, i.e. all files have '.tsx'

[meyfa]

I think this part may be to blame:

plugins/packages/node-resolve/src/index.js

Lines 149 to 156 in e1bb4bd

	// TypeScript files may import '.js' to refer to either '.ts' or '.tsx'
	if (importer && importee.endsWith('.js')) {
	for (const ext of ['.ts', '.tsx']) {
	if (importer.endsWith(ext) && extensions.includes(ext)) {
	importSpecifierList.push(importee.replace(/.js$/, ext));
	}
	}
	}

The loop will check the following:

• If the importer is a .ts file, then add .ts extension to the resolved paths.
• If the importer is a .tsx file, then add .tsx extension to the resolved paths.

The intended functionality according to the comment would be to add both .ts and .tsx in both cases.

[meyfa]

@felixcatto node-resolve v15.1.0 was just released with my fix (see #1498). Could you verify that this solves your issue?

[felixcatto]

@meyfa Yes, it solves first two cases from this list

index.tsx  'import'  utils.ts    # error => works now
index.ts   'import'  utils.tsx   # error => works now
index.js   'import'  utils.tsx   # error
index.ts   'import'  utils.ts    # works
index.tsx  'import'  utils.tsx   # works

But following scenario doesn't work (I also updated a repo at first post)

index.js

import { x } from './utils.js';
console.log(x);

utils.ts

export const x = 111

Of course it is rare case, when someone want to import .ts file from .js file. So thanks for fix 😉

[meyfa]

Oh sorry, I totally overlooked that case! And it seems that this works with ts-node out of the box as well, so perhaps Rollup should support it?

I personally think it's a bit unusual to import TS from a JS file.

[felixcatto]

Initially i wanted to say "yes", but decided to look at Vite behaviour in this situation. And Vite also throws error, but it is quite popular bundler and seems people doesn't have such problems if it doesn't fixed yet. So i would say that it can be ignored.

[stale]

Hey folks. This issue hasn't received any traction for 60 days, so we're going to close this for housekeeping. If this is still an ongoing issue, please do consider contributing a Pull Request to resolve it. Further discussion is always welcome even with the issue closed. If anything actionable is posted in the comments, we'll consider reopening it. ⓘ