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

[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.

[PabloSzx]

any news on this?

[samfortunato]

👍 ing the importance of this issue. Not sure how strictly Next.js uses the feature request label, but I would argue that this should be expected behavior, not an added feature:

• TypeScript has allowed .js extensions in import statements since version 2.0 (September 2016). Using TypeScript in Next.js should follow users' expectations when using TypeScript: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#module-identifiers-allow-for-js-extension

• The official spec of ECMAScript modules uses a URL as the module specifier (I think "bare specifiers", i.e. module names without extensions, are being worked on). Next.js shouldn't go against ECMAScript standards: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_features_into_your_script

As an aside, some devs may have settings in their IDEs that auto-add .js to the end of their imports, to easily use ECMAScript modules/support the new spec. Modifying IDE config or dev workflow to go against spec for one library is not a good dev experience.

[dzek69]

If anyone is looking for copy-paste workaround here it is:

1. install babel-plugin-module-resolver (at the time of writing im using 4.1.0)

2. create babel.config.js (if you already have it you will have to adjust it of course) and put this inside:

const path = require("path");
const fs = require("fs");

module.exports = {
    presets: ["next/babel"],
    plugins: [
        [
            "module-resolver",
            {
                extensions: [".js", ".jsx", ".es", ".es6", ".mjs", "ts", "tsx"],
                resolvePath(sourcePath, currentFile, opts) {
                    if (!sourcePath.startsWith("./") && !sourcePath.startsWith("../")) {
                        return sourcePath;
                    }

                    if (sourcePath.endsWith(".js")) {
                        const relPath = path.resolve(path.dirname(currentFile), sourcePath);
                        const tsPath = relPath.replace(/\.js$/, ".ts");
                        const tsxPath = relPath.replace(/\.js$/, ".tsx");
                        if (fs.existsSync(tsPath)) {
                            return tsPath;
                        }
                        if (fs.existsSync(tsxPath)) {
                            return tsxPath;
                        }
                    }

                    return sourcePath;
                },
            },
        ],
    ],
};

I'm using that for few months already without any issues.

I'd love to have this working without a workaround though. @samfortunato gave some nice arguments why.

[samfortunato]

@dzek69 Awesome, that did work. Was looking for a solution like this before.

Unfortunately, it means Next.js will not use the new Rust compiler. Would have to look at the SWC docs to see if a workaround could be configured in the same way...